前端的CSS布局是一个基本的技术之一，前端基本布局可以分为普通流和非普通流。普通流就是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，显示出来就是从左往右，从上到下。非普通流就是需要依靠css布局的三兄弟——position、display、float。它们三者的关系是相互独立又在暗中影响。
相信玩过《我的世界》游戏的朋友都知道，在《我的世界》之中一切都是有方块组成，无穷的方块组成无穷的世界。而在前端的世界之中也可以认为所有一切都是由方块的盒子组成的。这就是盒子模型，其有content、padding、border、margin组成，而一个个盒子的摆放位置就构成了CSS布局。
首先来看看display，它有四个常用的属性：none、block、inline、inline-block。
它们分别表示：
none：元素不会显示，也不占据文档空间，如同不存在。
block：元素显示为块级元素，此元素默认宽度100%，独占一行。
inline：元素显示为内联元素，左右margin、padding可设置，上下则不可。
line-block：元素显示为行内块元素，表现和inline元素一样，不过可以设置其上下margin、padding。
position 常用属性：
inhert：为此值时，从父元素继承 position属性
static：默认值。元素出现在正常流中，忽略top、left、right、bottom和 z-index 声明。
relative：生成相对定位的元素，相对于元素本身正常位置定位，元素占据的位置还是原来正常状态的位置
absolute：生成绝对定位的元素，相对于static 定位以外的第一个祖先元素进行定位，元素不占据文档位置
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位，同样不占据文章位置
而float这个属性就更有意思了，浮动的元素根据其值左右移动，直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在普通文档流之中，文档中的普通流元素表现的就像浮动元素不存在一样。
当了解了三者各自的特性以后，我们就可以在文档布局之中使用，但是有个问题，这是寒冬大神提出的一个题目：
当position、display、float的特性相互叠加后会发生什么？
在jackyWHJ前辈文章中找到一个图片，其直观说明它们三者的关系：
总体来说
对于元素首先判断其存在不，也就是“display: none”是不是存在，如果存在则直接结束，元素的position和float都不起作用。
当元素确实存在时，“position: absolute”和“position: fixed”的优先级最高，元素有这两个值时，float属性不起作用，大部分元素的display也会转换为块级元素。
当元素拥有float且不为none时，元素会浮动并且转换为块级元素。
当元素是根元素时，元素也会转换为块级元素。
如果排一个优先级：
display: none > position: absolute\fixed > float > root
因此，网页的布局实际就是这三兄弟作用或相互影响作用的结果。
同样，布局中应用得多的还有负margin，并且对布局有影响的还有一个重要的特性 margin collapse，这个在下一篇文章中总结。
网友评论