盒模型

目录

一、padding:

二、margin：

三、border：

---

盒模型包括：width,height,padding,margin,border

一、padding:

1、padding：调整元素内容距离元素边缘的距离（注意：设置padding会增大盒模型的面积）

2、padding:10px;   设置一个值：代表上下左右四个方向。

     padding:10px   5px;   设置两个值：第一个值代表上下，第二个值代表左右。

     padding:10px   5px   4px;   第一个值代表上，第二个值代表左右，第三个之代表下。

     padding:10px   5px   4px   3px;   第一个值代表上，第二个值代表右，第三个值代表下，第四个       值代表左。

3、还可以分方向设置：padding-left、padding-top、padding-right、padding-bottom。

二、margin：

1、margin：用来调整元素之间的距离

2、 margin:10px;设置一个值：代表上下左右四个方向。

      margin:10px   5px;设置两个值：第一个值代表上下，第二个值代表左右。

      margin:10px   5px   4px;第一个值代表上，第二个值代表左右，第三个之代表下。

      margin:10px   5px   4px   3px;第一个值代表上，第二个值代表右，第三个值代表下，第四个值        代表左。

3、还可以分方向设置：margin-left、margin-top、margin-right、margin-bottom。

4、margin存在的问题：1、上下两个元素同时设置margin-bottom和margin-top会叠压取最大值

                                2、第一个子元素的margin-top会传递给父元素

     解决方法：1、给父元素设置overflow：hidden
                       2、使用padding代替margin
                       3、在父元素使用border

三、border：

1、注意：设置border会增大盒模型面积

2、border:1px   solid   skyblue;（边框宽度   边框样式(solid实线、dotted点线、dashed虚线、  double双实线)   边框颜色）

3、可分开设置：border-width、border-color、border-style

4、border-radius（设置边框圆角度）

四、正常盒模型和ie盒模型

1、区别：正常盒模型设置padding和border会增大盒模型面积。

                ie盒模型设置padding和border会挤压内容区。

2、正常盒模型变成ie盒模型语句：box-sizing:border-box;