盒子模型的内边距属性/外边距属性/计算盒子的宽与高

一、内边距属性：

为调整内容在盒子中的显示位置，可为元素栓之内边距（内填充），即为元素内容与边框之间的距离

1、内边距取值

设置方式与div的边框类似

padding-top:上边距;

padding-right:右边距;

padding-bottom:下边距;

padding-left:设置四周边距:

2、内边距其它的取值

内边距是复合属性示例代码：padding:5px 3px 4px/*设置上内边距为5px，左右内内边距为3px*,下内边距为4px*/

auto:自动（默认值）

相对于父元素或浏览加宽度的百分比

pdding:5%;/*段落内边距为父元素边框宽度的5%*/

注意：如果设置内外边界的属性为百分比，宽度岁父元素的wigdt变化，和高度height无关

二、外边距属性

通畅网页由多个盒子排列而成，可以通过外边距属性设置盒子与盒子之间的距离，外边距就是元素边框与相邻元素之间的距离

注意：和内边距不同，外边距margin允许取值为负数

1、定义外边距

margin-top;上外边距；

margin-right;右外边距；

margin-bottom:下外边距;

margin-left:左外边距；

margin：上下左右外边距；

2、块级元素水平居中：

当我们对块级元素设置width宽度，同时将左右的外边距设置为auto时，可以使其居中

margin:0 auto; /*实现水平居中*/

margin:5px auto /*实现水平居中，且上下拉开5px外边距*/

3、内外边距的清除的重要性

为了方便控制网页中的元素，制作网页是通常先清除元素的默认内外边距

*{

padding:0; /*清除内边距*/

margin:0;/*清除外边距*/

}

三、盒子的宽与高

每个盒子都有固定的大小wigth(宽度)height(高度)

Box {

width:300px; /*设置盒子的宽度*/

height:300px;/*设置盒子的高度*/

}

1、盒子宽度的解析

一个盒子的整体宽度``是由盒子的width和+左外边距+右外边距总和共同决定的。

一个盒子的整体高度``是由盒子的height和+上外边距+下外边距+上下边框宽度总和共同决定的。