CSS 盒模型

CSS 盒模型理解

盒子模型是html+css中最核心的基础知识，理解了这个重要的概念才能更好的排版，希望对初学者有用。

概念

CSS盒子模型包含了元素(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。

如图:

图中最内部的框是元素的实际内容，也就是元素框，
紧挨着元素框外部的是内边距(padding)，
其次是边框（border），
然后最外层是外边距（margin），
整个构成了框模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。
而外边距margin是透明的，不会遮挡周边的其他元素。

元素框的总宽度 = 元素宽度 + 内边距的左右值 + 边框的左右值 + 外边距的左右值 (标准盒模型)

元素框的总高度 = 元素高度 + 内边距的上下值 + 边框的上下值的 ＋ 外边距的上下值 (标准盒模型)

外边距合并

相邻两个盒模型都有外边距的情况会发生”融合”，两种情况

代码示例

<style>
    .box-1 {margin-bottom: 10px;}
    .box-2 {margin-top: 20px;}
</style>
<div class="box-1"></div>
<div class="box-2"></div>

情况1: 外边距都为正值，外边距会采用较大的一个值为结果。

代码示例

<style>
    .box-1 {margin-bottom: 20px;}
    .box-2 {margin-top: -10px;}
</style>
<div class="box-1"></div>
<div class="box-2"></div>

情况2: 外边距有负值，外边距会采用两者相加为结果。

怪异盒模型

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

1. content-box，border和padding不计算入width之内
2. padding-box，padding计算入width内
3. border-box，border和padding计算入width之内，其实就是怪异模式了。