前端【盒模型】基础

学习目标：

• 1.内边距padding
• 2.边框border
• 3.外边距margin
• 4.盒模型介绍：

---

学习内容：

一、内边距padding

       1.padding:调整元素内容距离元素边缘的距离

                        设置padding增加了盒模型面积

        2.

padding 不同值的属性：

一个值：	四个方向
俩个值：	第一个值代表上下 第二值代表左右
三个值：	第一个值代表上 第二个值代表左右 第三个值代表下
四个值：	上 右 下 左

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

---

二、边框border

       1.border：边框宽度(border-width) 边框颜色(border-color)

          边框样式(border-style solid：实线  dotted:点线  dashed:虚线  double:双实线)

       2.border: 也会增大盒模型的面积

                       还可分方向设置

       3.标签名{ } 权重是1

       4.圆角度   border-radius: 50%；

       5. class选择器.class名{ } 权重10

       6. transparent透明色

       7.单行文本垂直居中：text-align:center     line-height:父元素高度

          设置文本水平对齐方式 center:水平居中  left:左对齐  right:右对齐

       8.color:设置字体颜色

---

三、外边距margin

       1.margin:用来调整元素之间的距离

       2.

margin不同值的属性：

一个值：	四个方向
俩个值：	第一个值代表上下 第二值代表左右
三个值：	第一个代表上 第二个值代表左右 第三个代表下
四个值：	上 右 下 左

        3.margin存在问题:

     问题1：上下俩个元素同时设置 margin-bottom和margin-top会叠压取最大值

     问题2：第一个子元素的margin-top会传递给父元素.

     解决方式:

                 1.使用padding代替margin

                 2.给父元素设置overflow:hidden

---

四、盒模型介绍：

       1．盒模型内容：包括 width+height+padding(内边距)+margin(外边距)+border(边框)

五、正常盒模型和IE盒模型（怪异盒模型）区别：

      1. 正常盒模型设置padding和border会增大内容区

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

      2.如何把正常盒模型变成IE盒模型 box-sizing:border-box