作用域是啥 作用域几乎是最基本的功能了，可以用来存储变量，方便我们之后对这些变量进行访问或修改。 我们举个简单的栗子🌰来方便理解： 我们来解析一下浏览器拿到这串代码后做的事情 编译器会查看作用域中是否

前段时间笔者收到可爱漂亮的小册姐姐的邀请，做了人生首次直播分享。分享主题是《玩转CSS的艺术之美》，跟笔者在9月底发布的掘金小册同名。 9月底发布的玩转CSS的艺术之美，首日预售就达到709本，预售仅三日就破1000本。这也让笔者感到惊讶，没想到CSS技术还是那么受倔友们的欢迎…

px是像素值，是一个固定的长度，比如我们的米，厘米一样。 固定长度已经不能满足我们现在的需求了。 🌰举例：比如我们在缩小我们屏幕的时候，我们不仅仅是需要缩小我们的盒子的宽高，我们还想要让我们字体大小也随之缩小，这样用户体验会更好一点。 如果自己元素上面没有设置font-siz…

PC端分辨率一样的情况下，屏幕尺寸越大，显示的越模糊(因为dpi越小)。 我们可以调整网页在移动端上的缩放比例，这个值就是viewport。默认情况下，移动端浏览器会将 viewport 宽度设为980px（也有可能是1024px 或其它值），也就是说1px = 设备屏幕宽度的…

1. 三种单位详解 相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。 利用 px 设置字体大小及元素宽高等比较稳定和精确。Px 的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。 相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺…

下面我将选择进行划分为三大部分，对于基本选择器我就不说了，主要讲下伪类选择器，组合选择器及它们各自的使用场景。 下面讲讲nth-child()括号中的公式，这个算是这个选择器的亮点了。 上面这两我就不说了，相信大家都用烂了。主要说说下面这两个。 好了，在讲完这些选择器之后我们来…

所谓‘伪元素’，就是本身不存在的页面元素，HTML代码里并没有这样的元素，但在页面显示时，你却能看到这些本来不存在的元素发挥着作用。本文主要探究伪元素beforce和after的常用使用场景。 :before 选择器向选定的元素前插入内容。 使用content 属性来指定要插入…

在浏览器中实现用户界面时，请尽可能减少浏览器带来的差异，以使用户界面具有可预测性。 跟踪所有这些差异很困难，因此，我整理了一些常见问题及其解决方案方便大家查看。 添加一个按钮时，重置它的背景，否则它会在不同的浏览器中看起来不同。在下面的例子中，同样的按钮在 Chrome 和 S…

很多人聊起移动端适配都是懵逼状态，都想口吐芬芳。难道移动端还要适配，直接px写死，其他自适应不就完了吗？其实不然，要求严格的公司会要求缩放比例完全相同，简单说就是，在每个手机上的每一行的字数都要一样。接下来，我们就要细说移动端适配的前世今生 相信我们所有前端开发者，都是见证了手…