<HeadFirst_HTML与CSS> O'REILLY_Chap.9_盒模型

<HeadFirst_HTML与CSS> O’REILLY_Chap.9_盒模型

本博客的FollowMeReading系列初衷是在线的读书笔记. 为方便后期查阅, 故写成博客形式, 使用关键字查询便可以快读的找到相关的内容.

FollowMeReading系列所选的书籍一般选自O’REILLY或Apress出版社, 尽量保证笔记内容的权威性.

FollowMeReading系列的博客标题格式为: <书名> 出版社章节数章节名, 方便大家在纸质版书籍中查找.

FollowMeReading系列博文中的内容大部分是原文, 非原文部分前面将有’博主’字样提醒.

感谢<HeadFirst_HTML与CSS>作者 Eric Freeman & Elisabeth Robson
感谢<HeadFirst_HTML与CSS>翻译 徐阳 丁小峰

本博客由@scott编写. 若转载此文章, 请注明出处和作者

正文

原文

BULLTE POINTS(要点):

• CSS使用一个盒模型来控制元素如何显示.

• 盒子有内容区和可选的内边距, 边框和外边距组成.

• 内容区包括元素的内容.

• 内边距用来在内容区周围创建可见的空间.

• 边框包围内边距和内容, 它提供了从视觉上分离内容的一种手段.

• 外边距包围边框, 内边距和内容, 允许在元素和其他元素之间增加空间.

• 内边距, 边框和外边距都是可选的.

• 元素的背景会在内容和内边距下显示, 但不会延伸大外边距下面.

• 内边距和外边距大小可以用像素或百分数设置.

• 边框宽度可以用像素设置, 也可以使用关键字 thin, medium, thick 来指定.

• 有8种不同的边框样式, 包括实现, 破折线, 虚线和脊线.

• 对于外边距, 内边距或边框, CSS提供了相应的属性, 可以一次对所有四个边(上,右,下,左)完成设置, 也可以单独设置任意一边.

• 使用 border-radius 属性可以对有边框的元素创建圆角.

• 使用 line-height 属相可以增加文本行之间的间距.

• 可以用 background-image 属性在元素的背景上放置图像.

• 使用 background-postion 和 background-repeat 属性可以设置背景图像的位置和平铺行为.

• 对于希望成组指定样式的元素要使用 class 属性.

• 使用 id 属性为元素指定一个唯一的名字. 还可以使用 id 属性为元素提供唯一的样式.

• 一个页面上有给定 id 的元素只能有一个.

• 可以使用 id 选择器按 id 选择元素. 例如 #myfavoriteid.

• 一个元素只能有一个id, 不过它可以属于多个类.

• 在HTML中可以使用多个样式表.

• 如果两个样式表包含冲突的属性定义, HTML文件中最后链接的样式表最为优先.

• 可以在 <link> 元素中使用媒体查询或者使用CSS中的 @media 规则来指定设备.