CSS---盒子模型

盒子模型由内容区、边框和边距组成；

1.内容区

width

height

2.边框（border）

border不仅可以给盒子模型加，还可以给html所有标签加边框属性；

①上边框

border-top-color:red; --- 上边框的颜色；

border-top-style:solid; --- 上边框的线型，solid（实线），dashed（虚线），dotted（点状线）；

border-top-width:2px; --- 上边框线的宽度；

上边框线简写：border -top:2px solid blue; --- 表示 上边框线为2px宽的蓝色实线；

②右边框，border-right

③下边框，border-bottom

④左边框,border-left

注意：四条边框线属性一致的写法：border:2px solid blue;

3.边距

边距分为内边距和外边距；

①内边距（padding）

内边距指内容与边框之间的距离；

 padding-top:10px; --- 内容与上边框之间的距离；

 padding-right:10px; --- 内容与右边框之间的距离；

 padding-bottom:10px; --- 内容与下边框之间的距离；

 padding-left:10px; --- 内容与左边框之间的距离；

边距简写：

padding:10px 10px 10px 10px; --- 设置内容距离上右下左边框的距离；

padding:10px 20px 30px; --- 内容距离上边框10px，距左右边框20px，距下边框30px；

padding:10px; --- 设置内容距离上右下左边框10px；

②外边距（margin）

外边距是指盒子与盒子之间的距离，也可以说是边框往外的距离；

margin-top:10px; ---  上边框往外的距离；

margin-left:10px; ---  右边框往外的距离；

margin-bottom:10px; ---  下边框往外的距离；

margin-right:10px; ---  左边框往外的距离；

外边距简写：

margin:10px 10px 10px 10px; --- 设置上右下左边框往外的距离；

margin:10px 20px 30px; --- 上边框往外10px，左右边框往外20px，下边框往外30px；

margin:10px; --- 设置上右下左边框往外10px；

注意：

①如果是正常的文档流，且两个盒子的位置是上下的结构，那么它们之间的margin-top和margin-bottom是由属性值最大的那个决定的，例：

<div style="margin-bottom:40px"></div>
<div style="margin-top:10px"></div>

两个盒子的上下外边距是40px；

②如果两个盒子的位置是左右结构，那么它们之间的外边距是margin-right和margin-left的和值；

③如果设置了浮动，就不属于正常的文档流；

4.内容溢出

内容溢出是指，当盒子里的内容超出了盒子的宽和高，该如何显示；

overflow:hidden; --- 盒子的内容溢出不显示；

overflow:auto; --- 如果盒子的内容溢出，就会在盒子里出现滚动条；

overflow:scroll; --- 无论盒子是否能装的下内容，都会出现滚动条；