《CSS权威指南》读书笔记4

第八章 内边距、边框与外边距

---

1.基本元素框

所有文档元素都生成一个矩形框，这称为元素框（element box）

1.宽度与高度

width：从左内边界到右内边界的距离
height：从上内边界到下内边界的距离
*这两个元素不能应用到行内非替换元素（例如链接），只能应用块级元素和替换元素；且均无继承性。一般，元素的高度由其内容决定。

---

2.外边距与内边距

元素的背景会延伸到内边距中，而不会延伸到外边距。因此，为元素指定的内边距和外边距会影响元素的背景何时结束。

---

2.外边距

margin默认值为0

---

1.长度值与外边距

margin属性可以在内容区周围增加空白（因为背景不会延伸到外边距）
*上右下左 TRBL

---

2.百分数和外边距

百分数是相对于父元素的width计算的。如果没有为元素声明width，则元素的外边距会扩大或缩小以适应父元素（或显示画布）的实际大小。

---

3.值复制

如果希望除了左外边距以外所有其他外边距都是auto，则：

h2{margin:auto auto auto 3em;}

无法简写

---

4.单元外边距属性

margin-left/right/top/bottom

---

5.负外边距和合并外边距

正常流中垂直相邻外边距会合并

---

6.外边距和行内元素

非替换元素

外边距可以应用到行内元素，不过如果向一个行内非替换元素应用外边距，它对行高没有任何影响；因为外边距是透明的，所以这个声明没有任何视觉效果。
*对于只包含文本的行，能改变行间距离的属性只有line-height、font-size、vertical-align

但只对行内非替换元素的上下边成立，左右两边不同，如果设置了左/右外边距值，它们是可见的，例如：

还有一种情况：

如果行内非替换元素应用负外边距，元素的上下外边距不受影响，行高也不受影响，不过元素左右两端可能与其他内容重叠。例如：

替换元素

为替换元素设置外边距确实影响行高，这取决于上下外边距的值；左右外边距与非替换元素的作用一样

---

3.边框

元素的背景会在外边框边界处停止，所以背景不会延伸到外边距以内。
边框有三个方面：宽度/粗细，样式/外观，颜色
宽度默认值为medium；
边框样式默认为none；
颜色默认为元素本身的前景色。如果一个元素没有文本，假设一个表内只有图像，那么该表的边框颜色就是其父元素的文本颜色。

---

1.边框与背景

边框绘制在“元素的背景之上”，CSS2.1明确指出元素的背景为内容，内边距和边框区的背景

---

2.有样式的边框

1)多种样式

可以为给定边框定义多个样式，按上右下左规则，例如：

p.aside{border-style:solid dashed dotted solid:}

2)单边样式

border-top-style、border-right-style、border-bottom-style、border-left-style

假如想在标题的三个边上设置边框，但左边没有边框，则：

h1{border-style:solid solid solid none;}
或者
h1{border-style:solid;border-left-style:none;}

方法二中，单边属性要放在简写属性之后，不然会覆盖。

---

3.边框宽度

1)根本没有边框

样式为none的边框并不存在，如果希望边框存在，一定要声明边框样式

---

4.边框颜色

1)透明边框

想创建不可见的边框，可引入边框颜色值transparent

---

5.简写边框属性

具体值的顺序并不重要，而且还可以忽略某些值。

---

6.全局边框

这个属性的值会应用到四个边，如果希望元素有不同的边框，可以利用层叠。

---

7.边框和行内元素

不论为行内元素的边框指定怎么样的宽度，元素的行高都不会改变。
对于上下边框，例如：

对于左右边框：

---

4.内边距

默认的，元素没有内边距。如果没有它，元素的边框会与元素本身的内容非常接近。而且内边距不合并。

---

1.百分数值和内边距

百分数值相对于其父元素的width计算（不论是上下内边距还是左右内边距）

---

2.单边内边距

---

3.内边距和行内元素

对于行内元素，外边距和内边距有很大区别。
左右内边距：如果为其设值，则其可见，如图：

内边距不会应用到各行的左右两边，对于替换元素也是这样，当然这种元素不会跨行。

上下内边距：

---

4.内边距和替换元素

还可以向图像应用内边距，例如：

img{background:silver;padding:1em;}