盒模型

目录

盒模型包括：

1.外边距margin

2.内边距padding

3.边框border

4.正常盒模型和ie盒模型（怪异盒模型）的区别：

---

盒模型包括：

（1）width (宽度)                      （2）height（高度）            （3）margin（外边距）

（4）padding（内边距）          （5）border（边框）

1.外边距margin

（1）定义：用来调整元素与元素之间的距离；

（2）<1>一个值：四个方向；

         <2>两个值：第一个值代表上下，第二个值代表左右；

         <3>三个值：第一个值代表上，第二个值代表左右，第三个值代表下；

         <4>四个值：上   右   下   左

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

（3）margin存在的问题：

         <1>上下两个元素同时设置margin-bottom和margin-top会叠压取最大值；

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

 (4)解决方式：

         <1>给父元素设置overflow：hidden；

         <2>使用padding代替margin；

         <3>在父元素使用border； 

代码：

并在body中写入：

运行结果：

2.内边距padding

（1）定义：调整元素内容距离元素边缘的距离；

（2）<1>一个值：四个方向；

         <2>两个值：第一个值代表上下，第二个值代表左右；

         <3>三个值：第一个值代表上，第二个值代表左右，第三个值代表下；

         <4>四个值：上   右   下   左

         注：设置padding会增加盒模型面积

代码：

并在body里写入 <div>孩子，该学习了</div>

结果：

3.边框border

（1）边框宽度：border-width

（2）边框颜色：border-color

（3）边框样式：border-style

         <1>实线：solid

         <2>点线：dotted

         <3>虚线：dashed

         <4>双实线：double

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

         注：设置padding会增加盒模型面积

代码：

 并在body里写入 <div></div>

结果：

4.正常盒模型和ie盒模型（怪异盒模型）的区别：

（1）正常盒模型设置padding和border会增大盒模型面积

（2）ie盒模型设置padding和border会挤压内容区 

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

代码：

并在body里写入 <div></div>

结果：