4. 盒子模型

CSS 盒子模型

CSS 处理网页时，它认为每个元素都包含在一个不可见的盒子里。包含内容区域、padding（内边距）、border（边框）、margin（盒子与盒子的距离）。

所有的页面的元素都可以看成是一个盒子，占据一定的页面空间。

为什么要想象成盒子呢？因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于是摆放盒子。我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局

一个盒子我们会分成几个部分：

• 内容区(content)
• 内边距(padding)
• 边框(border)
• 外边距(margin)

转换到我们日常生活中，可以拿快递盒来对比，商品=内容，内边距=盒子中的填充物，边框=盒
子的厚度，外边距=两个快递之间的距离。

1. content

内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。

如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。

通过width和height两个属性可以设置内容区的大小。

2. padding

• padding:10px 20px 30px 40px; 这样会设置元素的上、右、下、左四个方向的内边距。
• padding:10px 20px 30px; 分别指定上、左右、下四个方向的内边距。
• padding:10px 20px; 分别指定上下、左右四个方向的内边距。
• padding:10px; 同时指定上左右下四个方向的内边距。
• 同时在 css 中还提供了 padding-top、padding-left、padding-right、padding-bottom 分别用来指定四个方向的内边距。
• 改变元素的大小。

<style>
    .d1 {
            width: 300px;
            height: 300px;
            background-color: green;
            padding-left: 10px;                 /* 设置左内边距 */
            padding-right: 20px;                /* 设置右内边距 */
            padding-top:30px;                   /* 设置上内边距 */
            padding-bottom:40px;                /* 设置下内边距 */
            padding: 50px;                      /* 设置四个边 */
            padding: 50px 100px ;               /* 上下  左右 */
            padding: 20px 50px 100px ;          /* 上  左右  下 */
            padding: 20px 50px 100px 150px;     /* 上  右  下  左 */
        }
</style>

3. border

• 可以在元素周围创建边框，边框是元素可见框的最外部。
• border:1px solid red; 分别指定了边框的宽度、颜色和样式，是一种缩写：border-width border-style border-color。
• border-style: none (默认) / dashed(虚线) / dotted（点） / solid(实线) / double(双实线)。
• 可以单独设置某一条边框：border-right: 20px solid blue;
• 改变元素的大小。

<style>
    .d1 {
        width: 200px;
        height: 200px;
        background-color: green;
        /*简写属性: 宽度 样式 颜色*/
        /*border: 10px solid red;*/
        /*边框宽度*/
        border-width: 10px;
        /*边框样式*/
        border-style: solid;
        /*边框颜色*/
        border-color: red;
        /*右边单独添加20像素*/
        border-right: 20px solid blue;
    }
</style>

4. margin

• 设置方法和padding类似，同样也提供了四个方向的 margin-top/margin-right/margin-bottom/margin-left。
• margin: xxx auto;可以使块状元素水平居中。
• 嵌套崩塌：两个盒子发生嵌套的时候，给子类设置 margin 会给父类造成一种崩塌现象，子类元素的 margin-top 没有效果，而是直接作用到父类元素。

解决方案：
1. 父类 overflow: hidden;
2. 父类 设置极小的 padding 或者 border；

• margin重叠： 如果垂直方向上两个块状元素同时设置了 margin-bottom 和 margin-top，那么这两个值将会发生重叠，不会累加，哪个值大用哪个。

• margin-top/margin-bottom 对于行内元素无效。

<style>
    .d2 {
        width: 200px;
        height: 200px;
        background-color: red;
        /*margin: 100px;
        margin-top: 200px;*/
        /*d2将会左右居中*/
        margin: 100px auto;
    }
</style>
<!-- ======================= -->
<!-- 当两个盒子发生嵌套的时候，给子类设置maring会给父类造成一种崩塌现象，子类的margin-top没有效果，而直接作用到父类 -->
<!-- 解决方案： 1. 父类  overflow: hidden
               2. 父类 设置极小的padding -->
<div class="box">
    <div class="inner-box"></div>
</div>

<hr />

<!-- 如果垂直两个块状元素同时设置了margin-bottom和margin-top,那么这两个值将会发生重叠,不会累加，哪个值大用哪个 -->
<div class="box2"></div>
<div class="box3"></div>