CSS布局

什么是布局

把页面分成一块一块，按左中右、上中下等排列。

布局一般分为两类

• 固定宽度布局(一般用于pc端)，一般宽度为960/1000/1024px
• 不固定宽度布局(一般用于手机)，主要靠文档流的原理来布局。
• 响应式布局(前两种的混合布局，PC上固定宽度，手机上不固定宽度)

布局需要用到哪些属性？
DIV(main header footer nav aside) + CSS 布局

布局

步骤：

• 子元素上加float:left 和 width
• 父元素上加.clearfix(重要)

经验

• 留一些空间或者最后一个块不设宽度(可设max-width)
• 不需要做响应式，因为手机上没有IE，而Float布局是专门为IE准备的。

• IE6/7存在双倍margin bug，解决办法有两个，一是将错就错针对IE 6/7把margin减半。
  二是再加一个display:inline-block

常见布局方式

Float布局

四栏布局(导航)
两栏布局(顶部条)
如果出现这种情况，记得在图片标签中加

vertical-align:top;就会变成

三栏布局(内容区)
如下图，有时候border会干扰我们计算的宽度，可以将border改成outline。

但是直接写margin: 0 auto;不好，改为margin-left: auto; margin-right: auto;只修改左右，不覆盖上下。
平均布局(产品展示区)
使用负margin

注意：不要在手机页面使用float布局，float用来应付IE足以。

Flex布局

弹性盒模型

content属性
让一个元素变成flex容器

.container{
    display: flex; /*or inline-flex 区别是是否会换行*/
}

主轴的对齐方式justify-content属性

次轴对齐方式align-items

多行内容align-content

item属性
order

flex-grow控制如何变胖

flex-shrink控制如何变瘦
一般写flex-shrink:0防止变瘦，默认是1 。
flex-basis控制基准宽度

重点

• display: flex;
• flex-direction: row/column;
• flex-wrap: wrap;
• just-content: center/space-between
• align-items: center;

可以在Flex青蛙游戏练习。

补充：
flex-direction和flex-wrap两个属性经常会一起使用，所以有缩写属性flex-flow。这个缩写属性接受两个属性的值，两个值中间以空格隔开。
举个例子，你可以用flex-flow: row wrap去设置行并自动换行。

以上布局方式用flex重写
平均布局
经验

• 永远不要把width和height写死(手机不要写死，pc可以)，除非特殊说明。
  用min-width/max-width/min-height/max-height
• flex可以基本满足所有需求
• flex和margin-xxx: auto配合有意外效果

什么叫写死？
写死：

• width: 100px;
  不写死：
• width: 50%;
• max-width: 100px;
• width: 30vw;
• min-width: 80%;
• 特点：不使用px，或者加min max前缀。

画设计草图软件推荐

• 墨刀
• Balsamiq
• Figma
• Adobe XD

Grid 布局

Grid布局尤其适合不规则布局。
在父元素加上grid

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

Grid Garden 游戏