CSS CheetSheet

CSS 参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference

CSS 高度设置占满页面

参考链接：css高度设置占满页面,《CSS》关于高度铺满的问题

利用 calc 计算：

height: calc(100% - 60px);

CSS 解决滚动条抖动问题

参考链接：css解决浏览器滚动条出现时页面宽度会缩窄页面抖动

来自CSS大佬张鑫旭的分享：

html{
    overflow-y: scroll;
}

:root{
    overflow-y: auto;
    overflow-x: hidden;
}

:root body{
    position: absolute;
}

body{
    width: 100vw;
    overflow: hidden;
}

CSS 样式属性书写顺序

参考链接：CSS 样式书写顺序及规范

书写顺序的作用：减少浏览器reflow（回流），提升浏览器渲染dom的性能。

优先级第一：定位属性

position display float left top right bottom overflow clear z-index

优先级第二：自身属性

width height padding border margin background

优先级第三：文字样式

font-family font-size font-style font-weight font-varient color

优先级第四：文本属性

text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow line-height

优先级第五：css3中新增属性

content box-shadow border-radius transform