CSS布局套路

作者: 我是Msorry | 来源:发表于2020-12-02 19:25 被阅读0次

CSS布局套路
CSS布局套路
CSS 布局套路
CSS布局套路
文章收藏
css进阶专题
css
css flex布局详解
经典CSS布局：双飞翼和圣杯布局
css相关收集

原则

1.不到万不得已，不要写死 width 和 height 成固定数值
2.如果支持 IE8，就用 Float 布局，固定 width

Float 布局

1. 给子元素加上 float:left
2. 作为布局的子元素上不写内容，内容在后代元素上写
3. 给父元素加上 .clearfix

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    *{margin:0;padding:0;box-sizing:border-box}
    .parent{
      border:1px solid black;
      margin-left: auto;
      margin-right: auto;
      min-width:600px;
    }

    .clearfix::after{
      content:'';
      display:block;
      clear:both;
    }
   .clearfix{
      zoom:1;
    }/*IE6*/
    .navItem{
      float:right;
      margin-left:20px
    }
    .logo{
      height:36px;
      width:100px;
      background: #333;
      color:white;
      line-height:36px;
      text-align:center;
    }
    .nav{
      line-height:24px;
      padding:6px 0;
    }
  </style>
</head>
  
<body>
  <div class="parent clearfix">
    <div style="float:left">
      <div  class="logo">logo</div>
    </div>
    <div style="float:right" class="nav clearfix">
      <div class="navItem">导航1</div>
      <div class="navItem">导航2</div>
      <div class="navItem">导航3</div>
      <div class="navItem">导航4</div>
      <div class="navItem">导航5</div>
    </div>
  </div>
</body>
</html>

Float 布局设置间距

在内容子元素上设置外边距

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    *{margin:0;padding:0;box-sizing:border-box}
    .parent{
      margin-left: auto;
      margin-right: auto;
      min-width:600px;
      background: #ddd;
    }

    .clearfix::after{
      content:'';
      display:block;
      clear:both;
    }
    .clearfix{
      zoom:1;
    }/*IE6*/

    .art{
      width:600px;
      background: #f60;
      margin:auto;
    }
    .art >.sider{
      float:left;
      width:33.333333%;
    }
     .art >.main{
      float:left;
      width:66.666666%;
    }
    .sider >.siderContent{
      height:300px;
      border:1px solid black;
      margin-right:20px;
    }
    .main >.mainContent{
      height:300px;
      border:1px solid black;
    }
  </style>
</head>
  
<body>
  <div class="art clearfix">
    <div class="sider">
      <div class="siderContent">广告1</div>
    </div>
    <div class="main">
      <div class="mainContent">广告2</div>
    </div>
  </div>
</body>
</html>

在布局子元素上设置 calc

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    *{margin:0;padding:0;box-sizing:border-box}
    .parent{
      margin-left: auto;
      margin-right: auto;
      min-width:600px;
      background: #ddd;
    }

    .clearfix::after{
      content:'';
      display:block;
      clear:both;
    }
    .clearfix{
      zoom:1;
    }/*IE6*/

    .art{
      width:600px;
      background: #f60;
      margin:auto;
    }
    .art >.sider{
      float:left;
      width:calc(33.333333% - 20px); /*关键*/
      margin-right:20px; /*关键*/
    }
     .art >.main{
      float:left;
      width:66.666666%;
    }
    .sider >.siderContent{
      height:300px;
      border:1px solid black;
    }
    .main >.mainContent{
      height:300px;
      border:1px solid black;
    }
  </style>
</head>
  
<body>
  <div class="art clearfix">
    <div class="sider">
      <div class="siderContent">广告1</div>
    </div>
    <div class="main">
      <div class="mainContent">广告2</div>
    </div>
  </div>
</body>
</html>

平均布局

Float 平均布局

