架构师的成长之路

这是怎么回事呀？我不是已经把 img 的外边距和内边距什么的全部清空了么？实际上，这其实是inline元素搞的鬼。任何不是块级元素的可见元素都是内联元素，其表现的特性是“行布局”形式。----《CSS权威指南》什么意思？意思就是，其实如图片文字等内联元素，它默认对齐方式都是和它的父级的 baseline 去进行对齐的，但是你对齐的是 baseline，撑开高度的却是元素整体的高...

CSS变量，如任何编程语言中的变量，让我们一遍又一遍地引用相同的值。截至2017年4月，它们受到所有现代浏览器支持，是编写紧凑，简洁风格的有效方式。声明变量1.通过将它们添加到添加其他样式的元素来声明声明变量的时候，变量名前面要加两根连词线（–）。例如：body {    --foo: #7F583F;    --bar: #F7EFD2;}变量不能包含$，[，...

Chromium项目里，渲染线程分为main thread和compositor thread。如果CSS动画只是改变transforms和opacity，这时整个CSS动画得以在compositor thread完成（而JS动画则会在main thread执行，然后触发compositor进行下一步操作）在JS执行一些昂贵的任务时，main thread繁忙，CSS动画由于使用了compos...

回流和重绘可以说是每一个web开发者都经常听到的两个词语，我也不例外，可是我之前一直不是很清楚这两步具体做了什么事情。最近看了一些博客和书籍，整理了一些内容并且结合一些例子，写了这篇文章，希望可以帮助到大家。浏览器的渲染过程本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘，如果大家想直接看如何减少回流和重绘，可以跳到后面。（这个渲染过程来自MDN） 从上面这个图上，我们可以...