盒子模型的组成及其相关属性

一、盒子模型的组成二、盒子模型的组成属性1、边框属性(border)⑴边框属性样式(border-style)属性值none：没有边框solid：边框为单实线dashed：边框为虚线dotted：边框为点线double：边框为双实线综合设置四边样式时，必须按上右下左的顺时针顺序，省略时采用值复制的原则，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。分开写，即border-top-sty

Doraemondaytoy

5161人浏览 · 2022-08-03 19:55:56

Doraemondaytoy · 2022-08-03 19:55:56 发布

一、盒子模型的组成

二、盒子模型的组成属性

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属性*/

～边框复合属性背景颜色

样式：

.topNav {

height: 40px;

width: 300px;

border-top: 4px solid #fab4da;

border-bottom: 4px dashed #95e7f6;

background-color: #b6f0c3;

}

.topNav a {

color: #4C4C4C;

text-decoration: none;

font-size: 14px;

}

</style>

内容：

</div>

～盒子背景的复合属性

样式：

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;

/*文字颜色正常是黑色，鼠标经过时会变成紫色且有下划线*/

}

内容：

<div class="box">
<h2>大标题</h2>
<ul>
<li><a href="#">第一行文字</a></li>
<li><a href="#">第二行文字</a></li>
<li><a href="#">第三行文字</a></li>
<li><a href="#">第四行文字</a></li>
<li><a href="#">第五行文字</a></li>
</ul>

</div>