关于CSS布局的核心概念的快速入门指南

关于CSS布局的核心概念的快速入门指南


# CSS布局的核心流程


CSS布局的过程是‘’‘自顶向下’‘’的。即是说，最顶层的body元素对应最外面window的大小，父元素作为子元素的容器。当子元素超出父元素范围时，可以溢出、截断或者引入滚动视图。CSS布局无法实现类似于android里wrap-content的布局（即设置父view的size为恰好装下子view内容）。这里我想强调的一个核心在于‘’‘自顶向下’‘’的布局。


# inline与block


这是两个最核心的布局模型。block大家都知道，就是一个Box模型，padding／border／margin之类。inline有什么不同？这里tricky的地方在于，上下两行inline元素的margin将发生塌陷（collapse）。


# float


所谓的浮动就是将元素“提出”正常的文档流，然后开始像拼方块一样拼接。这里有个值得一说的地方，IE的早期实现float有bug，所以要加显式的“清除浮动”的hack。《精通CSS：高级Web标准解决方案（第2版）》那本书里有详细的介绍。


# position


接下来就到了“定位”的概念。首先是固定定位（position:fixed），即相对于窗口位置定位元素。然后是absolute和relative。定位同样使得元素脱离正常的文档流，同时结合z-index，使得后端开始真正地对接一个2D渲染模型。即“图层”的概念。此外，定位引入了stacking context的概念，即一个元素相对于某个父／祖先容器元素定位。定位和z-index实际上就可以实现任意可视化效果了，比如说，可以用1x1大小的div元素来画圆，制作动画效果？


到此为止，CSS布局的核心概念就讲得差不多了。其他细节并非主线。下面额外谈谈CSS3的一些扩展


# CSS3新的布局扩展


比如table layout、flexbox、grid layout、multi-column等等，实际上都不值得讲。有意思的地方在于CSS3 Exclusions／Shapes／Region，它摆脱了基于方块的布局模型思路，引入了不规则的区域，可使得inline元素（文本）围绕不规则区域、或者是在不规则区域内部进行布局。实际上这里主要就是要决定在什么位置换行而已。


* https://www.w3.org/TR/css-regions-1/
* https://www.w3.org/TR/css-shapes-1/
* http://www.w3.org/TR/css3-exclusions/