读《精通css》--第三章可视化格式模型

Posted 2020-07-23

一. 盒模型：

　　1. IE 和 盒模型: 非标准盒模型

　　2. 外边距叠加：什么情况下外边距会叠加？

　　　　1）两个垂直的块元素

　　　　2）两个包含关系的块元素并且之间没有padding和border隔开

　　　　3）外边距与自身发生叠加，空元素，没有padding和border

　　　　4）空元素的外边距碰到另一个空元素的外边距。

　　　解决办法：行内元素、浮动元素、绝对定位元素的外边距不会叠加。如果是包含关系的话，加上padding或者border。

 

二. 3种可视化格式模型：

　　1. 普通流：块级元素和行内元素。

　　　　1）块级框从上到下一个接一个垂直排列，框之间的距离由垂直外边距计算出来。

　　　　2）行内框在一行中水平排列。可是使用水平内边距、边框、外边距改变水平间距。但是，垂直内边距、边框和外边距不影响行内框的高度。同样，给行内框设置显示的高度或者宽度也没有影响。

　　　　　　　行框：由一行形成的水平框。行框的高度总是足以容纳它所包含的所有行内框。但是设置行高可以增加这个框的高度。

　　　　　　　修改行内框的尺寸的唯一方法是修改行高或者水平边框、内边距、外边距。

　　　　3）inline-block： IE8及其以上支持。

　　2. 绝对定位

　　3. 浮动：浮动的框可以左右移动，直到它的外边缘碰到包含框或者另一个浮动框的边缘。浮动框也不在文档的普通流中。

　　　　如果浮动的元素后面有一个文档流中的元素，那么这个元素的框会表现得像浮动根本不存在一样。但是，框内的文本内容会受到浮动元素的影响，会移动以留出空间。

　　　　清除浮动：clear属性 left、right、both、none。

　　　　　　原理，如果有一个浮动框和一个不浮动框，则给不浮动框添加clear属性，原理就是给这个不浮动框添加足够多的外边距。

　　　　　　如果一个框内只包含着浮动框，清理浮动的办法有：

　　　　　　a. 在框内最后添加一个空元素，并添加clear属性清除。这个原理同上。

　　　　　　b. 给框也添加浮动。

　　　　　　c. 给框添加overflow:hidden

　　　　　　d. 利用:after伪类和内容声明在框的末尾添加新的内容          

 

三. 3种定位：

　　1. 相对定位：无论是否移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框。即提高层级。
　　2. 绝对定位：使元素的位置与文档流无关，因此不占据空间。普通文档流中其他元素的布局就像绝对定位的元素不存在时一样。如果扩大绝对定位的框，周围的框不会重新定位。
　　3. 固定定位：