1.CSS布局

布局分类

• 固定宽度布局，一般宽度为960/1000/1024px
• 不固定宽度布局，主要靠文档流的原理来布局
• 响应式布局

float布局

步骤

1. 在父元素上加.clearfix，一定要加

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

2. 在子元素上加 float: left 和 width
   经验

• IE6/7存在双倍margin bug（在float布局里，加上margin-left会在IE6/7里变成双倍）
  解决办法有两个：
  一是将错就错，针对IE6/7把margin减半

.logo{
    margin-left: 10px;
    _margin-left: 5px;
}

二是加一个display: inline-block;

• 加上头尾，即可满足所有PC页面需求
• 手机页面不要用float布局
• float布局需要自己计算宽度，不灵活

flex布局

• 让一个元素变成flex容器

  
  
  

.container{
      display: flex;/* or inline-flex */
}

• 改变items的流动方向

  
  

.container{
      flex-direction: row/row-reverse/column/column-reverse;/* row为默认值 */
}

• 改变折行

  
  

.container{
      flex-wrap: nowrap/wrap/wrap-reverse;/* nowrap为默认值 */
}

• 主轴对齐方式（默认主轴是横轴，除非改变了flex-direction的方向）

  
  

.container{
       justify-content: flex-start/flex-end/center/space-between;/* flex-start为默认值 */
}

• 次轴对齐方式（默认次轴是纵轴）

  
  

.container{
       align-items: stretch/flex-start/flex-end/center;/* stretch为默认值 */
}

• 多行内容（很少用到，如果所有flex子项只有一行，则align-content属性是没有任何效果的）

  
  

.container{
      align-content: stretch/flex-start/flex-end/center;/* stretch为默认值 */
}

Grid布局

Grid也分container和items，要分别记忆

• 成为container

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

• 行和列

  
  

.container{
grid-template-columns: 40px 50px auto 50px 50px;
grid-template-rows: 25% 100px auto;
}

• item可以设置范围

.item-a{
     grid-column-start: 2;
     grid-column-end: 5;
     grid-row-start: 1;
     grid-row-end: 3;
}

• fr - free space

.container{
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
}

• 分区 grid-template-areas

  
  

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

• 空隙gap

  
  

.container{
grid-template-columns: 60px 60px 60px;
grid-template-rows: auto;
grid-column-gap: 10px;
grid-row-gap: 15px;
}

---

资料来源： 饥人谷