![[灵光一现]](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
赞了这篇沸点
赞了这篇沸点
赞了这篇沸点
赞了这篇沸点
#我的宝藏书籍#
《亲密关系》
作者:罗兰.米勒
亲密关系与泛泛之交有什么区别？大丈夫与小女子真的般配吗？吸引力的秘密是什么？男人与女人真的是不同的动物吗？同性恋真的是由基因决定的吗？单亲家庭的孩子长大后更容易离婚吗……什么是爱情？由什么构成？能持续多久？两性在发生一夜情及选择终身伴侣上有什么差异？爱情和性欲是由不同的脑区控制吗？亲密关系美满的秘诀是什么？有什么方法能让婚姻持续一生？米勒教授在本书中回答了这些问题，尤其澄清了通俗心理学所宣扬的经验之谈，甚至某些错误观点。
本书汲取了社会心理学、沟通研究、家庭研究、认知心理学、发展心理学、演化心理学、社会学、传播学及家政学等学科的最新成果，研究实践和理论建构并重，学术标准与大众兴趣兼备。全书结构清晰、逻辑严密、语言生动、启发思考，既通俗易懂，读来轻松愉快，又科学权威，崇尚实证精神。
本书遵循由浅入深、由一般到特殊的认知规律，论述了亲密关系的基础、活动形态、类型、矛盾和修复等内容，读完本书，你将对人际吸引、爱情、婚姻、承诺、友谊、激情、沟通、性爱、依恋、择偶、嫉妒、出轨、家暴等亲密关系的方方面面有全新的认识。
亲密关系是人类经验的核心，处理得好能给人带来极大的快乐，处理得不好则会造成重大创伤，因此科学地认识亲密关系，攸关我们每个人的幸福。本书既适合研究亲密关系的专业人士，能给他们带来启发与灵感，也适合每个想爱情甜蜜、婚姻长久、人生幸福的普通读者。
《亲密关系》
作者:罗兰.米勒
亲密关系与泛泛之交有什么区别？大丈夫与小女子真的般配吗？吸引力的秘密是什么？男人与女人真的是不同的动物吗？同性恋真的是由基因决定的吗？单亲家庭的孩子长大后更容易离婚吗……什么是爱情？由什么构成？能持续多久？两性在发生一夜情及选择终身伴侣上有什么差异？爱情和性欲是由不同的脑区控制吗？亲密关系美满的秘诀是什么？有什么方法能让婚姻持续一生？米勒教授在本书中回答了这些问题，尤其澄清了通俗心理学所宣扬的经验之谈，甚至某些错误观点。
本书汲取了社会心理学、沟通研究、家庭研究、认知心理学、发展心理学、演化心理学、社会学、传播学及家政学等学科的最新成果，研究实践和理论建构并重，学术标准与大众兴趣兼备。全书结构清晰、逻辑严密、语言生动、启发思考，既通俗易懂，读来轻松愉快，又科学权威，崇尚实证精神。
本书遵循由浅入深、由一般到特殊的认知规律，论述了亲密关系的基础、活动形态、类型、矛盾和修复等内容，读完本书，你将对人际吸引、爱情、婚姻、承诺、友谊、激情、沟通、性爱、依恋、择偶、嫉妒、出轨、家暴等亲密关系的方方面面有全新的认识。
亲密关系是人类经验的核心，处理得好能给人带来极大的快乐，处理得不好则会造成重大创伤，因此科学地认识亲密关系，攸关我们每个人的幸福。本书既适合研究亲密关系的专业人士，能给他们带来启发与灵感，也适合每个想爱情甜蜜、婚姻长久、人生幸福的普通读者。
展开
1
7
赞了这篇沸点
赞了这篇沸点
#每日一题# 前端居中为什么要使用transform？
transform 是一个合成属性，对合成属性进行 transition/animation 动画将会创建一个合成层，使得被动画元素在一个独立的层中进行动画。通常情况下，浏览器会将一个层的内容先绘制进一个位图中，然后再作为纹理上传到 GPU，只要该层的内容不发生改变，就没必要进行重绘，浏览器会通过重新复合来形成一个新的帧。
top/left属于布局属性，该属性的变化会触发页面重绘，重绘指对这些节点以及受这些节点影响的其它节点，进行CSS计算->布局->重绘过程，浏览器需要为整个层进行重绘并重新上传到 GPU，造成了极大的额外的性能开销。
transform 是一个合成属性，对合成属性进行 transition/animation 动画将会创建一个合成层，使得被动画元素在一个独立的层中进行动画。通常情况下，浏览器会将一个层的内容先绘制进一个位图中，然后再作为纹理上传到 GPU，只要该层的内容不发生改变，就没必要进行重绘，浏览器会通过重新复合来形成一个新的帧。
top/left属于布局属性，该属性的变化会触发页面重绘，重绘指对这些节点以及受这些节点影响的其它节点，进行CSS计算->布局->重绘过程，浏览器需要为整个层进行重绘并重新上传到 GPU，造成了极大的额外的性能开销。
展开
评论
4
赞了这篇沸点
赞了这篇沸点
赞了这篇沸点
赞了这篇沸点
赞了这篇沸点
赞了这篇沸点
#每天一个知识点# object-fit:属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
object-fit:fill 被替换的内容大小可以填充元素的内容框，整个对象将完全填充此框，如果对象的宽高比不匹配其框的宽高比，里面对象会被拉伸。
object-fit:contain 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比，整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加
object-fit:cover 被替换的内容大小保持其宽高比，同事填充元素的整个内容框，如果对象的宽高比与盒子的宽高比不匹配，改对象将被裁剪以适应。
object-fit:none 被替换的内容尺寸不会被改变
object-fit:scale-down 内容的尺寸就像是指定了none或contain，取决于哪一个将导致更小的对象尺寸。
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;
水平居中：
行内元素: 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）
1. 重排
重排就是浏览器在第一次渲染完页面布局以后，后续引起页面各节点位置重新计算或者重新布局的行为
因为元素的位置或者尺寸发生了变化，浏览器会重新计算渲染树，导致渲染树的一部分或者全部发生变化，需要重新绘制页面上影响的元素
能触发重排的行为有：改变页面尺寸，涉及元素尺寸或位置的操作等
2. 重绘
重绘就是布局计算完毕后，页面会重新绘制，这时浏览器会遍历渲染树，绘制每个节点，当元素外观变化但没有改变布局的时候，重新把元素绘制的过程。
重绘不一定出发重排，但重排一定会出发重绘
如：vidibility、outline、背景色等属性的改变
举个生动的例子来说就是，我们可以理解重排为一个人的身体，而重绘为一个人的外观，显而易见，当你长胖或者长高了，都会引起身体的变化
但是比如你化个妆，涂个口红啥的，就只是改变你的外表，是重绘，不会说因此你的身体就改变了。
我们常常说HTML是网页的结构，CSS是网页的外观，JS是网页的动作，那么一般涉及到网页的HTMl改变的（也即是DOM元素改变）的就是重排，而涉及到CSS的比如改变颜色等就是重绘（对于会影响到DOM的不算，比如使用了display：flex）
展开
评论
7
赞了这篇沸点
