CSS 笔记（5）

1：CSS框模型概述

CSS模型（Box Model）规定了元素框处理元素内容、内边距、边框和外边距的方式。

1：CSS 框模型概述

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边距是边框。边框以外是外边距，外边距默认是透明的。背景应用于由内容和内边距、边框组成的区域。内边距、边框、外边距都是可选的，默认值是零，但是，许多元素将由用户代理样式表设置内边距和外边距。可以通过将元素的margin和padding设置为零来覆盖这些浏览器样式。

在CSS中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

2：CSS 内边距

元素的内边距在边框和内容区之间。控制该区域最简单的属性是padding属性。

CSS padding属性定义元素边框与元素内容之间的空白区域。

1：CSS padding属性

CSS padding属性定义元素的内边距。padding属性接受长度值或百分比值，但不允许使用负值。

h1 {padding: 10px;} 

还可以按照上、右、下、左的顺序分别设置各边的内边距。

h1 {padding : 1px,2px,3px,4px;}

2:单边内边距属性

也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：（1）padding-top；（2）padding-right；（3）padding-bottom；（4）padding-left。

3：CSS边框

元素的边框是围绕元素内容和内边框的一条或多条线。CSS border属性允许你规定元素边框样式、宽度、颜色。

1：CSS边框

在HTML中，我们使用表格来创建文本周围的边框，但是通过使用CSS边框属性，我们可以创建出效果出色的边框，并且可以应用于任何元素。

元素外边距内就是元素的边框。元素的边框就是围绕元素内容和内边距的一条或多条线。每个边框有3个方面：宽度、样式以及颜色。

2：边框的样式

样式是边框最重要的一个方面，这不是因为样式控制着边框的显示，而是因为如果没有样式，将根本没有边框。

定义多种样式：p.aside {border-style: solid dotted dashed double;}  表示实线上边框、点线右边框、虚线下边框和双线左边框。

定义单边样式：（1）border-top-style；（2）border-right-style；（3）border-bottom-style；（4）border-left-style。

3：边框的宽度

可以通过border-width属性为边框指定宽度。

定义单边宽度：（1）border-top-width；（2）border-right-width；（3）border-bottom-width；（4）border-left-width。

当border-style设置成none时，边框将不显示，其宽度将变成0。

4：边框的颜色

设置边框的颜色非常简单。CSS使用一个简单的border-color属性。他可以一次接受最多4个值。

定义单边颜色：（1）border-top-color；（2）border-right-color；（3）border-bottom-color；（4）border-left-color。

透明边框：CSS2引入了边框颜色值transparent，这个值用于创建有宽度的不可见边框。

4：CSS外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的区域。设置外边距的最简单的方法就是使用margin属性，这个属性接受任何长度单位、百分数值甚至负值。

1：单边外边距属性

（1）：margin-top；（2）margin-right；（3）margin-bottom；（4）margin-left。

5：外边距合并

 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

1：外边距合并

外边距合并是一个相当简单的概念。但是，在实践中对网页进行布局时，他会造成许多混淆。简单的说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大一个。