CSS盒子模型

盒子模型

HTML元素可以看作盒子，用于CSS设计与布局，包括边距(margin)、边框（border）、填充（padding）、内容（content）。

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

边框Border

属性：
border-style 定义边框样式：

/**/
border-style：none  /*默认无边框*/
			  dotted  /*定义一个点线边框*/
			  dashed  /*虚线边框*/
			  solid  /*实线边框*/		  

我们可以单独设置各边，border-style属性可以有多个值：

1. 四面边框都是一样的值

border-style:dotted;

2. 上下 左右

border-style:dotted solid;

3. 上 左右 下

border-style:dotted solid double;

4. 上 右 下 左 （顺时针）

border-style:dotted solid double dashed;

border-width 边框指定宽度

/*三种表示方式*/
border-width:2px
			 0.1em
			 thick/medium(默认)/thin

border-color设置边框的颜色

border-color：red   /*指定颜色的名字*/
			  rgb(255,255,255)    /*使用RGB值*/
			  Hex   /*十六进制值*/

可以在border属性中简写上述属性：

border:border-width border-style border-color;

外边距Margin

Margin可以使用负值，重叠的内容。
指定不同的边距：

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

同样，margin属性也有多个值：

1. 四面边框都是一样的值

margin:25px;

2. 上下 左右

margin:25px 50px;

3. 上 左右 下

margin:25px 50px 75px;

4. 上 右 下 左 （顺时针）

margin:25px 50px 75px 100px;

填充Padding

指边框和内容之间的空间。

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

padding的多种属性值同上。