1. 行和列 2. 单元格 3. 网格线 用来隔开单元格的交叉线。网格线将每一行、每一列的单元格分割成全封闭的矩形 1. 指定一个Grid容器 fraction 的缩写，意为"片段" 。 这里的1fr表示剩余的位置。因为没有别的列占剩余空间。 5. grid-auto-flow…

承蒙抬爱，我被称为 CSS 魔术师已经十多年了，但最近在博客上，CSS 相关的文章却不多。那就结合 CSS 与性能这两大主题，为大家带来一篇文章吧。 CSS 是页面渲染的关键因素之一，（当页面存在外链 CSS 时，）浏览器会等待全部的 CSS 下载及解析完成后再渲染页面。关键路…

BFC(Block Formatting Context)，中文翻译为“块格式化上下文”。它有一个明显的特性，那就是如果一个元素拥有了 BFC 特性，那么它内部元素不受外部元素的影响，外部元素也不会受其内部元素的影响。 先来看看 MDN 对 BFC 的解释。 好像也没具体的说什…

这些基本概念有些可能不易理解但却都很重要，如果看完还是很不理解的话需要自己谷歌或百度，网上关于这些概念的文章不少。 “流”又叫文档流，是css的一种基本定位和布局机制。流是html的一种抽象概念，暗喻这种排列布局方式好像水流一样自然自动。“流体布局”是html默认的布局机制，如…

在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。…

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。 所以一个页面中往往不仅仅只有一个层叠上下文(因为有很多种方式可以生成层叠上下文)，在一个层叠上…

下来用几个例子说明下CSS的权重。 分析得出最后一个最大 权重为 320 覆盖上面所有的。 嵌套越多，权重就越大，除过!important，有important 还是人家最大 。 因为伪类的权重相当于类元素，故因为类元素的权重小于id元素的权重，所以下面这个设置：hover无效…

BEM是基于组件的web开发方法。其思想是将用户界面分隔为独立的块，从而使开发复杂的UI界面变得更简单和快，且不需要粘贴复制便可复用现有代码。 BEM由Block、Element、Modifier组成。 代码片段可能被复用且这段代码不依赖其他组件即可用Block。块可以互相嵌套…

1.为什么我们把属性定义在data、props、methods等参数里，却能通过this对象直接访问呢。 用过Vue都知道，Vue本身是一个构造函数，所以我们的用法是直接new Vue()。下面我们用代码模拟一下Vue内部的代理 这里的代码主要是示例，并没有判断属性是否重复。 …