CSS布局方案

时间：2017年4月27日09:26:24

    如果，唱歌的基本功是好嗓音，舞蹈的基本功是身体的柔韧性，那么前端工程师的基本功之一就是页面布局，实现同一效果的布局方案很多，没有绝对的对与错，只有相对而言的合理与紊乱。本文宗旨，汇总优良页面元素布局方案。思想有深度，文章有温度，感谢您的阅读和分享。

    理论：

    与布局有关的CSS属性：float-浮动，position-定位，display-元素的框类型，columns-多栏，flex-弹性盒模型，margin-外边距，transform-2D/3D转换，z-index-堆叠顺序

    推荐CSS布局属性的采用顺序：display > flex > position > float

1、浮动

    float：left、right、none、inherit；注意：绝对定位的元素忽略float属性

    元素设置浮动属性后，会从普通文档流中脱离，并且本身变成具有宽和高的块级框，元素本身margin边界不会超出‘包含块’（离浮动元素最近的块级祖先元素）的padding内边界，即浮动元素的浮动位置不会超出包含块的内边界。

    浮动带来的弊端：①同级兄弟块状元素，会钻进浮动元素的下面，被浮动元素所覆盖②行内元素（例如文字） 会环绕在浮动元素的周围，出现文字排列不规整③如果浮动元素的父元素没有设置高度，则会导致父元素的高度塌陷④浮动元素的 margin属性 水平无效。

    注意事项：设置浮动，必须清除浮动（闭合浮动），从而消除浮动元素产生的弊端；

    清除浮动：clear：left | right | both；对于兄弟元素而言，非浮动元素会受到浮动元素的影响，因此需要清除非浮动元素的左/右浮动效果，clear属性用于非浮动元素。

    清除浮动的方案：①父元素设置固定高度②添加额外元素，如浮动元素同级末尾追加<div style="clear:both"></div>③父元素设置overflow:hidden || overflow:auto④采用:after伪元素处理， .clearfix:after{content:"."; display:block; height:0; visibility:hidden; clear:both; }.clearfix { *zoom:1; }

2、元素的框类型

    W3C执行的标准是BFC（block formatting context，块级格式化上下文）规范，每个HTML元素都有默认的框类型-display属性，用来设置元素的框类型。display：block | inline | inline-block，即常说的 块级元素 | 行内元素 |行内块级元素。

    块级元素（block element）：具有盒模型属性（如：width、height、margin、padding、border），并且每个元素占据 普通流 的整行垂直排列，元素前后带有换行符，一般作为其他元素（块级元素/行内元素）的容器使用。常见的元素有：div、p、h1-h6、dl、dt、dd、form、ul、li、ol、table、th、tr、td等。

    行内元素（inline element）：不具有盒模型属性（如：width、height、margin、padding、border），但margin和padding的水平方向属性有效，垂直方向属性无效，可以和其他 行内元素 在 普通流 的一行水平排列，一般行内元素内部不可以包含 块级元素。常见的元素有：a、img、input、label、span、textarea、select、b、em等。

    行内块级元素（inline-block element）：既具有 行内元素 属性（可以和其他 行内元素 在 普通流 的一行水平排列），又具有 块级元素 属性（具有盒模型属性，可以设置width、height、margin、padding、border）。

    因此，对于块级元素希望同一行水平布局，可以重置display：inline-block；

3、定位

4、弹性盒模型

5、多栏

6、z-index

只对position属性为relative、absolute和fixed起作用

    实践（优先考虑方案）：