盒子模型

一、盒子模型的5个基本元素：宽、高、边框、内边距、外边距

1. 盒子模型的基本元素：
            margin  外边距      围绕在元素边框border的红棕色区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就                          是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。margin 属性接受任何长度单位，可以是像素、英寸、毫米                            或 em。

            padding 内边距     是元素边框border到内容content之间的距离，是边框和元素内容之间的间隔距离 。控制该区域最简单的属性是                                          padding 属性。这个属性接受任何长度单位、百分数值甚至负值。margin 属性接受任何长度单位，可以是像素、英寸、                                            毫米或 em。

            border   边框          元素的边框是围绕元素内容的内边距的已调配或多条线。border属性允许规定元素边框的样式、宽度和颜色。

            width     宽度      内容区域的宽度

            height    高度    内容区域的高度

2. margin/padding的属性值： 

    eg :  margin：（20px;）

            1个：上下左右都是该值 

            margin：（20px; 30px）

            2个：前者表示上下的值，后者表示左右的值 

            margin：（20px; 30px; 40px;）

            3个：前者表示上边的值，中间表示左右的值，后者表示下边的值 

             margin：（20px; 30px; 20px; 30px;）

            4个：上右下左，顺时针排序 

3.border的属性值：

   eg :  border ：1px solid red  (宽度为1px的红色实线边框样式)

           border-width   边框宽度 
           border-color    边框颜色 
           border-style    边框样式 
           边框样式属性值：     none         无样式 
                                             dotted       点线 
                                             dashed      虚线 
                                             solid          实线 
                                             double       双线 
                                             groove       槽线 
                                             ridge         脊线 
                                             inset          内凹 

                                             outset        外凸 

二、关于内外边距（margin、padding）填充和边框的常见问题：

1. 一部分的html元素的盒子属性（margin、padding）默认值为0；例如：div、span等

   还有一部分的html元素的盒子属性（margin、padding）有默认的值；例如：body、p、ul、li、form等

2. 设置一个块元素水平居中：margin：0 auto ; →第一个参数表示上下边距为0，第二个参数表示左右边距居中等分；

3. margin可以设置负值，而padding则不可以设置负值；

4. 行内元素的margin值，只有左右值，没有上下值（设置上下值无效）；而padding值上下左右都有效，会撑大空间；