weixin_43840538的博客

1 浏览器如何识别你的选择器首先我们需要清楚，浏览器是如何读取选择器，以识别样式，并将相应的样式附于对应的HTML元素，达到美化页面的效果。Chris Coyier曾在《Efficiently Rendering CSS》一文中说过“浏览器读取你的选择器，遵循的原则是从选择器的右边到左边读取。换句话说，浏览器读取选择器的顺序是由右到左进行”。比如说：div.nav < ul li a[t...

作为前端工程师，我们不仅要写出漂亮的页面，美中也要注重性能，注重用户体验，没有一个用户愿意在一个页面面前等待几秒钟，要想提高性能，我们就要从根本入手。首先了解一下一个页面是如何呈现出来的，也就是渲染机制，渲染通常分为以下几个步骤：HTML -----> DOMCSS -----> CSSOMDOM + CSSOM -----> 渲染树（render tree）根...

选择器的种类（按权重从高到低）!important行内样式id选择器 100class选择器 | 伪类选择器 | 属性选择器 10标签选择器 | 伪元素选择器 1伪元素和伪类css 引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。伪类： 伪类用于当一个元素处于某种状态...

transform: translate(-50%, -50%);

参考链接一、什么是Flex布局？Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex 布局。.box{ display:flex;}行内元素也可以使用Flex布局。.box{ display:inline-flex;}webkit内核的浏览器，必需加上-webkit前缀.box...