一、单位px 固定的单位；em 是根据其父元素的字体大小来设置（太多的不确定性）；rem 是根据网页的根元素（html）来设置字体大小。vw window.innerWidth 的数值的 1%vh window.innerHeight 的数值的 1%rpx: （小程序单位）可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个...

对于元素布局上的改变(增删节点，触发resize事件，修改style属性等)会触发回流对于元素视觉上的改变(如改变outline，background-color，visibility等)会触发重绘

上传字体，工具将ttf中的字体精减，只剩下html页面中包含的字体。这样一个网页下来，字体文件就几K，一张图片也要好几十K呢，还是非常合适的。

1、随着屏幕的宽度，加载不同图片； {代码...}

一、grid+calc()自适应 {代码...} grid+calc()自适应二、flex+calc()自适应 {代码...} {代码...} flex+calc()自适应三、display：table 宽度自适应display：table 宽度自适应四、cloumn多栏布局 宽度自适应cloumn多栏布局 宽度自适应五、absolute方位值+float，宽度自适应absolute方位值+float，自适应的网格六、float +...

1. 声明： --variable-name: variable-value;声明变量时，变量名前面要加两根连词线（--）。变量名大小写敏感，--header-color和--Header-Color是两个不同变量。

现象描述　　真正意义上的inline-block水平呈现的元素间，换行显示或者空格隔开的情况下会有间距，这是因为浏览器在解析时，会将换行等读取成一个空格导致。

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动。在添加overflow后，浮动元素回到了容器层，把容器高度撑起，达到了清理浮动的效果。

垂直水平居中一、确定宽高1、absolute + 负margin {代码...} 2、absolute + margin auto {代码...} 3、absolute + calc用于动态计算长度值。需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；任何长度值都可以使用calc()函数进行计算；calc()函数支持 "+", "-", "*", "/" 运算；calc()函数...