滚动锚定（overflow-anchor:auto）
在手机端，垂直布局这种，如果上方的图片加载慢，那么下方的图片看着看着就会被推下来，然后自己又要重新去滚动定位。
左侧的内容滚动后，append了很多div，但是视窗内容纹丝不动，就滚动条的位置变了下；而右侧的内容滚动后，append的内容出现在了视野，滚动条位置保持不变。
background-image也是支持CSS动画
background-image属性也是可以有CSS animation动画效果，或者transition过渡效果的，颠覆了我的CSS观。
调整<img>或<video>
object-fit: 指定如何调整或的大小以适合其容器
object-position: 控制替换内容位置的
线性渐变
background-image: linear-gradient( 180deg, // 旋转角度 顺时针 rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0) 100% );
background-image: linear-gradient(to right, red , yellow); // 相右
百分比表示当前颜色渐变的开始和结束位置。
使用工具
包含块占满一行
// 输入框后图标对齐
input标签有原始的html宽度
display: block; // 流动性
width: 100%; // 会计算padding和margin
// 格式化宽度
.test {
position: absolute;
left: 20px;
right: 20px;
}
flex-grow: 1; // flex自动补满
元素的显示与隐藏实现
.hidden{
position:absolute;
top:-9999em;
}
.hidden{
position:absolute;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
min-height, min-width
min-height: div的高度恰好能放下中间内容区域
min-width: div会继承父元素的width，而min-height不会。如果无父元素，也就是最外层是body，则默认100%
”父选择器”
转换思路，使用兄弟模拟父的结构，父节点不做控制。然后使用兄弟选择器处理
