前端基础—盒模型概述

一、什么是盒模型

       每一个标签都是一个矩形，像一个盒子，所以HTML页面的布局可以理解为多个盒子组合嵌套排列而成。

二、盒模型的组成

1、width 宽度

2、height 高度

3、padding内边距

（1）1~4个值

（2）顺时针赋值，从上开始

（3）会增加盒模型的面积

4、border 边框

（1）复合属性 边框：线宽 线型 线色

         border-width: 10px;

         border-style: solid; solid: 实线 dashed: 虚线 dotted: 点线 double: 双线

         border-color: orange;

（2）会增加盒模型的面积

（3）border-radius 圆角

（4）三角形：使宽高等于0

5、margin 外边距

（1）1~4个值

（2）顺时针赋值，从上开始

注意：1、叠压现象：常态下，兄弟标签间的上下间距以大值为准

           2、塌陷问题：

                 原因：常态下，父级的第一个子级标签是个块标 签，并且使用了margin或者margin-top

                 解决方案:（1）在父级使用border
                                （2）不使用margin-top,在父级使用padding-top
                                （3）在父级使用overflow: hidden

三、怪异盒模型

       正常盒模型向外扩展，怪异盒模型向内压缩