基础-04

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

2.padding属性 ：设定页面中一个元素内容到元素的边框之间的距离，也称补白用法。

1）用来调整内容(子元素)在容器（父元素）中的位置关系

2）用来调整子元素在父元素中的位置关系。 注：padding属性需要添加在父元素上。

3）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉添加的padding值大小。

Padding属性值的四种方式

四个值：上  右  下  左 {padding:10px 20px 30px 40px;}

三个值：上   左右   下 {padding:10px 20px 30px ;}

二个值：上下      左右 {padding:10px 20px ;}

一个值：四个方向 padding:2px;/*定义元素四周填充为2px*/

注意 ：padding不允许是负值。

3.margin ：在元素外边的空白区域，被称为边距。

属性值的4种方式： 

四个值：上 右 下 左         {margin:10px  2px  4px   3px  ;} 

三个值：上    左右    下    {margin:2px   4px   6px;} 

二个值：上下   左右         {margin:2px   4px;} 

一个值： 四个方向           {margin:2px;}

4.盒模型计算方式：

自身大小 content+padding+border

实际大小 content+padding+border+margin

5.border ：边框属性

border:border-width border-style border-color

例如 ：border ：1px   solid   white(线宽1像素，实线 ，白色）

border-style：solid 实线  dashed：虚线  double ：双线

border ：none/0  去除边框