CSS盒子模型

CSS盒子模型概述
CSS内边距
CSS边框
CSS外边距
CSS外边距合并

1，盒子模型的内容范围包括：

margin、border、padding、content部分组成。

CSS盒子模型-内边距

1，内边距：

内边距在content外，边框内。

2，内边距属性：

.html

<table>
<tr>
<td>内边距</td>
</tr>
</table>

.Css

td{
border: 1px solid red;
/*padding: 100px;*/
/*内边距*/
padding-left: 100px;
}

显示的效果：

CSS盒子模型-边框

1，CSS 边框

我们可以创建出效果出色的边框，并且可以应用于任何元素。

2，边框的样式：

border-style：定义了10个不同的非继承样式，包括none。

3，边框的单边样式；

border-top-style

border-left-style

border-right-style

border-bottom-style

4，边框的宽度：

border-width

5，边框单边的宽度；

border-top-width

border-left-width

border-right-width

border-bottom-width

6，边框的颜色

border-color

7，单边框的颜色；

border-top-color

border-left-color

border-right-color

border-bottom-color

1, CSS3边框

border-radius：圆角边框

box-shadow：边框阴影

border-image：边框图片

CSS盒子模型－外边距

1，外边距
围绕在内容边框的区域就是外边距，外边距默认为透明区域。
外边距接受任何长度单位、百分数值。
2，外边距常用的属性；

CSS盒子模型－外边距合并

1，外边距合并；
外边距合并就是一个叠加的概念。



注：合并的时候按照值大的来。大的包容小的。