本文尽量以简洁通俗的语言阐述页面布局的5个知识点，不细数每个知识的所有细节，旨在让大家理解其核心要点。
块级元素、行内元素、行内块级元素
在我们使用html标签的时候，我们会发现，有的元素单独占了一行（比如div），而有的元素则并排在一行（比如span），知道块级元素与行内元素的概念，能帮助我们更快地进行页面布局。
一、行内元素(css属性值为:display: inline)
并排依次展示
不能设置宽高，默认的宽度就是文字的宽度
二、块级元素(css属性值为:display: block)单独一行展示
可以设置宽高，宽度默认变为父级的100%
三、行内块级元素(css属性值为display: inline-block)并排依次展示
可以设置宽高，默认宽度为文字的宽度
总结下来就是：1.行内元素与行内块级元素都是并排展示的，但是行内块级元素能够设置宽高
2.块级元素只能单独一行展示
3.可以设置元素的css属性值为display:xxx，让其变为行内/块级/行内块级元素
css盒模型
掌握css盒模型，能让我们更好地控制元素的大小，一个元素内到外由4个部分合并组成。
一、content(上图的content edge，通过设置width和height可以控制此部分的大小)
二、padding(上图的padding edge，通过设置padding: 5px 可以控制此部分宽度为5px)
三、border(上图的border edge，border: 1px solid #eee 可以控制边线宽度为1px、为实线、颜色为#eee)
四、margin(上图的margin edge，通过设置margin: 5px 可以控制此部分宽度为5px)
css盒模型有2个实际应用场景：
1.box-sizing: content-box和box-sizing: border-box。现在的浏览器一般默认为box-sizing: content-box，在此模式下，对元素设置的width和height仅包含content区域；如果设置该元素css为box-sizing: border-box，则设置的width和height包含content、padding、border 这三个部分。
2.background-color设置的颜色会包含content与padding部分
脱离文档流
我们常常会看到“脱离文档流”相关的字眼，什么是文档流呢，英文原词为Normal flow，其实也可以理解为正常的布局。
传统的HTML文档按照从左至右，从上而下的规则进行排列，这是默认的布局方式；而脱离文档流则是不按照正常的排列方式，不受正常元素排列的影响。绝对定位(position:absolute)、固定定位(position:fixed)、浮动(float:xxx)这三种css属性的元素会脱离文档流。
BFC
BFC 即 Block Formatting Contexts (块级格式化上下文)，属于正常的文档流，BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
要理解BFC的规则，需要在实际应用中回顾相关要点，当碰到以下应用时，尝试去回忆BFC的一些知识点，主要应用包括清除浮动、解决margin重合、float相关布局等。
以下条件会生成一个新的BFC容器
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值
单位
页面上常用的单位有这几种：rem、em、px、vw、vh
- 1.rem：以html元素的font-size为基准
- 2.em：继承父字体的大小(使用较少)
- 3.px：像素
- 4.vw：将屏幕可视区域宽度分为100份，1vw为其中一份
- 5.vh：将屏幕可视区域高度分为100份，1vh为其中一份
在移动端，由于屏幕长宽不同，可以多使用vw、vh单位。
在开发项目时，通常会使用postcss插件（比如postcss-px-to-viewport）来对单位统一进行转换。
