盒子模型的组成及其相关属性
一、盒子模型的组成
二、盒子模型的组成属性
1、边框属性(border)
⑴边框属性样式(border-style)
属性值
none：没有边框
solid：边框为单实线
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
综合设置四边样式时，必须按上右下左的顺时针顺序，省略时采用值复制的原则，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。
分开写，即
border-top-style 上边框样式
border-bottom-style 下边框样式
border-left-style 左边框样式
border-right-style 右边框样式
⑵边框宽度(border-width)
综合设置四边宽度必须按上右下左的顺时针顺序采用值复制，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。
分开写，即
borer-top-width 上边框宽度
borer-right-width 右边框宽度
borer-bottom-width 下边框宽度
borer-left-width 左边框宽度
⑶边框颜色(border-color)
综合设置四边颜色必须按上右下左顺时针顺序采用值复制，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。
边框的默认颜色为元素本身的文本颜色，对于没有文本的元素，例如只包含图像的表格，其默认边框颜色为父元素的文本颜色。
分开写，即
border-top-color 上边框颜色
border-right-color 右边框颜色
border-bottom-color 下边框颜色
border-left-color 左边框颜色
2、内边距属性(padding)
综合设置四边内边距必须按上右下左顺时针顺序采用值复制，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。
auto自动（默认值) 最常用px，不允许使用负值。
分开写，即
padding-top 上边距
padding-right 右边距
padding-bottom 下边距
padding-left 左边距
3、外边距属性(margin)
综合设置四边外边距必须按上右下左顺时针顺序采用值复制，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。
可以使用负值，让相邻元素重叠
margin-top 上边距
margin-right 右边距
margin-bottom 下边距
margin-left 上边距
4、背景属性
⑴背景颜色(background-color)
默认值 transparent 透明
⑵背景图像(background-image)
①背景图像平铺
属性值
repeat 沿水平和竖直两个方向平铺（默认值）
no-repeat 不平铺（图像位于元素的左上角，只显示一次）
repeat-x 只沿水平方向平铺
repeat-y 只沿竖直方向平铺
②背景图像位置(background-position)
background-position属性的值通常设置为两个，中间用空格隔开，用于定义背景图像在元素的水平和垂直方向的坐标
属性值
使用不同单位（最常用的是像素px）的数值：直接设置图像左上角在元素中的坐标
使用预定义的关键字：指定背景图像在元素中的对齐方式。
水平方向值：left、center、right。
垂直方向值：top、center、bottom。
使用百分比：按背景图像和元素的指定点对齐。
0% 0% 表示图像左上角与元素的左上角对齐。
50% 50% 表示图像50% 50%中心点与元素50% 50%的中心点对齐。
20% 30% 表示图像20% 30%的点与元素20% 30%的点对齐。
100% 100% 表示图像右下角与元素的右下角对齐，而不是图像充满元素。
③背景图像固定(background-attachment)
属性值
scroll 图像随页面元素一起滚动（默认值）
fixed 图像固定在屏幕上，不随页面元素滚动
三、盒子宽度和高度及元素类型转换
1、盒子总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和
2、盒子总高度=height+上下内边距之和+上下边框宽度之和+上下外边距之和
3、元素类型转换(display)
行内元素转换为块级元素 display:block
块级元素转换为行内元素 display:inline
行内块元素 display:inline-block
此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。
四、盒子外边距合并
1、在普通文档流(没有对元素应用浮动和定位)中，当两个相邻或嵌套的块元素相遇时其垂直方向的外边距会自动合并
⑴相邻元素垂直外边距的合并
两个块元素上面的下外边距margin-bottom与下面的上外边距margin-top之间的垂直间距为两者中较大者
⑵ 嵌套块元素垂直外边距的合并
如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
可以通过以下两种方法解决这个问题：
①给父盒子加边框（border)
border:1px solid #F00; /*定义父div的上边框*/
②给父盒子样式加overflow:hidden
overflow:hidden; /*定义父div的overflow属性*/
～边框复合属性背景颜色
样式：
内容：
～盒子背景的复合属性
样式：
a {
display: block;
width: 800px;
height: 500px;
background: url(daytoy.jpg) no-repeat;
｝
a:hover {
background-position: right top;
}
内容：
～盒子模型综合属性
样式：
body,div,h2,ul,li {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.box {
width: 300px;
height: 250px;
border: 1px solid #ccc;
border-top: 3px solid #f6b7bb;
margin: 50px;
}
.box h2 {
height: 40px;
font-size: 14px;
line-height: 40px;
border-bottom: 1px solid #add2f4;
padding-left: 20px;
}
.box ul {
margin-left: 20px;
}
.box ul li {
margin: 15px 0;
}
.box ul a {
font-size: 12px;
color: #000;
text-decoration: none;
}
.box ul a:hover {
color: purple;
text-decoration: underline;
/*文字颜色正常是黑色，鼠标经过时会变成紫色且有下划线*/
}
内容：