Head First HTML与CSS

第九章 盒模型

CSS——掌控页面的表现

如何调整页面上文本的行高

使用line-height属性即可。

body{

line-height:1.6em;

}

增加文本的行高可以改善可读性。这里将各行之间的间距改为1.6em，就是字体大小的1.6倍。

类似于其他与字体相关的属性，可以按像素指定行高，也可以用em或百分数值相对于字体大小来指定。

line-height属性可以继承。

什么是盒模型

CSS将每个元素看作一个盒子，无论是段落、标题、块引用、列表、列表项等，甚至内联元素也不例外。

每个盒子由一个内容区以及可选的内边距、边框和外边距组成。

利用CSS，可以对盒子的所有方面加以控制：内容周围内边距的大小、元素是否有边框（边框类型及大小）、元素之间有多大的外边距。

内容区由可选的内边距包围，外面是一个可选的边框，最后由可选的外边距包围。

什么是内容区

每个元素都会有一些内容，如文本或图像，这个内容会放在一个盒子里，这个盒子的大小正好能包含所有内容。注意，在内容区中，内容与盒子边缘之间没有空间。

什么是内边距

所有盒子在内容区周围可能有一层内边距。内边距是可选的，不一定有。通过使用内边距，可以在内容与盒子边框之间创建一些看得到的空间。内边距是透明的，没有颜色和装饰。通过使用CSS，可以控制整个内容区周围内边距的宽度，甚至任意一边的宽度。

什么是边框

元素周围可以有一个可选的边框。这个边框会包围内边距，另外，因为它是围绕内容的一条线，这就从视觉上使内容与同一页面上的其他元素隔开。边框可以有各种不同的宽度、颜色和样式。

内边距将边框和内容区隔开。

什么是外边距

外边距也是可选的，包围着边框。利用外边距，可以在同一个页面上不同元素之间增加空间。如果两个盒子紧挨着，外边距就相当于它们之间的空间。类似内边距，外边距也是透明的，没有颜色和装饰。通过使用CSS，可以控制整个外边距的宽度，甚至任意一边的宽度。

内边距和外边距有何区别

外边距提供元素之间的间距，内边距是在内容周围增加额外的空间。如果有一个边框，内边距就在边框内部，外边距就在边框外部可以把内边距看作是元素的一部分，而外边距包围你的元素，将它与其他元素隔开。元素的背景颜色会延伸到内边距下面，但不会延伸到外边距。

---

水化学真是考的最烂的一门。

水力学加油！