CSS盒模型

什么是盒模型

浏览器会将我们写的元素渲染成一个个类似于盒子一样的东西，然后我们通过CSS来修改这些盒子的宽度，高度等属性。而盒子的计算从外到内一般是margin(外边距)+border(边框)+padding(内边距)+content(内容)。

盒模型种类

盒模型主要分为两种，一种是content-box，另一种是border-box。我们一般常用border-box。

更改盒模型

我们一般通过CSS给元素设定box-sizing的值来控制盒模型的种类。

• content-box，这是box-sizing的默认值。如果给一个元素设置宽度和高度(前提是可以设置宽度和高度)，那么你设定的宽高度值是content+paddinng+border区域的宽高所加起来。

.box{
    width:100px;
    height:120px;
    margin:100px;
    padding:100px;
    border:10px;
}

那么这个盒子的实际宽度=100+100+100+10+10=320px;高度=120+100+100+10+10=340px.是padiding+border+content。

• border-box,设置该值表示盒子的值是包括padding和border的，这样会更容易的让我们布局。

外边距合并问题

块的上边距和下边距有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为我们通俗的称为外边距合并。

其中大致分为三种情况。

兄弟元素之间

style{
    .box1{
        margin-bottom:50px;
    }
    .box2{
        margin-top:50px;
    }
    
}

正常情况下我们会想当然地认为这两个box的margin值会合并，会变成100px。而现实中的合并是只会挑大的值保留。

父子元素之间

如果父子元素之间也会触发外边距合并问题。而重叠的部分会溢出到父元素外面。

<style>
    .parernt {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .child1 {
        margin-top: 100px;
    }

    .child2 {
        margin-bottom: 100px;
    }
</style>

<div class="parent">
    <div>上边界重叠 100</div>
    <div></div>
    <div>下边界重叠 100</div>
</div>

空的块级元素

当一个没有内容的块级元素，但却设置margin值其他值都没设定时会和其它元素触发外边距合并。