CSS盒子模型

1. 盒子的概念：

                1.1 页面中的每个标签都可以看作是一个“盒子”，通过盒子的视角更方便的进行布局；

                1.2 浏览器在渲染（显示）网页时，会将网页中的元素看作是一个个的矩形区域，我们也形象的称之为盒子。

---

2. 盒子模型：

CSS中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型

---

3.内容区域的宽(width)和高(height)：

        3.1 作用：通过设置width和height，设置盒子内容区域的大小；

        3.2 属性：width/height；

        3.3 属性值：数字+px

---

4.边框（border）：

        4.1 属性名：border（复合属性）；

        4.2 属性值 ：单个取值的连写，取值之间以空格隔开，如：border:10px solid red;表示10px粗细，实线，红色；

        4.3 线条样式（常用）：solid（实线）；dashed（虚线）；dotted（点线）…                       

        4.4 单方向设置边框：

                4.4.1 场景：只给盒子的某个方向设置边框；

                4.4.2 属性名：border-方位名词；属性值与border的写法一样；

        border属性还可以单一设置边框的粗细（border-width），样式（border-style），颜色（border-color）

        注意：border属性会撑大盒子

---

5.内边距（padding）：

        5.1 属性名：border（复合属性）；

        5.2 属性值：数字+px；取值之间用空格隔开；

               注意： 当属性值只有一个的时候表示给四个方向都设置了内边距；当属性值有两个时，第一个值给上下设置内边距，第二个值给左右设置内边距；当属性值有三个时，第一个给上设置内边距，第二个给左右设置内边距，第三个给下设置内边距；

        padding属性和border属性一样会撑大盒子

---

6.内减模式：

        场景：当盒子被撑大的时候，如果不想盒子被撑大的情况下；

        解决方法：

                1.手动内减：自己计算多余的大小，手动在内容中减去；

                2.自动内减：给盒子设置属性box-sizing:border-box;即可，浏览器会自动计算多余大小，自动在内容中减去；

---

7.外边距（margin）：

        7.1 属性名：margin（复合属性）；

        7.2 属性值：与padding属性设置方式一样；

---

8.清楚默认样式：

        场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签的margin和padding，后续自己设置

        比如：body标签默认有margin：8px；p标签默认有上下的margin；ul标签默认有上下的margin和padding-left……

        解决方法：清除默认样式

                方法一：用并集选择器选中所需清除默认样式的标签然后设置margin:0;padding:0;

                方法二：通配符选择器，即

                        *{        margin:0; padding:0        }；

---

9.版心居中：        

        版心：版心指的是网页的有效内容；

        写法：margin:0 auto;

---

10.外边距问题（合并现象和塌陷现象）：

        10.1 合并现象：

                场景：垂直布局的块级元素，上下的margin会合并；

                结果：最终两者的距离为margin的最大值；

                解决方法：避免就好，只给其中的一个盒子设置margin即可

        10.2 塌陷现象：

                场景：相互嵌套的块级元素，子元素的margin-top会作用在父元素上；

                结果：导致父元素一起向下移动；

                解决方法：

                        1.给父元素设置border-top或者padding-top；

                        2.给父元素设置overflow:hidden；

                        3.转换成行内块元素；

                        4.设置浮动

---

11. 行内元素的内外边距的问题：

        场景：行内元素通过margin和padding改变行内标签的垂直位置，无法生效，行内标签的margin-top和bottom无法生效；

        解决方法：设置line-height；