1 引言 Flex 与 Grid 相比就像功能键盘和触摸屏。触摸屏的控制力相比功能键盘来说就像是降维打击，因为功能键盘只能上下左右控制（x、y 轴），而触摸屏打破了布局障碍，直接从（z 轴）触达，这样 ...

1.CSS 选择器的优先级是如何计算的？ 浏览器通过优先级规则，判断元素展示哪些样式。优先级通过 4 个维度指标确定，我们假定以a、b、c、d</code ...

第一问 弹性盒子中 flex: 0 1 auto 表示什么意思 三个参数分别对应的是 flex-grow, flex-shrink 和 flex-basis，默认值为 0 1 auto。 1.flex-grow 属性定义项目的放大比例，默认 ...

现代浏览器都支持flex布局，而且flex布局用起来非常简单，好用。所以今天我们就详细的记录下平时常用的flex语法。 一、什么是flex布局 flex其实是flexible box的缩写，即为“弹性盒子“，任何一个容器都可以指定为flex ...

前几天对 flex 的深入学习，笔者写了一篇flex的收缩算法文章，文章刚出，就被朋友甩来一道flex题，咋地！要考察我？小题一道我还能不会，哈哈哈！不过我相信肯定有人不会这道题，尤其复杂的flex计算情况，指定懵。于是这篇文章就诞生了，教 ...

选择器的命名规范 1.模块化命名 例如： 与布局相关的样式以“g”为开头。如“g-content”和“g-header”； 与挂钩相关的样式以“j”为开头。如“j-open”和“j-request”； 与元件相关的样式以“m”为开头。如“m ...

Flexbox是一个CSS3的盒子模型（box model），顾名思义它就是一个灵活的盒子（Flexible Box）。 Flexbox模型概念 第一步要来看Flexbox的盒子模型，根据W3C文章所描述，flex的盒子模型如下图所呈现，与 ...

Flex的基本概念 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display:flex; } 行内样式也可以使用Flex布局 .box{ ...

网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C ...

闭包以及应用场景 作用域 作用域决定了代码区块中变量、函数、对象和其他资源的可见性 全局作用域、函数作用域和块级作用域 let 和 const 声明的变量不会提升到代码块顶部。 在同一作用域内，禁止重复声明 for 循环中，设置循环变量那部 ...