持续创造，加速成长！这是我参加「日新方案 10 月更文应战」的第2天，点击检查活动详情

前语

又到了金九银十季，最近我也是奔走于各种面试。我自己总结整理了许多方向的前端面试题。借着国庆这个假日，也把这些标题总结共享给咱们，也祝正在面试的朋友们可以拿到满足的offer。

往期文章

（1）2022年我的面试万字总结（阅览器网络篇）

（3） 2022年我的面试万字总结（HTML篇）

（4） 2022年我的面试万字总结（JS篇上）

（5） 2022年我的面试万字总结（JS篇下）

（6） 2022年我的面试万字总结（代码篇）

（7） 2022年我的面试万字总结（Vue上）

（8） 2022年我的面试万字总结（Vue下）

1. CSS选择器及其优先级

选择器 格式 优先级权重
id选择器 #id 100
类选择器 #classname 10
特征选择器 a[ref=“eee”] 10
伪类选择器 li:last-child 10
标签选择器 div 1
伪元素选择器 li:after 1
相邻兄弟选择器 h1+p 0
子选择器 ul>li 0
后代选择器 li a 0
通配符选择器 * 0

关于选择器的优先级：

  • 标签选择器、伪元素选择器：1
  • 类选择器、伪类选择器、特征选择器：10
  • id 选择器：100
  • 内联样式：1000

留心事项：

  • !important声明的样式的优先级最高；
  • 假设优先级相同，则毕竟出现的样式收效；
  • 继承得到的样式的优先级最低；
  • 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；
  • 样式表的来历纷歧起，优先级次第为：内联样式 > 内部样式 > 外部样式 > 阅览器用户自定义样式 > 阅览器默许样式。

2. CSS中可继承与不可继承特征有哪些

无继承性的特征：

1.display：规则元素应该生成的框的类型

2.文本特征：

  • vertical-align：垂直文本对齐
  • text-decoration：规则增加到文本的装饰
  • text-shadow：文本阴影作用
  • white-space：空白符的处理
  • unicode-bidi：设置文本的方向

3.盒子模型的特征：width、height、margin、border、padding

4.布景特征：background、background-color、background-image、background-repeat、background-position、background-attachment

5.定位特征：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6.生成内容特征：content、counter-reset、counter-increment

7.归纳样式特征：outline-style、outline-width、outline-color、outline

8.页面样式特征：size、page-break-before、page-break-after

9.动静样式特征：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

可以继承的特征：

1.字系统列特征

  • font-family：字系统列
  • font-weight：字体的粗细
  • font-size：字体的大小
  • font-style：字体的风格

2.文本系列特征

  • text-indent：文本缩进
  • text-align：文本水平对齐
  • line-height：行高
  • word-spacing：单词之间的间隔
  • letter-spacing：中文或许字母之间的间隔
  • text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
  • color：文本颜色

3.元素可见性

  • visibility：控制元素闪现躲藏

4.列表布局特征

  • list-style：列表风格，包含list-style-type、list-style-image等

5.光标特征

  • cursor：光标闪现为何种形状

3. display的特征值及其作用

特征值 作用
none 元素不闪现，并且会从文档流中移除。
block 块类型。默许宽度为父元素宽度，可设置宽高，换行闪现。
inline 行内元素类型。默许宽度为内容宽度，不可设置宽高，同行闪现。
inline-block 默许宽度为内容宽度，可以设置宽高，同行闪现。
list-item 像块类型元素相同闪现，并增加样式列表符号。
table 此元素会作为块级表格来闪现。
inherit 规则应该从父元素继承display特征的值。

4. display的block、inline和inline-block的差异

（1）block： 会独占一行，多个元素会另起一行，可以设置width、height、margin和padding特征；

（2）inline： 元素不会独占一行，设置width、height特征无效。但可以设置水平方向的margin和padding特征，不能设置垂直方向的padding和margin；

（3）inline-block： 将政策设置为inline政策，但政策的内容作为block政策出现，之后的内联政策会被摆放在同一行内。

5. 行内元素和块级元素的差异

1）行内元素

  • 设置宽高无效；
  • 可以设置水平方向的margin和padding特征，不能设置垂直方向的padding和margin；
  • 不会自动换行；

（2）块级元素

  • 可以设置宽高；
  • 设置margin和padding都有用；
  • 可以自动换行；
  • 多个块状，默许摆放从上到下。

6. 躲藏元素的方法有哪些

display: none：烘托树不会包含该烘托政策，因此该元素不会在页面中占有方位，也不会照应绑定的监听工作。

visibility: hidden：元素在页面中仍占有空间，但是不会照应绑定的监听工作。

opacity: 0：将元素的通明度设置为 0，以此来结束元素的躲藏。元素在页面中依然占有空间，并且可以照应元素绑定的监听工作。

position: absolute：通过运用必定定位将元素移除可视区域内，以此来结束元素的躲藏。

z-index: 负值：来使其他元素遮盖住该元素，以此来结束躲藏。

clip/clip-path ：运用元素裁剪的方法来结束元素的躲藏，这种方法下，元素仍在页面中占有方位，但是不会照应绑定的监听工作。

transform: scale(0,0) ：将元素缩放为 0，来结束元素的躲藏。这种方法下，元素仍在页面中占有方位，但是不会照应绑定的监听工作。

7. link和@import的差异

两者都是外部引用CSS的方法，它们的差异如下：

  • link是XHTML标签，除了加载CSS外，还可以定义RSS等其他业务；@import归于CSS领域，只能加载CSS。
  • link引用CSS时，在页面载入时一同加载；@import需求页面网页完全载入往后加载。
  • link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版别的阅览器不支撑。
  • link支撑运用Javascript控制DOM去改动样式；而@import不支撑。

8. transition和animation的差异

transition是过度特征，着重过度，它的结束需求触发一个工作（比如鼠标移动上去，焦点，点击等）才实行动画。它类似于flash的补间动画，设置一个初步要害帧，一个结束要害帧。

