CSS中盒子模型

1.概念

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

 

2. padding属性

Padding(内边距)是设定页面中一个元素内容到元素的边框之间的距离。 也称补白

用法：

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

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

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

Padding属性值的四种方式：

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

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

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

• 一个值：四个方向 padding:2px;

可单独设置某一方向填充

• 上方向padding-top:10px;

• 右方向padding-right:10px;

• 下方向padding-bottom:10px;

• 左方向padding-left:10px;

Tip: padding值不允许是负值

3. margin属性

margin(外边距),在元素外边的空白区域，被称为外边距

• 常规相邻元素如果外边距触碰上下外边距会重合取较大值，左右边距会叠加，例

//盒子1
margin-bottom:50px;
​
//盒子2
margin-top:100px;
​
//这2个元素直接边距为100px

• 浮动元素如果外边距触碰上下外边距会叠加，左右边距会叠加，例

//盒子1
float:left;
margin-bottom:50px;
​
//盒子2
float:left;
margin-top:100px;
​
//这2个元素直接边距为150px

属性值的4种方式：

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

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

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

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

可单独设置某一方向填充

margin-top:10px;     //设置上边距
margin-right:10px;     //设置右边距
margin-bottom:10px;      //设置下边距
margin-left:10px;       //设置左边距

4.盒子大小的计算

4.1盒子宽度的计算

 盒子实际占有宽度区域：

margin-left + border-left + padding-left+width+padding-right+border-right+margin-right

4.2盒子高度的计算

 盒子实际占有高度的区域：

margin-top + border-top + padding-top + height + padding-bottom+ border-bottom + margin-bottom