5.0、css盒子模型

盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

使用

标记

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

盒子模型是css的基石，规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型

1.margin外边距

主要迎来调节盒子的位置

2.padding内边距

是用来调节盒子里面的内容和盒子的距离，所以会使盒子撑大（使用text-indent时不会撑大盒子）

3.border边框

border：10px solider(实线)/dotted(点线)、dashed(虚线) red
注意：padding不能写负值，margin可以写负值

用法：

(1）用来调整内容在容器中的位置关系
(2）用来调整子元素在父元素中的位置关系。 注：padding属性需要添加在父元素上。
(3）padding值是额外加在元素原有大小之上的，
如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值

盒子的实际大小

宽 =左右margin+左右border+左右padding+width，
高 =上下margin+上下border+上下padding+height

属性值的4种方式：

四个值：上 右 下 左 {padding:0px 0px 0px 40px;}
三个值：上 左右 下 {padding:10px 20px 30px ;}
二个值：上下 左右 {padding:10px 20px ;}
一个值：四个方向 padding:2px;/定义元素四周填充为2px/
注意：宽度属性和高度属性仅适用于块级元素，对行内元素无效(除外)