盒模型(box model),就是CSS看待元素的一种方式,将每个元素看作一个盒子表示。利用CSS,可以对盒子的所有方面加以控制:内容周围内边距的大小、元素是否有边框(什么类型的边框,以及边框的大小),另外元素之间有多大的外边距。
- CSS使用一个盒模型来控制元素如何显示。
- 盒子由内容区和可选的内边距、边框和外边距组成。
- 内容区包含元素的内容。
- 内边距用来在内容区周围创建可见的空间。
- 边框包围内边距和内容,它提供了从视觉上分离内容的一种手段。
- 外边框包围边框、内边距和内容,允许在元素和其他元素之间增加空间。
- 内边距、边框和外边距都是可选的。
- 元素的背景会在内容和内边距下显示,但不会延伸到外边距下面。
- 内边距和外边距大小可以用像素或百分数设置。
- 边框宽度可以用像素设置,也就可以使用关键字thin、medium和thick来指定。
- 有8种不同的边框样式,包括实线、破折线、虚线和脊线。
- 对于外边距、内边距或边框,CSS提供了相应的属性,可以一次对所有四个边(上、右、下、左)完成设置,也可以单独设置任意一边。
- 使用border-radius属性可以对有边框的元素创建圆角。
- 使用line-height属性可以增加文本行之间的间距。
- 可以用background-image属性在元素的背景上放置图像。
- 使用background-position和background-repeat属性可以设置背景图像的位置和平铺行为。
- 对于希望成组指定样式的元素要使用class属性。
- 使用id属性为元素指定一个唯一的名字。还可以使用id属性为元素提供唯一的样式。
- 一个页面上有给定id的元素只能有一个。
- 可以使用id选择器按id选择元素,例如#myfavoriteid。
- 一个元素只能有一个id,不过它可以属于多个类。
- 在HTML中可以使用多个样式表。
- 如果两个样式表包含冲突的属性定义,HTML文件中最后链接的样式表最为优先。
- 可以在<link>元素中使用媒体查询或者使用CSS中的@media规则来指定设备。