CSS的知识点总结
# visibility、display、opacity的区别
visibility 渲染了但页面看不见 占据空间 点击没反应
display 没渲染 不占空间
opacity 渲染了但页面看不见 占据空间 可以点击
# display:flex
掘金-你不能只会flex居中布局，精制动画讲解所有flex布局方式！通俗易懂纯干货教程！ (opens new window)
# display:grid
掘金-谈谈grid布局(细读必有收获) (opens new window)
# 如何画一条 0.5px 的边框
height:0.5px; Chrome把0.5px四舍五入变成了1px，而firefox/safari能够画出半个像素的边
transform:scaleY(0.5); 效果一般发虚
background:linear-gradient(0deg, #fff, #000); 效果一般发虚
box-shadow: 0 0.5px 0 #000; Chrome和Firefox都非常完美，safari不支持小于1px的boxshadow
SVG 完美显示
# BFC
块格式化上下文
根元素：body；
元素设置浮动：float 除 none 以外的值；
元素设置绝对定位：position (absolute、fixed)；
display 值为：inline-block、table-cell、table-caption、flex等；
overflow 值为：hidden、auto、scroll
解决margin的重叠问题、解决高度塌陷的问题
# CSS垂直居中的方案
定位、padding、flex、Grid、vertical-align
我只举例常用几种，这个比较全有12种可以看看掘金-CSS垂直居中的12种实现方式 (opens new window)
# 响应式布局方案
媒体查询、百分比布局、vw vh rem、栅格系统（依赖UI库）
# 清除浮动
给父级div定义height属性
包含浮动元素的父级标签添加overflow:hidden或者overflow:auto
clear
# 单位
em 相对于父元素
rem 相对于根元素
百分比 相对于祖先元素，也有相对于自身的情况比如（border-radius、translate等)
vw 相对于视窗的宽度
vh 相对于视窗的高度
vmin vw和vh中的较小值
vmax vw和vh中的较大值