CSS相关的复习记录-持续更新
一:盒模型
自内向外 content,padding,border,margin. content代表 width; height.
W3C默认: box-sizing: content-box . IE 默认: box-sizing: border-box
二:居中相关
行内元素可以用 text-align: center; 块级元素可以使用 margin: 0 auto;
水平居中:
position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center
垂直居中:
设置line-height 等于height, 不能写100%
position:absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center
三:比较容易被忽略的css样式
css禁用鼠标事件:pointer-events: none;
css禁止用户选择: user-select: none; (可加各个内核渲染器识别)
隔行样式: nth-child(even/odd)
颜色渐变实现linear-gradient
让overflow:scroll平滑滚动 :-webkit-overflow-scrolling: touch; // 移动端
四:如何修改chomre的记住密码后自动填充的黄色背景
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: rgb(250, 255, 189); /* #FAFFBD; */ background-image: none; color: rgb(0, 0, 0); }
五:CSS 硬件加速
当检测到某个DOM元素应用了某些CSS规则时就会自动开启
.css {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}