CSS可视化格式模型（CSS Mastery随笔）

Posted 2020-07-13 郭逊

CSS渲染页面的时候，把每个文档元素看作是盒子。

CSS盒子模型

　　margin，padding，border，内容。

margin会出现margin折叠。上下元素的margin折叠。左右的不折叠。包含的元素之间marign也会折叠。margin折叠的好处是文档排版齐整。

每个元素都会有一个框。这个框分两种类型。块级元素的块框、行内元素的行内框。

行框：还有行框的概念，行框的高度由中间最高的行内框决定。设置行内框的高度、padding、margin并不影响行框的高度。行框的高度line－height可以设置行高。

匿名框。匿名框不容易设置样式（:first－line） 

　　

CSS有三种渲染模型。

　　自然文档流、position、float。

float：浮动元素脱离文档流。可以左浮动、右浮动。浮动脱离文档流，块元素忽视浮动元素、自然排版，但是，块元素里面的文本元素缺感知到浮动的存在，围绕浮动排版。可以使用clear清除浮动。

float元素的父元素高度为0.

1，添加标签，清除浮动。

2，overflow

3，父元素float

4，after元素。

postion

　　relative：还在自然流中，相对自然流中的位置偏移。

　　absolute：不在自然流中，相对position设置为 relative，absolute，fixed的祖先元素定位，如果没有就是初始包含块。

　　fixed：相对视窗定位。