css笔记-简述盒模型

提要：

1. 概念
2. 构成
3. box-sizing
4. margin合并

一. 概念

• 在CSS中，所有的元素都被一个个的“盒子”包着，我们通过这些“盒子”来实现布局。
• 两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。
• 不同元素产生的盒子类型可能不同，产生什么样的盒子，取决于它的dispaly属性。
• 完整的盒模型概念应用于块级盒子 (block box)。

二. 构成

由外到内：

1. margin
2. border
3. padding
4. content

三. box-sizing

1. content-box：盒模型的宽/高是只包含 content 的宽/高
2. border-box：盒模型的宽/高是包含 border + padding + content 的宽/高 （推荐使用border-box）

四. (上下)margin合并

两个盒子的margin相接，会产生margin合并，margin值取决于较大值。

1. “兄弟”margin合并

1) 举例

HTML:

<div class="child1">
    child1
</div>
<div class="child2">
    child2
</div>

CSS:

.child1{
    border:2px solid blue;
    margin-bottom:30px;
}
.child2{
    border:2px solid green;
    margin-top:20px;
}

结果：child1、child2之间的合margin=30px，而不是想象中的30px+20px=50px。

2) 消除“兄弟”margin合并的方法

display:inline-block;

2. “父子”margin合并

1) 举例

HTML:

<div class="parent">
    <div class="child1">
        child1
    </div>
    <div class="child2">
        child2
    </div>
</div>

CSS:

.parent{
    margin:10px;
.child1{
    border:2px solid blue;
    margin:30px;
}
.child2{
    border:2px solid green;
    margin:20px;
}

结果：child1的margin-top与parent的margin-top重叠 (合并)，值为30px；
child2的margin-bottom与parent的margin-bottom重叠 (合并)，值为20px。

2) 消除“父子”margin合并的方法

① margin之间添加border
② margin之间添加padding
③ display:flex;