CSS3秘笈复习：第七章

Posted 2020-07-03

1.边距冲突：

　　当元素的bottom margin碰到另一个元素的top margin可能会产生一些怪异的计算，浏览器会忽略小的那个值而使用大的值。

2.边距折叠：

　　假设要在警告框里插入一个标题，并且要在它与div的顶部和底部之间各留出一点空间，浴室设置标题的margin为10px。但是设置的边距反而出现在了div的上方，这种现象叫做边距折叠，意味着两个边距变成了一个。解决的方法有两种：（1）在<div>标签周围添加少量的padding；（2）给<div>添加一条border。

　　水平边距不会和浮动元素之间的边距发生折叠，绝对定位和相对定位的元素也不会发生折叠。

3.行内元素：

　　行内元素只有left/right的margin值，例如<img>与<a>。

4.背景颜色：

　　使用background-color和border时，如果边框样式为圆点或者虚线，在圆点或虚线之间的空白处就会显示出背景色。换句话说，web浏览器实际上是把背景色显示在边框线的下方。

5.border-radius：

　　border-radius有四个值时，顺序为：左上角、右上角、右下角、左下角。

6.设置盒模型高度与宽度：

（1）content-box:宽度与高度包括内容部分。

（2）padding-box：宽度与高度包括padding部分。

（3）border-box：宽度与高度包括border部分。

7.overflow：

（1）visible：把内容显示在任何地方。

（2）scroll和auto：会添加滚动条。

（3）hidden不现实超过的那部分内容。

8.float：

　　源代码的顺序对浮动元素的显示有很大影响。浮动标签的html代码必须出现在任何包围浮动元素的内容之前，假设你已经创建了这样一个网页，它包含一个<h1>标签，后面是一个<p>标签。在<p>标签的末端，又用一个<img>标签插入了一张图片，假设你把这张图片浮动到右边，那么<h1>标签和<p>标签里面的内容仍然出现在照片的上方，只有<img>标签后面的内容会包围图片的左侧。