现在布局方式主要分为三种
- 传统css布局方案（position,float,line-height等配合）。实现复杂，需要多种属性配合使用，兼容性最好。
- flex布局方案。弹性布局，实现方便，兼容性较好。
- gird布局方案。
css标准盒模型
尺寸
- 默认情况： 块级元素宽度默认为100%，高度由内容撑开；内联元素和内联块级元素宽度和高度默认由内容撑开。
- 开发者设置： 主动设置width、height、line-height等
尺寸的百分比设置
包含块
我们知道width, height都是可以设置百分比，那这个百分比的参照物是谁？这里引出一个概念，叫做包含块(CB, Contanining Block),一个元素的包含块就是该元素的width、height百分比的参照物。
一个元素的包含块是谁，主要取决于该元素的position属性，总结如下：
- position为static和relative的元素，包含块为其父元素的content-box
- position为absolute的元素，包含块为其最近的定位非static的祖先元素的padding-box，如果没有定位非static的祖先元素，则为初始包含块（后面解释）
- position为fixed的元素，包含块为视口viewport
-
position为absolute和fixed时，包含块也可能是由满足以下条件的最近父级元素的padding-box：
- A transform or perspective value other than none
- A will-change value of transform or perspective
- A filter value other than none or a will-change value of filter (only works on Firefox)
margin
块级元素占据一行，是指块级元素的外部尺寸占据一行，就是margin-box。当margin设置为auto的时候，margin会自动占满剩余空间。
- margin-left: 默认为0，为auto时，自动充满剩余空间
- margin-right: 默认为0，为auto时，自动充满剩余空间
- margin-top: 默认为0，为auto时，值还是为0
- margin-bottom: 默认为0，为auto时，值还是为0
当margin-left和margin-right同时为auto，就会平分剩余空间，这就是margin:auto会使元素水平居中的原因。
line-height和vertical-align
利用line-height和vertical-align可以设置多种场景下的垂直居中。