盒子模型

认识盒子模型

每个矩形都有元素的内容、内边距（padding）、边框(border)、外边距(margin)组成。
（1）网页是有多个盒子嵌套排列的结果。
（2）内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中。
（3）外边距是该元素与相邻元素之间的距离，如果给元素定义边框属性，边框将出现在内边距和外边距之间。
（4）虽然盒子模型拥有内边距、边距、外边距、宽和高这些基本属性，但是并不要求每个元素都必须定义这些元素。

边框属性

设置内容	样式属性	常用属性值
上边框	border-top-style:样式；
	border -top-width:宽度；
	border-top-color:颜色；
	bordet-top:宽度 样式 颜色 ；
下边框	border-bottom-style:样式；
	border-bottom-width:宽度；
	border-bottom-color:颜色；
	border-bottom:宽度 样式 颜色；
左边框	border-left-style:样式；
	border-left-width:宽度；
	border-left-color:颜色；
	border-left:宽度 样式 颜色；
右边框	border-right-style:样式；
	border-right-width:宽度；
	border-right-color:颜色；
	border-right:宽度 样式 颜色；
样式综合设置	border-style:上边 [右边 下边 左边] ；	none(无）、solid 单实线、dashed 虚线、dotted 点线、double 双实线
宽度综合设置	border-width:上边 [右边 下边 左边] ；	像素值
颜色综合设置	border-color:上边 [右边 下边 左边] ；	颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
边框综合设置	border:四边宽度 四边样式 四边颜色；

1.使用border-style属性综合设置四边样式时，必须按上右下左的顺时针顺序，省略时采用值复制的原则，即一个值为四边，两个值为上下/左右，3个值为上/左右/下。
2. 使用border-width属性综合设置四边宽度时，必须按上右下左的顺时针顺序采用值复制的原则，即一个值为四边，两个值为上下/左右，3个值为上/左右/下。
3. 使用border-color属性综合设置四边颜色时，必须按顺时针顺序采用值复制的原则，即一个值为四边，两个值为上下/左右，3个值为上/左右/下。
设置边框颜色时同样必须设置边框样式，如果未设置样式或设置为none,则其他的边框属性无效。
4.当每一侧的边框都不同，或者只需要单独定义某一侧的边框时，可以使用单侧边框的综合设置属性border-top、border-bottom、border-left、或border-right。

内边距属性

（1）padding-top:上内边距。
（2）padding-right:右内边距。
（3）padding-bottom:下内边距。
（4）padding-left:左内边距。
（5）padding:上内边距[右内边距 下内边距 左内边距]
1.在上面的设置中，padding相关属性的取值可为auto自动（默认值）、不同单位的数值、相对于父元素（或浏览器）宽度的百分比%，实际工作中最常用的是像素值px，不允许使用负值。
2.同边框相关属性一样，使用复合属性padding定义内边距时，必须按顺时针顺序采用值复制的原则，即一个值为四边，两个值为上下/左右，3个值为上/左右/下。
3.如果设置内外边距为百分比，不论上下或左右的内外边距，都是相对于父元素宽度width的百分比，随父元素width的变化而变化，和高度height无关。

外边距属性

（1）margin-top:上内边距。
（2）margin-right:右内边距。
（3）margin-bottom:下内边距。
（4）margin-left:左内边距。
（5）margin:上内边距[右内边距 下内边距 左内边距]
margin相关属性的值，使复合属性margin取1~4个值的情况与padding相同。但是外边距可以使用负值，使相邻元素重叠。
当对块级元素应用宽度属性width，并将左右的外边距都设置为auto时，可使块级元素水平居中。
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

背景属性

1.设置背景颜色
使用background-color属性来设置，其属性值与文本颜色的取值一样，可使用预定义的颜色值、十六进制#RRGGBB或 RGB代码rgb(r,g,b)。background-color的默认值为transparant,即背景透明，这是子元素会显示其父元素的背景。
2.设置背景图像
将图像作为网页元素的背景， 通过background-image属性实现。
3.设置背景图像平铺
默认情况下，背景图像会自动向水平和竖直两个方向平铺，可以通过background-repeat属性来控制，
（1）repeat:沿水平和竖直两个方向平铺（默认值）。
（2）no-repeat:不平铺（图像位于元素的左上角，只显示一次）。
（3）repeat-x：只沿水平方向平铺。
（4）repeat-y:只沿竖直方向平铺。
4.设置背景图像的位置
background-position属性的值通常设置为两个，中间用空格隔开，用于定义背景图像在元素的水平和垂直方向的坐标，background-position属性的默值为“00”或“top left”即背景图像位于元素的左上角。
（1）使用不同单位（最常用的是像素px）的数值，直接设置图像左上角在元素中的坐标。
（2）使用预定义的关键字，指定背景图像在元素中的对齐方式，
水平方向值: left、center、right。
垂直方向值: top、center、bottom。
两个关键字的顺序任意，若只有一个值则另一个默认为center。例如：
center:相当于center center (居中显示）。
top:相当于top center或center top (水平居中、上对齐）。
(3)使用百分比：按背景图像和元素的指定点对齐
0% 0%:表示图像左上角与元素的左上角对齐。
50% 50%:表示图像50% 50%中心点与元素50%50%的中心点对齐
20% 30% :表示图像20% 30%的点与元素20% 30%的点对齐。
100% 100% :表示图像右下角与元素的右下角对齐，而不是图像充满元素
如果只有一个百分数，将作为水平值，垂直值则默认为50%。
5.设置背景图像固定
可以使用background-attachment属性来设置。
（1）scroll:图像随页面元素一起滚动（默认值）。
（2）fixed:图像固定在屏幕上，不随页面元素滚动。
6.综合设置元素的背景
语法格式：

background:背景色 url("图像）平铺 定位 固定；

盒子的宽与高

1.盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和。
2.盒子的总高度=height+上下内边距之和+上下边框宽度之和+上下外边距之和。
3.宽度属性width和高度属性height 仅适用于块级元素，对行内元素无效（< img/>标记和< input/>除外）。
4.计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。

元素的类型

1.块元素
特定：每个块元素通常都会独自占据一整行或多行，可以对其设置宽度、高度、对齐等属性，常用于网页结构的搭建。
常见的块元素有< h1>~< h6>、< p>、< div>、< ul>、< ol>、< li>等，其中< div>标记是最典型的块元素。
2.行内元素
也称内联元素或内嵌元素，
特点：它们不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
常见的行内元素有< strong>、< b>、< em>、< i>、< del>、< s>、< ins>、< u>、< a>、< span>等，其中< span>标记是最典型的行内元素。
3.在行内元素中有几个特殊的标记< img/>、< input/>、< td>，可以对它们设置宽高和对齐属性，有些资料称其为行内元素。

< div>与< span>标记

1.< div>标记
（1）< div>标记最大的意义在于和float配合，实现网页的布局，这就是常说的DIV+CSS网页布局。
（2）< div>可以替代块级元素如< h>、< p>等，但它们在语义上有一定的区别。例如< div>和< h>的不同在于，< h>具有特殊的含义，语义较重，代表着标题，而< div>是一个通用的块级元素，主要用于布局。
2.< span>标记
(1)< span>与< /span>之间只能包含文本和各种行内标记,如加粗标记< strong>、倾斜标记< em>等,< span>中还可以嵌套多层< span>。
(2)< span>标记常用于定义网页中某些特殊显示的文本,配台class属性使用

元素的转换

display属性常用的属性值及含义：
（1）inline：此元素将显示为行内元素(行内元素默认的display属性值）
（2）block:此元素将显示为块元素(块元素默认的display属性值）
（3）inline-block：此元素将显示为行内块元素，可以对其设置宽高和对齐属性，但是该元素不会独占一行。
（4）none:此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在。
（5）行内元素只可以定义左右外边距，定义上下外边距时无效。

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距 margin-top,则它们之间的垂直间距不是 margin- bottom与 margin-top之和,而
是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷).

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。