CSS

BFC

块格式化上下文，给予一个独立的空间，让空间内的子元素不会影响到外面的布局

1. 消除浮动
   子元素float: left导致父元素无法展开
   让父元素形成BFC，在父元素中加入

   display: inline-block;
   or
   overflow: hidden;
   etc.
   

2. 两个相邻的元素会产生边距重叠
   让第二个元素形成BFC
3. 两栏布局
   如何垂直居中一个浮动元素

DPR

DPR = 物理像素/css逻辑像素
物理像素：出厂设置的设备物理像素
css逻辑像素：在显示屏上的单位
通过window.devicePixelRatio获取设备DPR
由于在高清屏中DPR可能会是2或者3，原线1px像素的线就占了2-3个物理像素，显示变粗
解决方案：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

或利用scale(0.5)

link 与 @import

link：文件是同时加载。
@import 引入的 CSS 将在页面加载完毕后被加载。
*不要用@import

display:none 与 visibility:hidden

display:none 不占用节点
visibility:hidden 保留节点，占用空间

行内块级元素（display:inline-block）

行内块级元素 = 行内元素的 可以同行 + 块级元素的 可以设置宽高
行内块级元素间会有间隙
原因：行内元素的空格和换行会被解析
解决：给父级设置font-size: 0;

自适应布局单位

1. rem
   相对于根节点字体大小的单位
   1px = 1/37.5 rem
2. em
   相对于父元素字体大小的单位
3. vw
   等于视口宽度的1%
4. vh