关于页面布局原理需要了解到以下两个概念

• 盒模型
• 文档流

1、盒模型 #

1.1、盒模型组成 #

浏览器在布局时，会将每个元素当成一个盒子。盒模型用来描述元素所占用空间的内容,盒模型包括 margin, border, padding, content 四个部分。CSS 中存在两种盒模型

• 标准盒模型

给盒设置 width 和 height，实际设置的是 content box。

盒子真实 显示大小 = width + padding + border

• IE盒模型

给盒设置 width 和 height，实际设置的是 border box。

盒子真实 显示大小 = width = content + padding + border

1.2、如何设置？ #

通过设置 box-sizing 属性值

• content-box: 标准盒模型
• border-box: IE 盒模型
• padding-box: (ps： Firefox 推出过，后被删除)

推荐使用 border-box, 可避免手动计算各尺寸

2、文档流 #

默认文档流会从上到下，从左到右依次排列布局，可通过 position 属性调整元素的布局方式

2.1 position #

• static
• inherit
• relative
• absolute
• fixed
• sticky