4.2盒子模型

·边框

1.所有边框宽度

语法：border-width:medium | thin | thick | length

2.边框样式

语法:border-style:none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset |

解释：

None：无边框

Dotted：边框为点线

Dashed：边框为长线

Solid：边框为实线

Double：边框为双实线

Groove：3d凹槽

Ridge：菱形边框

1.边框颜色

语法：Border-color:color

2.上边框宽度

语法：border-top:border-width || border-style || border-color

3.右边框宽度

语法：border-right:border-width || border-style || border-color

4.下边框宽度

语法：border-bottom:border-width || border-style || border-color

5.左边框宽度

语法：border-left:border-width || border-style || border-color

·内边距

与外边距相似,不同的是外边距可以设置负值，而内边距不行

内边距也包含了四项属性，分别为

padding-top、

padding-right、

padding-bottom、

padding-left

·盒模型的宽度与高度

1.宽度

盒模型宽度=左外边距+左边框+上内边框+内容宽度+右内边距+右边框+右外边框

2.高度

盒模型高度=上外边框+上边框+上内边框+内容高度+下内边框+下边框+下外边框

·外边框的叠加

3.两个元素垂直相遇时的叠加

当两个元素垂直相遇时，第一个元素的下边距与第二个元素的上边距会发生叠加合并，合并后的高度等于两个元素中的较大者

4.两个元素包含时叠加

假设两个元素没有内边框和边框，且一个元素包含另一个元素，他们的上外边框或下外边框也会发生叠加。

·默认样式

浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的元素都设置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。

清除代码为：

*{

margin: 0;

padding: 0;

}