布局分类

1. 固定宽度布局，一般为960/1000/1024px
2. 不固定宽度布局，主要靠文档流的原理来布局
3. 响应式布局，意为在PC上固定宽度，手机上不固定宽度

float布局

现多用于IE浏览器

步骤

1. 子元素上加上float:left和width
2. 父元素上加上.clearfix
   • 父元素上添加class=clearfix
   • 并在CSS中写上

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

float布局示例

经验总结

• 对其两个元素的方法（示例中的图片与导航栏文字）：
  1. X=(高元素+矮元素)/2-矮元素 (相加需为偶数)
  2. 矮元素里加上margin-top=Xpx
• 通常最后一个子元素不设置width,或设置为max-width
• img设置为max-width:100%
• 图片下方有空白，应加上vertical-align: middle;或top
• 父级边框的border会对布局产生干扰，可以将border改为outline
• 像素固定的父级元素里的块级元素居中方法：
  • 父级元素加上margin:0 auto;
  • 父级元素加上margin-left:auto;margin-right:auto(比前者好在不会影响上下的margin)
• 平均布局块级元素时，注意在块级元素外再套上一个父级元素x，在x处使用负margin
• IE6/7存在双倍margin的bug(float元素加上外边距，如margin-left,到IE里像素会变为两倍)，解决方法：
  1. 针对IE6/7把margin减半：

 margin-left: 10px;
  _margin-left:5px; 

2. 再加上一个display:inline-block

flex布局

flex布局完整指南

常用

• display:flex
• flex-direction:row\column 控制item的流动向
• flex-wrap:wrap 控制折行，不折行元素会被挤压
• just-content:center\space-between 控制主轴对其方式
• align-items:center 次轴居中对其

item的属性中，

• 默认order为0，如果给order加一个数(负数也行)，元素就会按从小到大排序
• flex-grow使用技巧：分三栏布局时，中间元素给1，两边不给

flex布局示例

其中，实现图片与导航栏文字位居左右两边，方法如下：

1. 给两者的父元素添加justify-content:space-between;
2. 给导航栏添加margin-left:auto;

在平局布局时，如果布局的元素个数为奇数，使用Justify-content：space-between会出现如下情况：

所以同样需要在块级元素外再套上一个父级元素x，并使用负margin

经验总结

• 永远不要把width和height写死，除非特殊说明
• 用min-width/max-width/min-height/max-height来写宽高
• flex可以基本满足所有需求

grid布局

gird布局完整指南

常用

• 直接划分行和列

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

• item 设置范围

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

示例:gird布局划分

• fr 用fr来实现平均布局，就可以不使用负margin 示例:fr平均布局

• grid-template-areas 分区

  grid-template-rows:60px auto 60px;
  grid-template-columns:100px auto 100px;
  grid-template-areas:
    "header header header"
    "aside main ad"
    ". footer footer"

在指定完每行每列的宽高之后，可以直接用grid-template-areas分配布局
同时，可以直接用grid-gap来显示空隙

示例：gird-template-areas布局划分

一个例子

gird十分适合用来做区域划分不规则的布局， 如图，布局如下的商品列表时，可以通过gird轻松完成

商品布局示例