CSS3基础语法与盒模型（四）盒模型

一、盒模型的定义

1.所有HTML标签都可以看成矩形盒子，由width，height，padding，border构成，称为盒模型。

2.width和height:代表内容的宽度和高度。

width height不是盒子总宽高。

盒子的总宽度=width+ 左右/上下padding（内边距）+ 左右/上下border（边框）

3.背景颜色是配置在整个盒子之上的，包括内容、内边距和边框。如果将边框颜色添加透明度就可以看到背景色透出来的样子。

<div class="box1">【盒子总宽为340px、高度为240px】

.box1{

    width:300px;

    height:200px;

    background-color:gold;

    /*边框，快捷键bd*/

    border：10px solid red;

    /*内边距*/

    padding:10px;

}
</div>

CSS样式表中，!important可调整样式规则的优先级。加了!important的样式优先级最高