为什么需要获取滚动条的宽度原理创建两个div嵌套在一起外层的div设置固定宽度和overflow：scroll滚动条的宽度=外层div的offsetWidth-内层div的offsetWidth实现代

作为前端学习者的我们 或多或少都要学些 CSS ，它作为前端开发的三大基石之一，时刻引领着 Web 的发展潮向。 而 CSS 作为一门标记性语言，可能 给初学者第一印象 就是简单易懂，毫无逻辑，不像编程该有的样子。在语法更新时，每当新属性提出，浏览器的兼容又会马上变成绊脚石，可…

这个方法兼容性不错，但是有一个小缺点：必须提前知道被居中块级元素的尺寸，否则无法准确实现垂直居中。 这种方法有一个明显的好处就是不必提前知道被居中元素的尺寸了，因为 transform 中 translate 偏移的百分比就是相对于元素自身的尺寸而言的。 这种方式的原理实质上和…

在过去几年里，Flexbox已经成了前端最流行的布局框架，这并不奇怪，因为我们可以很方便的用它去对齐元素。 然而，前端村儿里面还有个叫Grid的小孩儿，他和Flexbox有很多功能相似的地方，有些地方他比Flexbox要好，但有也有不足。 这也会变成让开发者们纠结的地方，应该用…

定义：相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。 正因为css选择器的样式为li+li{}，所以代码中的li标签就可以一直套用这个“公式”。 注：前端面包屑导航中经常用到该选择器。 通过这两个例子，可以…

Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。 BEM 是一个简单又非常有用的命名约定。让你的前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确，而且更加严密。 bl…

什么是块格式化上下文（BFC），需要先了解几个知识点。 当浏览器在对一个文档进行布局的时候，浏览器的渲染引擎会根据CSS基础框盒模型（CSS basic box model），将所有元素都转化为一个个矩形的盒子（box），盒子的大小、外观等属性是由CSS来决定。 盒模型有两种标…

啰嗦一句，代码中只设置了长度的变化，为什么这个动画看起来还会有一个上下弹动的效果。而且改变元素高度时，元素看起来应该是顶部向下伸长，而不是动画中那样好像底部固定，向上长高再变回来。 原因在于inline-block的对齐方式，三个元素默认按基线对齐。当第0s第一个动画开始变高以…

前端是一个苦逼的职业，不仅因为技术更新快，而且要会的东西实在太多了（如果全写出来，那真是一箩筐），更让人头疼的是，还要面临各种适配、兼容性问题。 一直以来都是头痛医头脚痛医脚，没有进行系统的梳理，整个思路和方向全是混乱的，所以非常想把最近整理的，CSS浏览器兼容性的常见解决思路…