作者
JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”(script language),指的是它不具备开发操作系统的能力,而是只用来编写控制其他大型应用程序(比如浏览器)的“脚本”。 JavaScript 只合适嵌入更大型的应用程序环境,去调用宿主环境提供的底层 API。 目前,已经嵌入 JavaScript 的宿主环境有多种,最常见的环境就是浏览器,另外还有服务器环境,也就是 Node 项目。
目录
周六亲手写的三列布局
落霞与孤鹜齐飞 7月17日 11 0 0 11 0 0

大概也就是浮动、定位、弹性布局之类的不多说了。
现在是2021年7月17日,是2021年,不是网络上有的文章说的那种2102年或者1202年或者1902年啥的,2021年没有那么多要搞兼容的,弹性布局,网格布局都能解决这些问题了。
主要写下广为流传的圣杯布局和双飞翼布局。主要还是要认识下定位盒子模型边距这些用法。

<div className="column3">
  <div className="left">left</div>
  <div className="center">center</div>
  <div className="right">right</div>
</div>

我这里和别的文章不同的是,就是要把center放在中间。
实现就是父元素的padding抵消子元素的负数margin。

.column3 {
  overflow: hidden;
  padding: 0 200px;
  > div {
    float: left;
  }
  .left {
    margin-left: -200px;
    width: 200px;
    background-color: #f00;
  }
  .center {
    width: 100%;
    background-color: #00f;
  }
  .right {
    margin-right: -200px;
    width: 200px;
    background-color: #0f0;
  }
}

下面是网上双飞翼的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>css</title>
    </head>
     <style type="text/css">
         *{
             margin:0;
             padding: 0;
         }
         .main>div{
          float: left;
         }
         .left {
             width: 200px;
             background: red;
             margin-left: -100%;
         }
         .right{
             width: 200px;
             background: blue;
             margin-left: -200px;
         }
         .middle{
             width: 100%;
             background: yellow;

         }
         .content{
             margin-left: 200px;
             margin-right: 200px;
         }
     </style>
    <body>
    <div class="main">
        <div class="middle">
             <div class="content">
             中间
             </div>
         </div>
        <div class="left">
            左边
        </div>
        <div class="right">
            右边
        </div>
    </div>
    </body>
</html>

下面是网上圣杯的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>css</title>
    </head>
     <style type="text/css">
         body{
             min-width: 550px;
         }
         *{
             margin:0;
             padding: 0;
         }
         .header , .footer{
             background: gray;
             width: 100%;
         }
         .footer{
             clear: both;
         }
         .main{
             height: 200px;
             padding: 0 150px 0 200px;
             background: greenyellow;
             *zoom: 1;
         }
         .left , .center , .right{
             float: left; 
         }
         .center{
             width: 100%;
             height: 200px;
             background: red;
         }
         .left {
             width: 200px;
             height: 200px;
             background: yellow;
             margin-left: -100%;
             position: relative;
             left: -200px;
         }
         .right{
             width: 150px;
             height: 200px;
             background: gainsboro;
             margin-left: -150px;
             position: relative;
             left: 150px;![在这里插入图片描述](https://img-blog.csdnimg.cn/20190623214733790.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtbGxqZXQ=,size_16,color_FFFFFF,t_70)
         }
     </style>
    <body>

    <div class="header">
             头部
    </div>
    <div class="main">
        <div class="center">中间中间中间中间中间中间中间后</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
    <div class="footer">
        底部
    </div>
    </body>
</html>
扫码分享到移动端
0 条评论
快来写一写读后感吧~
参与评论互动
登录即可参与评论互动哦