根据子元素的数量关系消除左右两边的margin，这种做法 IE 不支持

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    *{margin:0;padding:0;box-sizing:border-box}
    .clearfix::after{
      content:'';
      display:block;
      clear:both;
    }
    .clearfix{
      zoom:1;
    }/*IE6*/
    .banner{
      width:600px;
      height:400px;
      background: #888;
      margin:auto;
      margin-top:10px;
    }
    .pictures{
      width:600px;
      margin:auto;
    }
    .picture{
      float:left;
      width:144px;
      height:144px;
      background: red;
      margin:4px;
    }
    .picture:nth-child(4n+1){
      margin-left:0
    }
    .picture:nth-child(4n){
      margin-right:0
    } 
  </style>
</head>
  
<body>
  <div class="banner"></div>
  <div class="pictures clearfix">
    <div class="picture"></div>
    <div class="picture"></div>
    <div class="picture"></div>
    <div class="picture"></div>
    <div class="picture"></div>
    <div class="picture"></div>
    <div class="picture"></div>
    <div class="picture"></div>
  </div>
</body>
</html>

兼容 IE 的做法是加元素包裹子元素，在包裹层加负margin，原来的父元素作布局元素

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    *{margin:0;padding:0;box-sizing:border-box}
    .clearfix::after{
      content:'';
      display:block;
      clear:both;
    }
    .clearfix{
      zoom:1;
    }/*IE6*/
    .banner{
      width:600px;
      height:400px;
      background: #888;
      margin:auto;
      margin-top:10px;
    }
    .pictures{
      width:600px;
      margin:auto;
    }
    .picture{
      float:left;
      width:144px;
      height:144px;
      background: red;
      margin:4px;
    }
    .pictureWrapper{
      margin-left:-4px;
      margin-right:-4px;
    } 
  </style>
</head>
  
<body>
  <div class="banner"></div>
  <div class="pictures ">
    <div class="pictureWrapper clearfix">
    <div class="picture"></div>
    <div class="picture"></div>
    <div class="picture"></div>
    <div class="picture"></div>
    <div class="picture"></div>
    <div class="picture"></div>
    <div class="picture"></div>
    <div class="picture"></div>
      </div>
  </div>
</body>
</html>

Flex 平均布局

当用 justify-content:space-between; 属性做平均布局时，不同行的元素个数不一致会出现 bug，从下面的例子可以看到

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    *{margin:0;padding:0;box-sizing:border-box}
    .clearfix::after{
      content:'';
      display:block;
      clear:both;
    }
    .clearfix{
      zoom:1;
    }/*IE6*/
    .banner{
      width:600px;
      height:400px;
      background: #888;
      margin:auto;
      margin-top:10px;
    }
    .pictures{
      width:600px;
      margin:auto;
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
    }
    .picture{
      float:left;
      width:144px;
      height:144px;
      background: red;
      margin-top:4px;
    }
  </style>
</head>
  
<body>
  <div class="banner"></div>
  <div class="pictures ">
    <div class="picture"></div>
    <div class="picture"></div>
    <div class="picture"></div>
    <div class="picture"></div>
    <div class="picture"></div>
    <div class="picture"></div>
    <div class="picture"></div>
  </div>
  </div>
</body>
</html>

image.png

使用负margin 消除 bug

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    *{margin:0;padding:0;box-sizing:border-box}
    .clearfix::after{
      content:'';
      display:block;
      clear:both;
    }
    .clearfix{
      zoom:1;
    }/*IE6*/
    .banner{
      width:600px;
      height:400px;
      background: #888;
      margin:auto;
      margin-top:10px;
    }
    .pictures{
      width:600px;
      margin:auto;
    }
    .picture{
      float:left;
      width:calc(25% - 8px); /*关键*/
      height:144px;
      background: red;
      margin-top:4px;
      margin:4px; /*关键*/
    }
    .pictureWrapper{
      display:flex;
      flex-wrap:wrap;
      margin:0 -4px; /*关键*/
    }
  </style>
</head>

<body>
  <div class="banner"></div>
  <div class="pictures ">
    <div class="pictureWrapper">
      <div class="picture"></div>
      <div class="picture"></div>
      <div class="picture"></div>
      <div class="picture"></div>
      <div class="picture"></div>
      <div class="picture"></div>
      <div class="picture"></div>
    </div>
  </div>
  </div>
</body>

</html>