animation是动画特征，它的结束不需求触发工作，设定好时间之后可以自己实行，且可以循环一个动画。它也类似于flash的补间动画，但是它可以设置多个要害帧（用@keyframe定义）结束动画。

9. 伪元素和伪类的差异和作用？

  • 伪元素：在内容元素的前后刺进额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部闪现可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：
p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}
  • 伪类：将特别的作用增加到特定选择器上。它是已有元素上增加类别的，不会发生新的元素。例如：
a:hover {color: #FF00FF}
p:first-child {color: red}

总结： 伪类是通过在元素选择器上加⼊伪类改动元素情况，⽽伪元素通过对元素的操作进⾏对元素的改动。

10. 对盒模型的了解(标准盒模型、IE盒模型)

盒模型都是由四个部分组成的，别离是margin、border、padding和content。

标准盒模型和IE盒模型的差异在于设置width和height时，所对应的规划不同：

  • 标准盒模型的width和height特征的规划只包含了content，
  • IE盒模型的width和height特征的规划包含了border、padding和content。

可以通过批改元素的box-sizing特征来改动元素的盒模型：

  • box-sizeing: content-box标明标准盒模型（默许值）
  • box-sizeing: border-box标明IE盒模型（怪异盒模型）

11. 为什么有时分⽤translate来改动方位⽽不是定位？

translate 是 transform 特征的⼀个值。改动transform或opacity不会触发阅览器重排（reflow）或重绘（repaint），只会触发复合（compositions）。⽽改动必定定位会触发重排，进⽽触发重绘和复合。

transform使阅览器为元素创建⼀个 GPU 图层，但改动必定定位会使⽤到 CPU。 因此translate()更⾼效，可以缩短平滑动画的制造时间。 ⽽translate改动方位时，元素依然会占有其原始空间，必定定位就不会发⽣这种情况。

12. li 与 li 之间有看不见的空白间隔是什么原因引起的？怎样处理？

阅览器会把inline内联元素间的空白字符（空格、换行、Tab等）烘托成一个空格。为了美观，一般是一个<li>放在一行，这导致<li>换行后发生换行字符，它变成一个空格，占用了一个字符的宽度。

处理方法：**

（1）为<li>设置float:left。缺点：有些容器是不能设置起浮，如左右切换的焦点图等。

（2）将一切<li>写在同一行。缺点：代码不美观。

（3）将<ul>内的字符标准直接设为0，即font-size:0。缺点：<ul>中的其他字符标准也被设为0，需求额外从头设定其他字符标准，且在Safari阅览器依然会出现空白间隔。

（4）消除<ul>的字符间隔letter-spacing:-8px。缺点：这也设置了<li>内的字符间隔，因此需求将<li>内的字符间隔设为默许letter-spacing:normal。

13. CSS3中有哪些新特性

  • 新增各种CSS选择器 （: not(.input)：一切 class 不是“input”的节点）
  • 圆角 （border-radius:8px）
  • 多列布局 （multi-column layout）
  • 阴影和反射 （Shadoweflect）
  • 文字特效 （text-shadow）
  • 文字烘托 （Text-decoration）
  • 线性骤变 （gradient）
  • 旋转 （transform）
  • 增加了旋转,缩放,定位,歪斜,动画,多布景

14. 常见的图片格式及运用场景

1. BMP，是无损的、既支撑索引色也支撑直接色的点阵图。这种图片格式几乎没有对数据进行紧缩，所以BMP格式的图片一般是较大的文件。

2. GIF，是无损的、选用索引色的点阵图。选用LZW紧缩算法进行编码。文件小，是GIF格式的利益，一同，GIF格式还具有支撑动画以及通明的利益。但是GIF格式仅支撑8bit的索引色，所以GIF格式适用于对颜色要求不高一同需求文件体积较小的场景。

3. JPG（JPEG） ，是有损的、选用直接色的点阵图。JPEG的图片的利益是选用了直接色，得益于更丰盛的颜色，JPEG非常适宜用来存储照片，与GIF比较，JPEG不适宜用来存储企业Logo、线框类的图。由于有损紧缩会导致图片模糊，而直接色的选用，又会导致图片文件较GIF更大。

4.PNG-8，是无损的、运用索引色的点阵图。PNG是一种比较新的图片格式，PNG-8是非常好的GIF格式替代者，在或许的情况下，应该尽或许的运用PNG-8而不是GIF，由于在相同的图片作用下，PNG-8具有更小的文件体积。除此之外，PNG-8还支撑通明度的调节，而GIF并不支撑。除非需求动画的支撑，否则没有理由运用GIF而不是PNG-8。

5. PNG-24，是无损的、运用直接色的点阵图。PNG-24的利益在于它紧缩了图片的数据，使得相同作用的图片，PNG-24格式的文件大小要比BMP小得多。当然，PNG24的图片仍是要比JPEG、GIF、PNG-8大得多。

6. SVG，是无损的矢量图。SVG是矢量图意味着SVG图片由直线和曲线以及制造它们的方法组成。当扩展SVG图片时，看到的仍是线和曲线，而不会出现像素点。SVG图片在扩展时，不会失真，所以它适宜用来制造Logo、Icon等。

7. WebP，是谷歌开发的一种新图片格式，WebP是一同支撑有损和无损紧缩的、运用直接色的点阵图

15. 对 CSSSprites (精灵图)的了解

CSSSprites（精灵图），将一个页面涉及到的一切图片都包含到一张大图中去，然后运用CSS的 background-image，background-repeat，background-position特征的组合进行布景定位。

利益：

  • 运用CSS Sprites能很好地减少网页的http恳求，然后大大前进了页面的功用，这是CSS Sprites最大的利益；
  • CSS Sprites能减少图片的字节，把3张图片吞并成1张图片的字节总是小于这3张图片的字节总和。

缺点：

  • 在图片吞并时，要把多张图片有序的、合理的吞并成一张图片，还要留好满足的空间，避免板块内出现不必要的布景。在宽屏及高分辨率下的自习气页面，假设布景不可宽，很简略出现布景开裂；
  • CSSSprites在开发的时分相对来说有点费事，需求凭仗photoshop或其他东西来对每个布景单元丈量其精确的方位。
  • 维护方面：CSS Sprites在维护的时分比较费事，页面布景有少数改动时，就要改这张吞并的图片，无需改的当地尽量不要动，这样避免改动更多的CSS，假设在本来的当地放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。

16. 对line-height 的了解及其赋值方法

（1）line-height的概念：

  • line-height 指一行文本的高度，包含了字间隔，实际上是下一行基线到上一行基线间隔；
  • 假设一个标签没有定义 height 特征，那么其毕竟体现的高度由 line-height 抉择；
  • 一个容器没有设置高度，那么撑开容器高度的是 line-height，而不是容器内的文本内容；
  • 把 line-height 值设置为 height 相同大小的值可以结束单行文字的垂直居中；
  • line-height 和 height 都能撑开一个高度；

（2）line-height 的赋值方法：

  • 带单位：px 是固定值，而 em 会参考父元素 font-size 值核算自身的行高
  • 纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
  • 百分比：将核算后的值传递给后代

17. CSS 优化和前进功用的方法有哪些？

加载功用：

（1）css紧缩：将写好的css进行打包紧缩，可以减小文件体积。

（2）css单一样式：当需求下边距和左面距的时分，许多时分会选择运用 margin:top 0 bottom 0；但margin-bottom:bottom;margin-left:left;实行功率会更高。

（3）减少运用@import，主张运用link，由于后者在页面加载时一同加载，前者是等候页面加载结束之后再进行加载。

选择器功用：

（1）要害选择器（key selector）。选择器的毕竟面的部分为要害选择器（即用来匹配政策元素的部分）。CSS选择符是从右到左进行匹配的。当运用后代选择器的时分，阅览器会遍历一切子元历来承认是否是指定的元素等等；

（2）假设规则具有ID选择器作为其要害选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会糟蹋时间去匹配它们了）。

（3）避免运用通配规则，如*{}核算次数惊人，只对需求用到的元素进行选择。

（4）尽量少的去对标签进行选择，而是用class。

最高不要逾越三层

（5）尽量少的去运用后代选择器，下降选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要逾越三层，更多的运用类来相关每一个标签元素。

（6）了解哪些特征是可以通过继承而来的，然后避免对这些特征重复指定规则。

烘托功用：

（1）稳重运用高功用特征：起浮、定位。

（2）尽量减少页面重排、重绘。

（3）去除空规则：｛｝。空规则的发生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。

（4）特征值为0时，不加单位。

（5）特征值为起浮小数0.**，可以省掉小数点之前的0。

（6）标准化各种阅览器前缀：带阅览器前缀的在前。标准特征在后。

（7）不运用@import前缀，它会影响css的加载速度。

（8）选择器优化嵌套，尽量避免层级过深。

（9）css雪碧图，同一页面附近部分的小图标，方便运用，减少页面的恳求次数，但是一同图片自身会变大，运用时，优劣考虑清楚，再运用。

（10）正确运用display的特征，由于display的作用，某些样式组合会无效，徒增样式体积的一同也影响解析功用。

（11）不乱用web字体。关于中文网站来说WebFonts或许很生疏，国外却很盛行。web fonts一般体积巨大，并且一些阅览器在下载web fonts时会阻塞页面烘托损伤功用。

可维护性、健壮性：

（1）将具有相同特征的样式抽离出来，整吞并通过class在页面中进行运用，前进css的可维护性。

（2）样式与内容别离：将css代码定义到外部css中。

18. 后处理器(postCss)是什么？

后处理器， 如： postCss，一般是在结束的样式表中根据css标准处理css，让其更加有用。现在最常做的是给css特征增加阅览器私有前缀，结束跨阅览器兼容性的问题。

19. ::before 和 :after 的双冒号和单冒号有什么差异？

（1）冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

（2）::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

留心： :before和 :after 这两个伪元素，是在CSS2.1里新出现的。起先，伪元素的前缀运用的是单冒号语法，但跟着Web的进化，在CSS3的标准里，伪元素的语法被批改成运用双冒号，成为::before、::after。

20. display :inline-block 什么时分会闪现空隙？

  • 有空格时会有空隙，可以删去空格处理；
  • margin正值时，可以让margin运用负值处理；
  • 运用font-size时，可通过设置font-size:0、letter-spacing、word-spacing处理；

21.怎样结束单行、多行文本溢出躲藏

  • 单行文本溢出
overflow: hidden;       // 溢出躲藏
text-overflow: ellipsis;    // 溢出用省掉号闪现
white-space: nowrap;     // 规则阶段中的文本不进行换行
​
  • 多行文本溢出
overflow: hidden;       // 溢出躲藏
text-overflow: ellipsis;   // 溢出用省掉号闪现
display:-webkit-box;     // 作为弹性弹性盒子模型闪现。
-webkit-box-orient:vertical; // 设置弹性盒子的子元素摆放方法：从上到下垂直摆放
-webkit-line-clamp:3;     // 闪现的行数
​

留心：由于上面的三个特征都是 CSS3 的特征，没有阅览器可以兼容，所以要在前面加一个-webkit- 来兼容一部分阅览器。

22. CSS预处理器(sass、less)是什么？为什么要运用它们？

他们都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特别的语法/言语编译成 CSS。 例如 Less 是一种动态样式言语，将 CSS 赋予了动态言语的特性，如变量，继承，运算， 函数，LESS 既可以在客户端上工作 (支撑 IE 6+, Webkit, Firefox)，也可以在服务端工作 (凭仗 Node.js)。

为什么要运用它们？

  • 结构清晰，便于扩展。 可以方便地屏蔽阅览器私有语法差异。封装对阅览器语法差异的重复处理， 减少无意义的机械劳作。
  • 可以轻松结束多重继承。 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 仅仅在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

less 和 sass 差异

  1. Sass(Syntactically Awesome Stylesheets)是一种动态样式言语`，Sass语法归于缩排语法，比css比多出好些功用(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更简略阅览。

    Sass与Scss是什么联络?

    Sass的缩排语法，关于写惯css前端的web开发者来说很不直观，也不能将css代码参加到Sass里边，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与本来的语法兼容，仅仅用{}替代了本来的缩进。

  2. Less也是一种动态样式言语. 对CSS赋予了动态言语的特性，如变量，继承，运算， 函数. Less 既可以在客户端上工作 (支撑IE 6+, Webkit, Firefox)，也可在服务端工作 (凭仗 Node.js)。

23. 说说对媒体查询的了解？（照应式适配）

调查点: 照应式适配, 根据不同的屏幕标准, 闪现不同的作用 (设置盒子的样式)

媒体查询是自 CSS3 初步参加的一个功用。它可以进行照应式适配展现。

媒体查询由两部分组成：

  • 一个可选的媒体类型（如 screen、print 等）
  • 零个或多个媒体功用约束表达式（如 max-width: 500px、orientation: landscape 等）

这两部分毕竟都会被解析为 true 或 false 值，然后整个媒体查询值为 true，则和该媒体查询相关的样式就收效，否则就不收效。

简略来说，运用 @media 查询，可以针对不同的媒体类型定义不同的样式。@media 比如说可以针对不同的屏幕标准设置不同的样式，特别是需求设置规划照应式的页面，@media 是非常有用的。当重置阅览器大小的进程中，页面也会根据阅览器的宽度和高度从头烘托页面。

运用示例：

/* 在css样式表的定义中直接运用媒体查询 */
.container {
 width: 600px;
 height: 200px;
 background-color: pink;
 margin: 0 auto;
}
@media screen and (max-width: 767px) {
 .container {
  width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
 .container {
  width: 750px;
  }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
 .container {
  width: 980px;
  }
}
@media screen and (min-width: 1200px) {
 .container {
  width: 1170px;
  }
}
@media screen and (width: 1200px) {
 .container {
  background-color: skyblue;
  }
}

24. 说说对 CSS 工程化的了解

CSS 工程化是为了处理以下问题：

  1. 微观规划：CSS 代码怎样安排、怎样拆分、模块结构怎样规划？
  2. 编码优化：怎样写出更好的 CSS？
  3. 构建：怎样处理我的 CSS，才干让它的打包作用最优？
  4. 可维护性：代码写完了，怎样最小化它后续的改动本钱？怎样确保任何一个搭档都能轻松接手？

以下三个方向都是时下比较盛行的、普适性非常好的 CSS 工程化实践：

  • 预处理器：Less、 Sass 等；
  • 重要的工程化插件： PostCss；
  • Webpack loader 等 。

25. 怎样判别元素是否抵达可视区域

以图片闪现为例：

  • 内容抵达闪现区域的：img.offsetTop < window.innerHeight + document.body.scrollTop;

26. z-index特征在什么情况下会失效

一般 z-index 的运用是在有两个堆叠的标签，在必定的情况下控制其间一个在另一个的上方或许下方出现。z-index值越大就越是在上层。z-index元素的position特征需求是relative，absolute或是fixed。

z-index特征在下列情况下会失效：

  • 父元素position为relative时，子元素的z-index失效。处理：父元素position改为absolute或static；
  • 元素没有设置position特征为非static特征。处理：设置该元素的position特征为relative，absolute或是fixed中的一种；
  • 元素在设置z-index的一同还设置了float起浮。处理：float去除，改为display：inline-block；

27. 说说常见的CSS布局单位

常用的布局单位包含像素（px），百分比（%），em，rem，vw/vh。

（1）像素（px）是页面布局的根底，一个像素标明终端（电脑、手机、平板等）屏幕所能闪现的最小的区域，像素分为两种类型：CSS像素和物理像素：

  • CSS像素：为web开发者供应，在CSS中运用的一个抽象单位；
  • 物理像素：只与设备的硬件密度有关，任何设备的物理像素都是固定的。

（2）百分比（%），当阅览器的宽度或许高度发生改动时，通过百分比单位可以使得阅览器中的组件的宽和高跟着阅览器的改动而改动，然后结束照应式的作用。一般认为子元素的百分比相关于直接父元素。

（3）em和rem相关于px更具灵活性，它们都是相对长度单位，它们之间的差异：em相关于父元素，rem相关于根元素。

（4）vw/vh是与视图窗口有关的单位，vw标明相关于视图窗口的宽度，vh标明相关于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。

28. px、em、rem的差异及运用场景

三者的差异：

  • px是固定的像素，一旦设置了就无法由于习气页面大小而改动。
  • em和rem相关于px更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于照应式布局。
  • em是相关于其父元历来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有或许需求知道他父元素的大小。而rem是相关于根元素，这样就意味着，只需求在根元素承认一个参考值。

运用场景：

  • 关于只需求适配少部分移动设备，且分辨率对页面影响不大的，运用px即可 。
  • 关于需求适配各种移动设备，运用rem，例如需求适配iPhone和iPad等分辨率不同比较挺大的设备。

29.常见的布局方法有哪些？他们的优缺点是什么？

页面布局常用的方法有起浮、定位、flex、grid网格布局、栅格系统布局

起浮：

  • 利益：兼容性好。
  • 缺点：起浮会脱离标准文档流，因此要铲除起浮。咱们处理好这个问题即可。

必定定位

  • 利益：快捷。
  • 缺点：导致子元素也脱离了标准文档流，可实用性差。

flex 布局（CSS3中出现的）

  • 利益：处理上面两个方法的不足，flex布局比较完美。移动端底子用 flex布局。

网格布局（grid）

  • CSS3中引进的布局，很好用。代码量简化了许多。

栅格系统布局

利益：可以适用于多端设备

29. 怎样结束两栏布局

一般两栏布局指的是左面一栏宽度固定，右边一栏宽度自习气，两栏布局的详细结束：

  • 运用起浮，将左面元素宽度设置为200px，并且设置向左起浮。将右边元素的margin-left设置为200px，宽度设置为auto（默许为auto，撑满整个父元素）。
.outer {
 height: 100px;
}
.left {
 float: left;
 width: 200px;
 background: tomato;
}
.right {
 margin-left: 200px;
 width: auto;
 background: gold;
}
  • 运用flex布局，将左面元素设置为固定宽度200px，将右边的元素设置为flex:1。
.outer {
 display: flex;
 height: 100px;
}
.left {
 width: 200px;
 background: tomato;
}
.right {
 flex: 1;
 background: gold;
}

30. 怎样结束三栏布局

三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中心自习气的布局，三栏布局的详细结束：

  • 运用必定定位，左右两栏设置为必定定位，中心设置对应方向大小的margin的值。
.outer {
 position: relative;
 height: 100px;
}
​
.left {
 position: absolute;
 width: 100px;
 height: 100px;
 background: tomato;
}
​
.right {
 position: absolute;
 top: 0;
 right: 0;
 width: 200px;
 height: 100px;
 background: gold;
}
​
.center {
 margin-left: 100px;
 margin-right: 200px;
 height: 100px;
 background: lightgreen;
}
  • 运用flex布局，左右两栏设置固定大小，中心一栏设置为flex:1。
.outer {
 display: flex;
 height: 100px;
}
​
.left {
 width: 100px;
 background: tomato;
}
​
.right {
 width: 100px;
 background: gold;
}
​
.center {
 flex: 1;
 background: lightgreen;
}

怎样结束双飞翼（圣杯）布局？

1、运用定位结束两边固定中心自习气

1.1）父盒子设置左右 padding 值

1.2）给左右盒子的 width 设置父盒子的 padding 值,然后别离定位到 padding 处.

1.3）中心盒子自习气

2、运用 flex 布局结束两边固定中心自习气

2.1）父盒子设置 display:flex;

2.2）左右盒子设置固定宽高

2.3）中心盒子设置 flex:1 ;

3、运用 bfc 块级格式化上下文, 结束两边固定中心自习气

3.1）左右固定宽高，进行起浮

3.2）中心 overflow: hidden;

31. 怎样结束水平垂直居中

  • 运用必定定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。该方法需求考虑阅览器兼容问题。 
.parent { 
  position: relative;
} 
.child {  
  position: absolute;  
  left: 50%;  top: 50%;  
  transform: translate(-50%,-50%);
}
  • 运用必定定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向结束平分，可以结束水平和垂直方向上的居中。该方法适用于盒子有宽高的情况：
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
  • 运用必定定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;   /* 自身 height 的一半 */
  margin-left: -50px;  /* 自身 width 的一半 */
}
  • 运用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以结束垂直和水平的居中。该方法要考虑兼容的问题，该方法在移动端用的较多：
.parent {
    display: flex;
    justify-content:center;
    align-items:center;
}

32. 怎样根据规划稿进行移动端适配？

移动端适配主要有两个维度：

  • 适配不同像素密度， 针对不同的像素密度，运用 CSS 媒体查询，选择不同精度的图片，以确保图片不会失真；
  • 适配不同屏幕大小， 由于不同的屏幕有着不同的逻辑像素大小，所以假设直接运用 px 作为开发单位，会使得开发的页面在某一款手机上可以精确闪现，但是在另一款手机上就会失真。为了适配不同屏幕的大小，应按照比例来复原规划稿的内容。

为了能让页面的标准自习气，可以运用 rem，em，vw，vh 等相对单位。

33. 对Flex布局的了解

Flex是FlexibleBox的缩写，意为”弹性布局”，用来为盒状模型供应最大的灵活性。任何一个容器都可以指定为Flex布局。行内元素也可以运用Flex布局。

留心，设为Flex布局往后，子元素的float、clear和vertical-align特征将失效。选用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的一切子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。容器默许存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默许沿水平主轴摆放。

33.2 用flex结束骰子布局

一点

<style>
 .warp {
  display: flex;
  /* 结束 一点 布局 */
  justify-content: center;
  align-items: center;
  }
</style>

二点

<body>
  <div class="warp">
   <div class="column"><div class="pip"></div></div>
   <div class="column"><div class="pip"></div></div>
  </div>
</body>
​
<style>
 .warp {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  }
 .column {
  display: flex;
  }
 .column:nth-child(2) {
  justify-content: flex-end;
  }
</style>
​

三点

<body>
  <div class="warp">
   <div class="column"><div class="pip"></div></div>
   <div class="column"><div class="pip"></div></div>
   <div class="column"><div class="pip"></div></div>
  </div>
</body>
​
<style>
 .warp {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  }
 .column {
  display: flex;
  }
 .column:nth-child(2) {
  justify-content: center;
  }
 .column:nth-child(3) {
  justify-content: flex-end;
  }
</style>
​

四点

<body>
  <div class="warp">
   <div class="column">
    <div class="pip"></div>
    <div class="pip"></div>
   </div>
   <div class="column">
    <div class="pip"></div>
    <div class="pip"></div>
   </div>
  </div>
</body>
​
.warp {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}
.column {
 display: flex;
 justify-content: space-between;
}
​

五点

<body>
  <div class="warp">
   <div class="column">
    <div class="pip"></div>
    <div class="pip"></div>
   </div>
   <div class="column">
    <div class="pip"></div>
   </div>
   <div class="column">
    <div class="pip"></div>
    <div class="pip"></div>
   </div>
  </div>
</body>
​
.warp {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}
.column {
 display: flex;
 justify-content: space-between;
}
.column:nth-child(2) {
 justify-content: center;
}
​

六点

<body>
  <div class="warp">
   <div class="column">
    <div class="pip"></div>
    <div class="pip"></div>
   </div>
   <div class="column">
    <div class="pip"></div>
    <div class="pip"></div>
   </div>
   <div class="column">
    <div class="pip"></div>
    <div class="pip"></div>
   </div>
  </div>
</body>
​
.warp {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}
.column {
 display: flex;
 justify-content: space-around;
}
​

34. 照应式规划的概念及底子原理

照应式网站规划（Responsive Web design）是一个网站可以兼容多个终端，而不是为每一个终端做一个特定的版别。

关于原理： 底子原理是通过媒体查询（@media）查询检测不同的设备屏幕标准做处理。 关于兼容： 页面头部有必要有mate声明的viewport。

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>

35. 起浮

起浮的定义

非IE阅览器下，容器不设高度且子元素起浮时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为起浮（溢出）。

起浮的作业原理：

  • 起浮元素脱离文档流，不占有空间（引起“高度凹陷”现象）
  • 起浮元素碰到包含它的边框或许其他起浮元素的边框停留

起浮元素可以左右移动，直到遇到另一个起浮元素或许遇到它外边缘的包含框。起浮框不归于文档流中的一般流，当元素起浮之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的一般流就会体现得该起浮框不存在相同的布局模式。当包含框的高度小于起浮框的时分，此时就会出现“高度凹陷”。

起浮元素引起的问题？

  • 父元素的高度无法被撑开，影响与父元素同级的元素
  • 与起浮元素同级的非起浮元素会随从其后
  • 若起浮的元素不是第一个元素，则该元素之前的元素也要起浮，否则会影响页面的闪现结构

铲除起浮的方法：

  • 给父级div定义height特征
  • 毕竟一个起浮元素之后增加一个空的div标签，并增加clear:both样式
  • 包含起浮元素的父级标签增加overflow:hidden或许overflow:auto
  • 运用 :after 伪元素。
  • 运用clear特征铲除起浮

36. 说说对BFC的了解

BFC: 块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS烘托的一部分，是布局进程中生成块级盒子的区域，也是起浮元素与其他元素的交互约束区域。

通俗来讲：BFC是一个独立的布局环境，可以了解为一个容器，在这个容器中按照必定规则进行物品摆放，并且不会影响其它环境中的物品。假设一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。

创建BFC的条件:

  • 根元素：body；
  • 元素设置起浮：float 除 none 以外的值；
  • 元素设置必定定位：position (absolute、fixed)；
  • display 值为：inline-block、table-cell、table-caption、flex等；
  • overflow 值为：hidden、auto、scroll；

BFC的特征：

  • 垂直方向上，自上而下摆放，和文档流的摆放方法一起。
  • 在BFC中上下相邻的两个容器的margin会堆叠
  • 核算BFC的高度时，需求核算起浮元素的高度
  • BFC区域不会与起浮的容器发生堆叠
  • BFC是独立的容器，容器内部元素不会影响外部元素
  • 每个元素的左margin值和容器的左border相接触

BFC的作用：

  • 处理margin的堆叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就处理了margin堆叠的问题。
  • 处理高度凹陷的问题：在对子元素设置起浮后，父元素会发生高度凹陷，也就是父元素的高度变为0。处理这个问题，只需求把父元素变成一个BFC。常用的方法是给父元素设置overflow:hidden。
  • 创建自习气两栏布局：可以用来创建自习气两栏布局：左面的宽度固定，右边的宽度自习气。左面设置float:left，右侧设置overflow: hidden。这样右边就触发了BFC，BFC的区域不会与起浮元素发生堆叠，所以两边就不会发生堆叠，结束了自习气两栏布局。

37. 什么是margin堆叠问题？怎样处理？

问题描绘： 两个块级元素的上外边距和下外边距或许会吞并（折叠）为一个外边距，其大小会取其间外边距值大的那个，这种行为就是外边距折叠。需求留心的是，起浮的元素和必定定位这种脱离文档流的元素的外边距不会折叠。堆叠只会出现在垂直方向。

核算准则： 折叠吞并后外边距的核算准则如下：

  • 假设两者都是正数，那么就去最大者
  • 假设是一正一负，就会正值减去负值的必定值
  • 两个都是负值时，用0减去两个中必定值大的那个

处理方法： 关于折叠的情况，主要有两种：兄弟之间堆叠和父子之间堆叠

（1）兄弟之间堆叠

  • 底部元素变为行内盒子：display: inline-block
  • 底部元素设置起浮：float
  • 底部元素的position的值为absolute/fixed

（2）父子之间堆叠

  • 父元素参加：overflow: hidden
  • 父元素增加通明边框：border:1px solid transparent
  • 子元素变为行内盒子：display: inline-block
  • 子元素参加起浮特征或定位

38. 说一说元素的层叠次第

层叠次第，英文称作 stacking order，标明元素发生层叠时有着特定的垂直闪现次第。下面是盒模型的层叠规则：

2022年我的面试万字总结（CSS篇）

关于上图，由上到下别离是：

（1）布景和边框：树立其时层叠上下文元素的布景和边框。

（2）负的z-index：其时层叠上下文中，z-index特征值为负的元素。

（3）块级盒：文档流内非行内级非定位后代元素。

（4）起浮盒：非定位起浮元素。

（5）行内盒：文档流内行内级非定位后代元素。

（6）z-index:0：层叠级数为0的定位元素。

（7）正z-index：z-index特征值为正的定位元素。

留心: 当定位元素z-index:auto，生成盒在其时层叠上下文中的层级为 0，不会树立新的层叠上下文，除非是根元素。

39. position 的值有哪些，别离有哪些作用？

静态定位：static 默许值不脱离文档流，top，right，bottom，left 等特征不收效

必定定位：absolute 必定定位的要害是找对参照物，找到最近的一级带有带定位的父级元素进行方位移动假设找不到，那么相关于阅览器窗口进行定位

注：

设置了 position:absolute;特征后，元素会脱离正常文档流，不在占有空间；

左右 margin 为 auto 将会失效；

通过 left、top、bottom、right 来抉择元素方位。

相对定位：relative 参照物：元素偏移前方位

注：

设置了相对定位，左右 margin 为 auto 依然有用、并且不会脱离文档流。

固定定位：fixed 参照物：阅览器窗口；

注：

固定定位会脱离文档流；

当必定定位和固定定位参照物都是阅览器窗口时的差异： 当出现翻滚条时，固定定位的元素不会随从翻滚条翻滚，必定定位会随从翻滚条翻滚

40. absolute与fixed一起点与不同点

一起点：

  • 改动行内元素的出现方法，将display置为inline-block
  • 使元素脱离一般文档流，不再占有文档物理空间
  • 掩盖非定位文档元素

不同点：

  • abuselute与fixed的根元素不同，abuselute的根元素可以设置，fixed根元素是阅览器。
  • 在有翻滚条的页面中，absolute会跟着父元素进行移动，fixed固定在页面的详细方位。

41. display、float、position的优先级联络

（1）首要判别display特征是否为none，假设为none，则position和float特征的值不影响元素毕竟的体现。

（2）然后判别position的值是否为absolute或许fixed，假设是，则float特征失效，并且display的值应该被设置为table或许block，详细转化需求看初始转化值。

（3）假设position的值不为absolute或许fixed，则判别float特征的值是否为none，假设不是，则display的值则按上面的规则转化。留心，假设position的值为relative并且float特征的值存在，则relative相关于起浮后的毕竟方位定位。

（4）假设float的值为none，则判别元素是否为根元素，假设是根元素则display特征按照上面的规则转化，假设不是，则坚持指定的display特征值不变。

总的来说，可以把它看作是一个类似优先级的机制，”position:absolute”和”position:fixed”优先级最高，有它存在的时分，起浮不起作用，’display’的值也需求调整；其次，元素的’float’特性的值不是”none”的时分或许它是根元素的时分，调整’display’的值；毕竟，非根元素，并且非起浮元素，并且非必定定位的元素，’display’特性值同设置值。

42. 对 sticky 定位的了解

sticky 英文字面意思是张贴，所以可以把它称之为粘性定位。语法：position: sticky; 基于用户的翻滚方位来定位。

粘性定位的元素是依赖于用户的翻滚，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面翻滚超出政策区域时，它的体现就像 position:fixed; ，它会固定在政策方位。

元素定位体现为在跨过特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其间之一，才可使粘性定位收效。否则其行为与相对定位相同。

43. 怎样结束一个三角形

宽高设为0，给边框设置宽度，然后给一个边框设置颜色，其他边框设置通明

div {
  width: 0;
  height: 0;
  border: 100px solid transparent;
  border-bottom-color: red;
}

2022年我的面试万字总结（CSS篇）

44. 结束一个扇形

用CSS结束扇形的思路和三角形底子一起，就是多了一个圆角的样式，结束一个90的扇形：

div{
  border: 100px solid transparent;
  width: 0;
  heigt: 0;
  border-radius: 100px;
  border-top-color: red;
}

2022年我的面试万字总结（CSS篇）

45. 怎样画一条0.5px的线

  • 选用transform: scale()的方法，该方法用来定义元素的2D 缩放转化：
transform: scale(0.5,0.5);

46.移动端有哪些常见的问题，都是怎样处理的？

点击工作300MS推迟问题 处理方案：下载fastclick的包

H5页面窗口自动调整到设备宽度，并制止用户缩放页面

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

忽略Android平台中对邮箱地址的识别

<meta name="format-detection" content="email=no">

当网站增加到主屏幕快速发起方法，可躲藏地址栏，仅针对ios的safari

<!-- ios7.0版别往后，safari上已看不到作用 -->
​
<meta name="apple-mobile-web-app-capable" content="yes">

47. 怎样结束CSS 动画

CSS3动画可以不必鼠标触发,自动,重复的实行某些动画.

需求先定义动画然后再调用它.

定义动画的语法是: @keyframes 动画称号{from{}to{}}

调用动画的语法是: 动画称号 duration(动画时长) timing-function(速度曲线) delay(推迟时间) iteration-count(重复次数) direction(动画方向) fill-mode(实行结束时情况)

其间,动画称号和动画时长有必要赋值.

48. 怎样定义运用 css 变量

定义变量可分多种情况： 1、定义全局变量

:root {
 --borderColor: #ccc;
}
运用：
width:var(--borderColor);

2、定义某元素下的变量

.look{
 --borderColor: #ccc;
}

3、定义媒体查询下的变量

@media screen and (min-width: 1025px) {
   :root { 
    --borderColor: #ccc;
　　 }
}
运用：
.has-border-table > tr > td {
 border-right: 1px solid var(--borderColor);
}

less中定义变量

定义：
@bg-color : #d9d9d9;
运用：
.has-border-table > tr > td {
 border-right: 1px solid var(@bg-color);
}

sass中定义变量

定义：
$bg-color : #d9d9d9;
运用：
.has-border-table > tr > td {
 border-right: 1px solid var($bg-color);
}

49.CSS怎样处理阅览器兼容问题

CSS3特征针对不同阅览器内核兼容写法:

-webkit- 针对webkit内核

-moz- 针对火狐内核

-ms- 针对IE内核

-o- 针对opera内核

50. 怎样了解 z-index？

可以将它看做三维坐标系中的z轴方向上的图层层叠次第。

元素默许的 z-index 为 0，可通过批改 z-index 来控制设置了postion 值的元素的图层方位。

可以将这种联络幻想成一摞书本，通过 z-index 可以改动一本书在这摞书中的上下方位。

z-index的小坑, 假设父辈元素有定位, 且装备了z-index, 优先按照父辈元素的定位的z-index进行比较层级

51. margin-top 的百分比相对谁，例如 margin-top: 50% 是什么意思

margin的百分比是相关于父元素的宽度

52. 说一下 Less 你用过哪些特性（除了变量、嵌套、核算，再找几条）

（1）变量：运用@来定义变量，变量名自定义。

// 定义变量
@color: #00f;
// 运用变量
h1 {
  color: @color;
}

字符串插值

// 语法
@variable: "xxx";
将变量放入到{}中 
@{variable}

// 运用
@url: "/images/";
div {
 width: 200px;
 height: 200px;
 background-image: url("@{url}1.jpg"); // 作用为/images/1.jpg
}

媒体查询定义变量的方法

// 由于“~”后面的值是不被编译的，所以可以用作媒体查询的参数。
@mediaQuery: ~"(max-width: 600px)";
​
@media screen and @mediaQuery {
 div {
  width: 200px;
  height: 200px;
  background-color: #898900;
  }
}

（2）嵌套

Less供应了运用嵌套替代层叠或与层叠结合运用的才干。运用Less书写可以模仿HTML的安排结构。

（3）核算

（4）命名空间

定义一个命名空间，可以运用任何的类/ID选择器，作为命名空间，此时命名空间的性质类似于函数。

这儿定义了一个命名空间（例如：.my()），使其在编译之后的文件中不输出。可以在这个命名空间中书写混合。运用命名空间中的混合，类似于后代选择器（> 或 “）相同选择指定的选择器进行运用。

53. 罗列 5 个以上的 H5 input 元素 type 特征值？

值 描绘
text 默许。定义单行输入字段，用户可在其间输入文本。默许是 20 个字符
password 定义暗码字段。字段中的字符会被遮盖
radio 定义单选按钮
checkbox 定义复选框
submit 定义提交按钮。提交按钮向服务器发送数据
button 定义可点击的按钮（大多与 JavaScript 运用来发起脚本）
email 定义用于 e-mail 地址的文本字段
search 定义用于查找的文本字段
file 定义输入字段和 “阅览…” 按钮，供文件上传
hidden 定义躲藏输入字段
image 定义图像作为提交按钮
url 定义用于 URL 的文本字段
number 定义带有 spinner 控件的数字字段
color 定义拾色器
date 定义日期字段（带有 calendar 控件）
month 定义日期字段的月（带有 calendar 控件）
time 定义日期字段的时、分、秒（带有 time 控件）

54. rem 适配方法怎样核算 HTML 根字号及适配方案？

通用方案

  1. 运用媒体查询，根据不同设备按比例设置html文字大小，然后页面元素运用rem作为标准单位，当html大小改动时，元素也会发生改动，然后抵达等比缩放的适配

  2. ①页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数） ②屏幕宽度/划分的份数就是 html font-size(根字号) 的大小

    以750的标准为例，把屏幕划分为15等份，那么html根字号的大小就是750/15=50px。rem就是元素的px/根子号。100px的宽度就等于100/50=2rem

优：有必定适用性，换算也较为简略

劣：有兼容性的坑，对不同手机适配不是非常精准；需求设置多个媒体查询来习气不同 手机，单某款手机标准不在设置规划之内，会导致无法适配

网易方案

  1. 拿到规划稿除以 100，得到宽度 rem 值
  2. 通过给 html 的 style 设置 font-size，把 1 里边得到的宽度 rem 值代入 x document.documentElement.style.fontSize = document.documentElement.clientWidth / x + ‘px’;
  3. 规划稿 px/100 即可换算为 rem

优：通过动态根 font-size 来做适配，底子无兼容性问题，适配较为精准，换算简洁

劣：无 viewport 缩放，且针对 iPhone 的 Retina 屏没有做适配，导致对一些手机的适配不是很到位

手淘方案

  1. 拿到规划稿除以 10，得到 font-size 基准值
  2. 引进 flexible
  3. 不要设置 meta 的 viewport 缩放值
  4. 规划稿 px/ font-size 基准值，即可换算为 rem

优：通过动态根 font-size、viewport、dpr 来做适配，无兼容性问题，适配精准。

劣：需求根据规划稿进行基准值换算，在不运用 sublime text 编辑器插件开发时， 单位核算杂乱

55. Bootstrap 栅格系统的作业原理？

原理:

1、行（row）有必要包含在 .container (固定宽度)或 .container-fluid (100%宽度)中，以便为其赋予适宜的摆放（aligment）和内补（padding）

2、通过行（row）在水平方向创建一组列（column）

3、自己内容应当放置于列（column）内，并且只需列可以作为行（row）的直接子元素

4、类似.row 和.col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码 中定义的 mixin 也可以用来创建语义化布局

5、通过为列设置 padding 特征，然后创建列与列之间的间隔（gutter）。通过为.row 元 素设置负值 margin 然后抵消为.container 元素设置的 padding，也就直接为行（row） 所包含的列（column）抵消掉了 padding

6、栅格系统的列是通过指定 1 到 12 的值来标明其跨过规划。例如三个等宽的列可以运用 三个.col-xs-4 来创建

7、假设一行（row）中包含了的列（column）大于 12，剩下的列地址的元素将作为一个 全体另起一行摆放

8、栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕掩盖栅格类

56.运用 CSS 怎样让 Chrome 支撑小于 12px 的文字比如 10px？

针对谷歌阅览器内核，加 webkit 前缀，用 transform:scale()这个特征进行缩放。

 <style>
  p span {
   font-size: 10px;
   -webkit-transform: scale(0.8);
   display: block;
   }
 </style>
<body>
 <p>
  <span>运用 CSS 怎样让 Chrome 支撑小于 12px 的文字</span>
 </p>
</body>

57. 阅览器是怎样解析CSS选择器的？

在生成烘托树的进程中，烘托引擎会根据选择器供应的信息来遍历 DOM 树，找到对应的 DOM 节点后将样式规则附加到上面。

阅览器遵照 “从右往左” 的规则来解析 CSS 选择器！

从右往左：span => h3 => .mod-nav

  1. 先找到一切的 span 节点 ，然后基于每⼀个 span 再向上查找 h3

  2. 由 h3 再向上查找 .mod-nav 的节点

  3. 毕竟触及根元素 html 结束该分⽀遍历

    …

从右向左的匹配规则, 只需第一次会遍历一切元素找节点, 而剩下的就是在看父辈祖辈是否满足选择器的条件, 匹配功率大大提高!

58. less和sass里的深度选择器是什么，怎样用？

在项目开发时，关于运用的一些组件库，例如element-ui，在有些时分会不符合ui的规划图，这时分咱们就要批改一下组件的样式。

当 <style> 标签有 scoped 特征时，它的 CSS 只作用于其时组件中的元素。去除后则没有这种作用，不过这种方法或许会导致全局污染，不推荐。这个时分就需求用深度选择器了。

less: /deep/ 新版别语法：:deep(类名)

sass：::deep