![[灵光一现]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_25.51e6984.png)
这天气还是相对不错的，愉快的一天从下班开始![[惊喜]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_93.5ee641b.png)
。
小呆呆哇
获得徽章 0
- #每天一个知识点# object-fit:属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
object-fit:fill 被替换的内容大小可以填充元素的内容框，整个对象将完全填充此框，如果对象的宽高比不匹配其框的宽高比，里面对象会被拉伸。
object-fit:contain 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比，整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加
object-fit:cover 被替换的内容大小保持其宽高比，同事填充元素的整个内容框，如果对象的宽高比与盒子的宽高比不匹配，改对象将被裁剪以适应。
object-fit:none 被替换的内容尺寸不会被改变
object-fit:scale-down 内容的尺寸就像是指定了none或contain，取决于哪一个将导致更小的对象尺寸。展开评论7 - #每天一个知识点# css中水平、垂直居中的用法
水平居中：
行内元素: text-align: center
块级元素: margin: 0 auto
position:absolute +left:50%+ transform:translateX(-50%) 只适用于单个子节点，多个会重叠覆盖
display:flex + justify-content: center
垂直居中：
设置line-height 等于height
position：absolute +top:50%+ transform:translateY(-50%) 只适用于单个子节点，多个会重叠覆盖
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;展开评论7 - #每天一个知识点# 重排和重绘
1. 重排
重排就是浏览器在第一次渲染完页面布局以后，后续引起页面各节点位置重新计算或者重新布局的行为
因为元素的位置或者尺寸发生了变化，浏览器会重新计算渲染树，导致渲染树的一部分或者全部发生变化，需要重新绘制页面上影响的元素
能触发重排的行为有：改变页面尺寸，涉及元素尺寸或位置的操作等
2. 重绘
重绘就是布局计算完毕后，页面会重新绘制，这时浏览器会遍历渲染树，绘制每个节点，当元素外观变化但没有改变布局的时候，重新把元素绘制的过程。
重绘不一定出发重排，但重排一定会出发重绘
如：vidibility、outline、背景色等属性的改变
举个生动的例子来说就是，我们可以理解重排为一个人的身体，而重绘为一个人的外观，显而易见，当你长胖或者长高了，都会引起身体的变化
但是比如你化个妆，涂个口红啥的，就只是改变你的外表，是重绘，不会说因此你的身体就改变了。
我们常常说HTML是网页的结构，CSS是网页的外观，JS是网页的动作，那么一般涉及到网页的HTMl改变的（也即是DOM元素改变）的就是重排，而涉及到CSS的比如改变颜色等就是重绘（对于会影响到DOM的不算，比如使用了display：flex）展开评论7
