什么是盒子模型？

一. 盒子模型的基础知识

         1. 盒子模型的概念：  

                ① 盒子模型是CSS中的一个重要概念，是css技术所使用的一种思维模型，在css布局中，html中的每个元素在浏览器中的解析都可以被看作一个盒子，拥有盒子一样的外形和平面空间，若将网页设计中的内容元素视为矩形盒子，每个矩形盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分组成，对于一个标签来说，他的边框、内边距、内容属于可视区域，外边距属于非可视区域。

                ② 内容指的是盒子中的实际内容，如文字、图片等；内边距是内容与边框之间的空间；边框是盒子的外部轮廓；外边距是盒子与其他元素之间的空间。盒子模型允许设计师通过定义这些部分的尺寸来精确控制元素的布局和外观。

                ③ 除去内容部分，其余每个部分又分别包含上、下、左、右4个方向，方向既可以分别定义也可以统一定义。

        2. 盒子模型示意图：

        3.  盒子模型实际所占大小：宽度或高度+padding+border+margin。

二. 各元素的设置含义

        1. content（内容）

                ① background-color（背景颜色）：

                        此属性用于设定内容的背景颜色，不会对其它要素造成影响

                ② width（宽）和height（高）：

                        不加修饰的宽度和高度仅对内容生效，不会对其它要素造成影响，会对盒子大小造成影响（相当于在修改盒子的肚子大小）

        2. margin（外边距）

                ① 独立设置某一个方向：
                            上外边距：margin-top ；
                            下外边距：margin-bottom ；
                            左外边距：margin-left ；
                            右外边距：margin-right 。

                ② 简写（参数同时设置时，用空格隔开）：    
                            一个参数时（四个方向全设置）：margin: 10px;
                                    上右下左四个方向都是10px的外边距 ，

                            两个参数时（方向 上下 左右）：margin: 10px 20px;
                                    上下10px,左右20px ，

                           三个参数时（方向 上 左右 下）：margin：10px 20px 30px;
                                    上10px, 左右20px, 下30px ，

                           四个参数时（方向 上 右 下 左）：margin: 10px 20px 30px 40px;
                                    上10px, 右20px, 下30px, 左40px 。

                ③ 值的设置：外边距的值可以是正值，也可以是负值，可以是像素值（单位：px），也可以是百分比值，如果设置的是百分比值（单位：%），不管设置的是什么方向的外边距，永远参考的是父容器的宽度。

                ④ 关于margin的一些注意事项：
                            - margin在垂直方向会有叠加的效果，以最大值为准 ；
                            - 行属性标签直接设置margin时，横向起作用，竖向无效 ；
                            - 某些情况下，子元素的margin-top会带动父元素移动 。
                ★ 原因：一个盒子如果没有上补白或上边框，那么它的上边距应该和其文档流中的第一个子元素的上边距重叠 。
                ★ 解决办法：
                    （1）设置上补白（上padding）
                                注意：父容器设置完padding之后，那么，父容器的大小发生了变化
                                              (可以通过给content减去1px、给父容器设置box-sizing)
                    （2）设置上边框（上border）
                                注意：父容器设置完padding之后，那么，父容器的大小发生了变化
                                              (可以通过给content减去1px、给父容器设置box-sizing)
                    （3）设置overflow:hidden；
                                注意：overflow:hidden的作用是当元素内的内容溢出的时候使它隐藏溢出的部分，即超出部分隐藏，相较于之前的解决办法不会改变父容器的大小，但是，你一定要注意一个事情，如果你的父级中有一下需要超出父元素显示的特效，那么，这些超出的内容是无法显示的。

 除此之外，overflowhidden的作用还有：

        ☆ 一般情况下，在页面中，一般溢出后会显示省略号，比如，当一行文本超出固定宽度就隐藏超出的内容显示省略号。

        ☆ overflow:hidden 清除浮动：一般而言，父级元素不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0；

        ☆ overflow:hidden 解决外边距塌陷：父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷。

                ⑤ 使用margin完成居中效果：

                        使用margin让一个块级标签在他的父容器中居中（margin: 值 auto;）

        3. padding（内边距）

                ① 独立设置某一个方向
                        padding-top:
                        padding-bottom:
                        padding-left:
                        padding-right:

                ② 简写：  

                        padding: 10px;
                                    上右下左四个方向都是10px的内边距

                        padding: 10px 20px;
                                    上下10px,左右20px

                        padding 20px 30px;
                                    上10px, 左右20px, 下30px

                        padding: 10px 20px 30px 40px;
                                    上10px, 右20px, 下30px, 左40px    
                ③ 注意事项
                              padding会改变盒子的可视大小

                ④ 关于padding的一个使用小技巧
                            在容器高度不确定的情况下，可以通过padding实现内容的居中效果。

4. border（边框）

                ① 简写
                    ☆ border: 边框的粗细 边框的样式 边框的颜色;（三个条件之间加空格）
                    ☆ 边框粗细: 直接写值（单位：px）
                    ☆ ​​​​​​​边框样式:
                                dotted- 定义点线边框
                                dashed  - 定义虚线边框
                                solid - 定义实线边框 ★
                                double - 定义双边框
                                groove - 定义 3D 坡口边框。效果取决于 border-color 值
                                ridge - 定义 3D 脊线边框。效果取决于 border-color 值
                                inset - 定义 3D inset 边框。效果取决于 border-color 值
                                outset - 定义 3D outset 边框。效果取决于 border-color 值
                                none - 定义无边框
                                hidden - 定义隐藏边框
                    ☆ 边框颜色: HEX颜色，关键词（例如：red，blue），rgb颜色。

                ② 独立写法:
                            border-width:
                            border-style:
                            border-color:
                                      单独设置四个方向的边框宽度、样式、颜色!

                            border-top: 边框的粗细 边框的样式 边框的颜色;
                            border-bottom: 边框的粗细 边框的样式 边框的颜色;
                            border-left: 边框的粗细 边框的样式 边框的颜色;
                            border-right: 边框的粗细 边框的样式 边框的颜色;
                                      单独设置某一个方向的边框宽度、样式、颜色

                            border-top-color: ；
                            border-top-width: ；
                            border-top-style: ；        ...

                ③ 边框的特殊利用
                            利用边框你的特殊性，可以完成三角形的制作。

三. 改变盒子模型占据空间的方式

      1. 通过 box-sizing 属性来切换：

          box-sizing:content-box(默认值，遵循盒子模型规则) 或 border-box;
          border-box: border和padding不再撑开容器的大小，而是挤压content的大小。

       2. 怪异盒子模型应用场景：

                如果我们期望不管内容区，边框、内边距大小如何变化，元素的可视宽高始终不变时，就可以给元素添加 box-sizing:border-box; 属性，以怪异盒模型来渲染,
不管元素的占位宽如何变化，始终保持边框和内边距不变，希望通过改变内容区大小来达到目的,常见的响应式开发中、栅格系统等。

        ​​​​​​​3. 以往，CSS盒子模型有两种：标准模型和IE模型，标准模型的宽度和高度只包括内容区域，不包括内边距、边框和外边距。IE模型的宽度和高度包括内容区域、内边距和边框，但不包括外边距，CSS中可以通过box-sizing属性来指定使用哪种模型，示例代码为：