CSS布局--超详解版

CSS布局

目录

1. 布局分类
2. 布局思路
3. 布局需要用到哪些属性
4. float布局
5. flex布局
6. grid布局（二维
7. 平均布局

---

一、布局分类

• 固定宽度布局：一般宽度设置为960、1000、1024px
• 不固定宽度布局：依靠文档流的原理来布局
• 响应式布局：PC上一种布局样式，手机上又是另外一种布局样式

---

二、布局思路

• 从大到小(老手推荐)

  1. 先定下大局
  2. 完善每个部分的小布局

• 从小到大(新人推荐)

  1. 先完成小布局
  2. 组合成大布局

---

三、布局需要使用那些属性

• 一图流
  

---

四、float布局

• 步骤
  1. 子元素上加float:left|right 和 width
  2. 在父元素上加.clearfix类名

    .clearfix::after {
        content:'';
        display:block;
        clear:both;
    }
  

• 经验
  1. 留一些空间或最后一个不设width
  2. 不需要做响应式，手机上没有IE
  3. 手机页面不用float
  4. IE 6/7存在双倍margin BUG

      解决方案：
  
      1、将错就错，针对IE 6/7将margin减半
      2、再加一句：display:inline-block
  

---

五、flex布局

• flex要素

  1. container容器 (一般做父元素)
  2. items （container的直接子元素）
  3. 弹性盒模型
     

• 让一个元素变成flex容器

    .container {
      display:flex | inline-flex ;
    }
  

• 代码演示用法

    <style>
      .container {
        display:flex;
        border:1px solid green;
      }
      .item {
        width:50px;
        height:50px;
        border:1px solid red;
      } 
    </style>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
  

• container的各种样式

  1. 改变items流动方向(主轴)

       .container {
         flex-direction: row 默认值 | row-reverse | column | column-reverse
       }
     

     

     ---

  2. 主轴对齐方式

      .container {
        justify-content: flex-start 默认值 | flex-end | center | space-between | space-around | space-evenly
      }
     

     

  ---

  3. 次轴对齐方式

      .container {
        align-items:stretch 默认值 | flex-start | flex-end | center | baseline
      }
     

     

     ---

  4. 改变是否折行

      .container {
        flex-wrap: nowrap 默认值 | wrap | wrap-reverse
      }
     

     

  5. 多行内容

      .container {
        align-content: flex-start 默认值 | flex-end | center | stretch | space-between | space-around
      }
     

     

     ---

     ---

• items的各种样式

  1. order：默认order为0，加上order后，items会按照order的大小重新排列，有负值（-1排在0前面）

      .item:first-child {
        order:5;
      } 
      .item:nth-child(2) {
        order:4;
      }
       .item:nth-child(3) {
        order:2;
      }
       .item:nth-child(4) {
        order:1;
      }
       .item:last-child {
        order:-1;
      }
     

     

  2. flex-grow：控制自己（item）占多大面积(按比例分配)，默认flew-grow:0

      .item:first-child {
        flex-grow:1;
      }
      .item:nth-child(2) {
        flex-grow:2;
      }
      .item:nth-child(3) {
        flex-grow:1;
      }
     

     

  3. flex-shrink：控制自己如何变瘦（item盒子的宽和高）

      .item:first-child {
          flex-shrink:1 默认值;
      }
     

     • 1、什么情况下有用？
     • 答：item给定width以后，页面拉小时，控制item变瘦的那个小的更夸张。
     • 2、一般写flex-shrink:0 防止变瘦

  4. flex-basis: 控制基准宽度

      .item {
        flex-basis: auto 默认值;
      }
     

  5. align-self: 控制某个item特立独行

      .item:nth-child(3) {
        align-self: flex-end;
      }
     

     

  6. 缩写语句：flex:flex-grow flex-shrink flex-basis

---

六、grid布局

• grid要素
  1. container
  2. items
• 让一个元素成为grid容器

    .container {
      display:grid | inline-grid;
    }
  

• 代码演示用法

    <style>
      .container {
        display:grid;
        border:1px solid green;
      }
      .a,.b,.c,.d,.e {
        border:1px solid red;
      }
    </style>
    <div class=".container">
      <div class='a'></div>
      <div class='b'></div>
      <div class='c'></div>
      <div class='d'></div>
      <div class='e'></div>
      <div class='f'></div>
    </div>
  

  1. 设置行和列

      .container {
        grid-template-columns:40px 50px auto 50px 40px;
        grid-template-rows:25% 100px auto;
      }
      /* 表示创建了3行4列的矩阵形式布局 */
     

     

  2. 可以给每条线取名字

      .container {
        grid-template-columns:[first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
        grid-template-rows:[row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
      }
     

     

  3. item可以设置范围(以行数和列数为基准,默认索引从1开始)

      .a {
        grid-column-start:2;
        grid-column-end:five;
        grid-row-start:row1-start;
        grid-row-end:3;
      }
     

     

  4. fr 单位--free space 按比例分配width和height

        .container {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
         grid-template-rows: 1fr 1fr;
         border:1px solid green;
         width: 300px;
         height: 200px;
         margin: 100px auto;
       }
       .a,.b,.c,.d,.e,.f{
         border: 1px solid red;
       }
     

     

  5. gap -- 搭配平均布局使用

      .container {
        grid-gap: 12px; | 全局方向
        grid-column-gap: 12px; | 列方向上
        grid-row-gap: 12px; | 行方向上
      }
     

  6. grid-template-areas -- 分区

      .container {
        display:grid;
        grid-template-columns:50px 50px 50px 50px;
        grid-template-rows:auto;
        grid-template-areas:
        "header header header"
        "main main . siderbar"
        "footer footer footer footer";
      }
      .a {
        grid-area:header;
      }
      .a {
        grid-area:main;
      }
      .a {
        grid-area:sidebar;
      }
      .a {
        grid-area:footer;
      }
     

     

     更多内容

---

七、平均布局

  <div class="container clearfix">
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
        <div class="a"></div>
  </div>

  <style>
    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }
    .clearfix::after{
      content:'';
      display:block;
      clear:both;
    }
    .container {
      width:400px;
      border:1px solid green;
      margin-right:-20px;
    }

    .a {
      border:1px solid red;
      float:left;
      width:120px;
      height:120px;
      margin-right:20px;
      margin-bottom:15px;
    }
  </style>
  content:'';
      display:block;
      clear:both;
    }
    .container {
      width:400px;
      border:1px solid green;
      margin-right:-20px;
    }

    .a {
      border:1px solid red;
      float:left;
      width:120px;
      height:120px;
      margin-right:20px;
      margin-bottom:15px;
    }
  </style>