css盒模型

什么是盒模型

mdn上面的定义是当对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型，将所有元素表示为一个个矩形的盒子。

盒模型主要由外边距（margin）、边框（border）、内边距（padding）以及内容区域组成，如上图所示。

怎么计算盒模型的宽高

css中有一个属性box-sizing来计算元素的总宽度和总高度，它由两种取值，一种是content-box（内容盒），一种是border-box（边框盒），box-sizing的默认值是content-box。

值为content-box的时候，盒模型的计算方式

总宽度/总高度 = 内容区域

值为border-box的时候，盒模型的计算方式

总宽度/总高度 = 内容区域 + 内边距（padding） + 边框（border）

注意

margin合并问题

1. 兄弟合并，两个相邻的兄弟元素同时使用margin，重合的部分会合并。
2. 父子合并，父元素与第一个子元素和最后一个子元素同时使用margin，重合的部分会合并。

magin合并的解决方法

1. 父子合并可以通过增加 padding、 border 、 overflow: hidden、display: flex来挡住
2. 兄弟合并可以用 inline-block 消除合并

合并只进行上下合并不进行左右合并