# CSS 基础面试 ## 1 垂直居中的 3 种以上 ::: details [参考链接](https://mp.weixin.qq.com/s/r17roT-aEdElmmgNeg7qdg) > 在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素居中是一个非常基础但又是非常重要的应用场景，实现居中的方法存在很多，可以将这些方法分成两个大类： - 居中元素（子元素）的宽高已知 - 居中元素宽高未知实现方法： 1. 利用定位+margin:auto ```html /*利用定位+margin:auto*/

``` 父级设置为相对定位，子级绝对定位，并且四个定位属性的值都设置了 0，那么这时候如果子级没有设置宽高，则会被拉开到和父级一样宽高这里子元素设置了宽高，所以宽高会按照我们的设置来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个`margin：auto`它就可以上下左右都居中了如果只实现垂直居中，则只设置 top,bottom 值为 0 要实现水平居中当然是只设置 right,left 为 0 就好啦. 2. 利用定位+margin:负值绝大多数情况下，设置父元素为相对定位，子元素移动自身 50%实现水平垂直居中 IE 版本都可以兼容 ```css

``` 整个实现思路如下图所示： ![](https://cdn.jsdelivr.net/gh/Ignorant-Cirle/images@master/blog/image.719hjoo2eo80.png) - 初始位置为方块 1 的位置 - 当设置 left、top 为 50%的时候，内部子元素为方块 2 的位置 - 设置 margin 为负数时，使内部子元素到方块 3 的位置，即中间位置这种方案不要求父元素的高度，也就是即使父元素的高度变化了，仍然可以保持在父元素的垂直居中位置，水平方向上是一样的操作但是该方案需要知道子元素自身的宽高，但是我们可以通过下面`transform`属性进行移动 3. 利用定位+transform ```html

``` `translate(-50%, -50%)`将会将元素位移自己宽度和高度的-50% 这种方法其实和最上面被否定掉的 margin 负值用法一样，可以说是`margin`负值的替代方案，并不需要知道自身元素的宽高 4. flex 弹性布局 ```html

``` `css3`中了`flex`布局，可以非常简单实现垂直水平居中首先解释一下 flex 布局，Flex 是 Flexible Box 的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。采用 Flex 布局的元素，被称为 Flex 容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，成为 Flex 项目(Flex item)，简称“项目”。注意，设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。这里可以简单看看`flex`布局的关键属性作用： - display: flex 时，表示该容器内部的元素将按照 flex 进行布局 - align-items: center 表示这些元素将相对于本容器垂直居中 - justify-content: center 也是同样的道理水平居中 5. grid 网格布局 ```html

``` `gird`网格布局和`flex`弹性布局都简单粗暴 6. table 布局设置父元素为`display:table-cell`，子元素设置 `display: inline-block`。利用`vertical`和`text-align`可以让所有的行内块级元素水平垂直居中 ```html

``` 小结：上述方法中，不知道元素宽高大小仍能实现水平垂直居中的方法有： - 利用定位+margin:auto - 利用定位+transform - 利用 table - flex 布局 - grid 布局总结：根据元素标签的性质，可以分为： - 内联元素居中布局 - 块级元素居中布局内联元素居中布局水平居中 - 行内元素可设置：text-align: center - flex 布局设置父元素：display: flex; justify-content: center 垂直居中 - 单行文本父元素确认高度：height === line-height - 多行文本父元素确认高度：disaply: table-cell; vertical-align: middle 块级元素居中布局水平居中 - 定宽: margin: 0 auto - 绝对定位+left:50%+margin:负自身一半垂直居中 - position: absolute 设置 left、top、margin-left、margin-top(定高) - display: table-cell - transform: translate(x, y) - flex(不定高，不定宽) - grid(不定高，不定宽)，兼容性相对比较差 ::: ## 2 行内元素和块级元素的区别 ::: details 注意 input 和 img 是行内块元素行内元素： - 设置宽高无效 - 但可以设置水平方向的 margin 和 padding 属性，不可以设置垂直方向的 padding 和 margin - 不会自动换行块级元素 - 可以设置宽度和高度 - 设置 padding 都有效 - 可以自动换行 - 多个块状，默认的排列是从上到下 ::: ## 3 CSS 的引入方式有哪些？link 和@import 的区别是什么？ ::: details CSS 引入有三种方式 - 行内式：将样式写在元素的 style 属性内 - 内嵌式：将样式写在 style 元素内 - 外链式：通过 link 标签，引入 CSS 文件内的样式区别： - @import 是 CSS 提供的语法规则，只有导入样式表的作用；link 是 HTML 提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS，rel 连接属性等； - 加载页面时，link 引入的 CSS 被同时加载，@import 引入的 CSS 将在页面加载完毕后加载； - link 标签作为 HTML 元素，不存在兼容性问题，而@import 是 CSS2.1 才有的语法，故老版本浏览器（IE5 之前）不能识别； - 可以通过 JS 操作 DOM，来插入 link 标签改变样式；由于 DOM 方法是基于文档的，无法使用@import 方式插入样式； - 建议使用 link 的方式引入 CSS ```html ``` main1.css 和 main2.css 同时开始加载，先加载完成的优先解析，但最后渲染的时候还是按照引入的顺序执行的。如果 main1.css 和 main2.css 中有相同的选择器规则，那么 main2.css 中的规则将合并 main1.css 的规则注意：link 标签是同时加载的， script 标签才会加载完一个再加载另一个 [link 和@import 详解以及脚本执行顺序探讨](https://blog.csdn.net/chen_hua89/article/details/50824603) ::: ## 4 display 的常用属性值有哪些 ::: details | disply:none | 表示此元素不会被显示 | | -------------------- | ------------------------------------------------------------ | | display:block | 该属性会把元素转换为块级元素，此元素前后会带有换行符，因此就可以设置元素的宽高和上下的 margin 和 padding | | display:inline | 此元素会被显示为内联元素，元素前后没有换行符，即 display:inline 的作用即可以将一个块级元素转换成行内元素，那么这个块级元素将不能再设置宽和高以及上下方向的 margin 和 padding。 | | display:inline-block | 设置了 inline-block 属性的元素既具有 block 元素可以设置 width 和 height 属性的特性，又保持了 inline 元素不换行的特性，也可以设置上下方向的 margin 和 padding。
例如 ul li a 标签组合 float：left 做成的横向导航用 display：inline-block 属性就可以完成： | | display:inherit | 规定应该从父元素继承 display 属性的值 | ::: ## 5 visibility:hidden 和 display:none 的区别 ::: details 1. 两者都可以实现元素隐藏的效果 2. display:none 隐藏的元素不占用空间，而 visibility:hidden 隐藏的元素会占据空间 3. visibility 属性具有继承性，如果父元素也设置了 visibility:hidden，那么子元素也会被隐藏，但如果子元素设置为 visibility:visible 的话又会重新显示，而父元素如果设置 display:none 的话，子元素的 display 无论设置为什么都无法显示 4. visibility:hidden 不会影响 CSS 中的 counter 的计数，display:none 则会影响 ```html

给元素设置visibility:hidden样式

元素1
元素2
元素3
元素4

给元素设置display:none样式

元素1
元素2
元素3
元素4

``` visibility 的其他属性：hidden、visible、inherit、collapse（当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"） ::: ## 6 CSS 盒模型 ::: details CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：`外边距（margin）`、`边框（border）`、`内边距（padding）`、`实际内容（content）`四个属性。 CSS 盒模型：**标准模型 + IE 模型** 计算宽度和高度的不同。标准盒模型：盒子总宽度/高度 = `width/height + padding + border + margin`。（即 width/height 只是内容高度，不包含 padding 和 border 值） ![](https://cdn.jsdelivr.net/gh/Ignorant-Cirle/images@master/blog/image.68acy8kxa0c0.png) IE 盒子模型：盒子总宽度/高度 = `width/height + margin = (内容区宽度/高度 + padding + border) + margin`。（即 width/height 包含了 padding 和 border +content 值） ![](https://cdn.jsdelivr.net/gh/Ignorant-Cirle/images@master/blog/image.14jxwkvuig2k.png) 标准（W3C 标准）：`box-sizing: content-box;` ( 浏览器默认设置 ) IE： `box-sizing: border-box;` 回答： > - 有两种， `IE`盒子模型、`W3C`盒子模型； > - 盒模型：内容(content)、填充(`padding`)、边界(`margin`)、边框(`border`)； > - 区别： `IE`的`content`部分把 `border` 和 `padding`计算了进去; - 盒子模型构成：内容(`content`)、内填充(`padding`)、边框(`border`)、外边距(`margin`) - `IE8`及其以下版本浏览器，未声明 `DOCTYPE`，内容宽高会包含内填充和边框，称为怪异盒模型(`IE`盒模型) - 标准(`W3C`)盒模型：元素宽度 = `width + padding + border + margin` - 怪异(`IE`)盒模型：元素宽度 = `width + margin` - 标准浏览器通过设置 css3 的 `box-sizing: border-box` 属性，触发“怪异模式”解析计算宽高 ::: ## 7 position 有哪些属性有什么作用? ::: details position 的属性由 relative，absolute，fixed，static，inherit，sticky [定位-position](http://interview.poetries.top/docs/guide.html#%E5%AE%9A%E4%BD%8D-position) 1. relative relative(相对定位)，是指元素设置相对于原来位置的定位，元素不会脱离文档流，因此元素原来的位置会被保留。其他元素的位置不会受到影响。是将元素相对于它在标准流中的位置进行定位，通过设置偏移属性（left、top、right、bottom 值）可将其移至相对于**它自己原来的位置**的定位，不会破坏正常的布局流，它在文档流中的位置仍然保留。当 relative 元素未使用定位属性进行相对定位时，它不会被周围的元素忽略，但利用定位属性进行定位后，周围的元素会忽略 relative 元素的移动，它们会认为 relative 元素仍然在原来的位置，并未进行移动 - 注意 1. 相对定位通过偏移改变位置，但原来的的位置继续占有（人走了，位置还占着） 2. 相对定位是相对于自己来移动位置，以自己的左上角为基点移动。 3. 相对定位不脱标，盒子仍在标准流中。如果说浮动的主要目的是让多个块级元素一行显示，那么定位的主要价值就是移动位置，让盒子到我们想要的位置上去。 **使用场景：子元素相对于父元素进行定位** 2. absolute 相对于 `static` 定位以外的第一个父元素进行定位 - `absolute` 元素脱离了文档结构。和 `relative` 不同，只要元素会脱离文档结构，它就会产生破坏性，导致父元素坍塌。（此时你应该能立刻想起来，`float` 元素也会脱离文档结构。） - `absolute` 元素具有“包裹性”。之前`

`的宽度是撑满整个屏幕的，而此时`

`的宽度刚好是内容的宽度。 - `absolute` 元素具有“跟随性”。虽然 `absolute` 元素脱离了文档结构，`但是它的位置并没有发生变化`，还是老老实实地呆在它原本的位置，因为我们此时没有设置 top、left 的值。 - `absolute` 元素会悬浮在页面上方，会遮挡住下方的页面内容。(覆盖顺序与标签写的时候的先后顺序有关比如：div1 设置定位，div2 设置定位，1 在 2 前，是 2 覆盖 1，但调换位置，而 1 覆盖 2，注意这个与 CSS 写的顺序无关，这个可以通过`z-index`来设置） absolute（绝对定位）是指给元素设置绝对的定位，绝对定位的对象可以分为两种情况： - 设置了 absolute 的元素如果存在祖先元素设置了 `position` 属性非 `static`，则此时元素的定位对象为以设置的 position 属性的祖先元素 - 如果没有设置 position 属性的祖先元素，则此时相对于 html 根元素（body）进行定位 - body 要变位置，势必要设置为非 static，才能使用 left right 等属性，也就是便成为非 static 属性了使用场景：[参考](https://www.cnblogs.com/xiaohuochai/p/5315942.html) - 跟随图标：图标使用不依赖定位父级的 absolute 和 margin 属性进行定位，这样当文本的字符个数改变时，图标的位置可以自适应 - 视频提示：一般视频图片上的边角上都会由"自制"、"最新"、"1080p"等诸如此类的提示。使用不依赖的绝对定位属性，可以让父级元素不设置 relative，拓展性更强 - 边缘对齐 - 九宫格 3) fixed 可以认为 fixed 是特殊版的 absolute，fixed 元素将会脱离正常的文档流，所以它与 absolute 元素很相似，同样会被周围元素忽略，支持 top,bottom,left,right 属性，但两者仍有很大不同。首先，fixed 元素定位与它的父元素无任何关系，它永远是相对最外层的 window 进行定位的。第二，fixed 元素正如它的名字一样，它是固定在屏幕的某个位置，它不会因为屏幕的滚动而消失。使用场景：侧边栏或者广告图等 4. inherit 继承父元素的 position 属性，但需要注意的是 IE8 以及往前的版本都不支持 inherit 属性。 5. sticky(兼容性不是很好) `sticky保留文档普通流定位` 基本上，可以看出是`position:relative`和`position:fixed`的结合体——当元素在屏幕内，表现为 relative，就要滚出显示器屏幕的时候，表现为 fixed 设置 sticky 的元素，在屏幕范围时该元素的位置不受到定位的影响，（设置 top，left 等属性都是无效的），当该元素的位置将要偏出范围时，定位由会变为 fixed，根据设置的 left 和 top 等属性成固定位置的效果当元素在容器中被滚动超出指定的偏移值时，元素在容器内固定在指定位置，亦即如果你设置了 top: 50px，那么在 sticky 元素到达距离相对定位的元素顶部 50px 的位置时固定，不再向上移动（相当于此时 fixed 定位）。 [position:sticky](https://www.zhangxinxu.com/wordpress/2018/12/css-position-sticky/) 特性（坑）： 1. sticky 不会触发 BFC， 2. z-index 无效， 3. 当父元素的 height：100%时，页面滑动到一定高度之后 sticky 属性会失效。 4. 父元素不能有 overflow:hidden 或者 overflow:auto 属性。 5. 父元素高度不能低于 sticky 高度，必须指定 top、bottom、left、right4 个值之一。适用场合：一开始不显示，滚动到一定位置需要显示的元素 6. static 为 position 属性的默认值，static 元素会遵循正常的文档流，且会忽略 top,bottom,left,right 等偏移属性。 z-index 为什么要在这里提到 z-index 属性呢？那是因为 z-index 属性只对定位元素有效，即 position 值为 absolute,relative,fixed 时才有效。 z-index 值代表的是元素的堆叠顺序，值越高则显示顺序越优先。当 z-index 值相同`(一般默认是0）`时，后加载的元素显示优先。 ::: ## 8 对 css 的 BFC 的理解 ::: details 1. 是什么： BFC(Block Formatting Context)块级格式化上下文，是用于布局块级盒子的一块渲染区域，MDN 上的解释是:BFC 是 Web 界面 CSS 视觉渲染的一部分，是用来决定块盒子的布局以及浮动相互影响范围的一块区域注意：一个 BFC 的范围包含创建该上下文元素的所有子元素，但**不包括**创建了新 BFC 的子元素的内部元素。这从另一方角度说明，一个元素不能同时存在于两个 BFC 中。因为如果一个元素能够同时处于两个 BFC 中，那么就意味着这个元素能与两个 BFC 中的元素发生作用，就违反了 BFC 的隔离作用。 2. BFC 的触发方式 - 根元素，HTML 标签 - 浮动元素：float 为 left、right - overflow 值不为 visible，为 `auto`、 `scroll`、 `hidden` - display 值为 `inline-block`、 `table-cell`、 `table-caption`、 `table`、 `inline-table`、 `flex`、 `inline-flex`、 `grid`、 `inline-grid` - 定位元素：position 值为 `absolute`、 `fixed` display:table 也可以生成 BFC 的原因在于 Table 会默认生成一个匿名的 table-cell，是这个匿名的 table-cell 生成了 BFC。 3. BFC 的布局规则 - 内部的 Box 会在垂直方向，一个接一个地放置 - Box 垂直方向的距离由 margin 决定，但属于同一个 BFC 的两个相邻的 Box 的 margin 会发生重叠 - 每个盒子（块盒与行盒）的 margin box 的左边，与包含 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 - BFC 的区域不会与 float box 重叠 - BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也是如此 - 计算 BFC 的高度时，浮动元素也会参与计算 4. BFC 的作用（[参考](https://blog.csdn.net/sinat_36422236/article/details/88763187?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-10.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-10.control)） - **利用 BFC 避免 margin 重叠** - **自适应两栏布局** - 清除浮动 5. 总结： BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。因为 BFC 内部的元素和外部的元素绝对不会互相影响，因此，当 BFC 外部存在浮动时，它不应该影响 BFC 内部 Box 的布局，BFC 会通过变窄，而不与浮动有重叠。同样的，当 BFC 内部有浮动时，为了不影响外部元素的布局，BFC 计算高度时会包括浮动的高度。避免 margin 重叠也是这样的一个道理。 ::: ## 9 CSS 实现九宫格 ::: details [参考链接](https://mp.weixin.qq.com/s/JNZJfv1QKmXII-kVXzqcyQ) **1 margin 负值实现** **2 祖父和亲爹的里应外合** **3 换个思路 - li 生个儿子帮大忙** **4** **借助 absolute 方位值，实现自适应的网格布局** **5** **column 多栏布局** **6** **grid 网格布局** **7** **display:table 伪表格布局** **8** **css3 选择器 nth-child()** ::: ## 10 CSS 实现轮播图 ::: details [参考链接](https://www.bilibili.com/video/BV1Bt4y1S7kv?from=search&seid=4064254294712031295) [博客](https://blog.csdn.net/qq_45904930/article/details/118863280) ::: ## 11 CSS 优先级 ::: details CSS 基本选择器有 ID 选择器、属性选择器和类选择器。 CSS 选择器的权重预示着 CSS 样式渲染的先后顺序，元素样式渲染时，权重高的选择器将会覆盖权重低的选择器通常权重分为 4 个等级，可以用 1000 表示这四个等级 `!important` 关键字优先级最高 - `!impotant` 并非选择器，而是针对选择器内的单一样式设置的，当然不同选择器内应用`!important`的权重也是不一样的，例如 id 选择器中的`!important`关键字权重要高于类选择器中的`!important`关键字权重。内联样式（非元素选择器）的优先级可以看作 1000 ID 选择器的优先级为 100 类属性选择器，属性选择器([type=text]之类的)、伪类选择器的优先级为 10 元素选择器、伪元素选择器的优先级为 1 通配符选择器对特殊性选择器没有任何贡献价值当把选择器组合使用时，相应的层级权重也会递增，例如#id.class 的权重为 110 ::: ## 14 浮动元素引起的问题和解决方法是什么？ ::: details 引起的问题： - 父元素的高度无法被撑开，影响与父元素同级的元素什么叫高度坍塌 1. 父元素不写高，靠子元素撑起高度, 2. 所有子元素都浮动那么所有子元素都脱离文档流，父元素认为自己内部没有元素了所以父元素就没有高度了 - 与元素同级的非浮动元素会紧随其后（类似于遮盖现象） - 如果一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面的显示结构，即会出现串行问题解决方法： - 为父元素设置固定高度 - 为父元素设置 overflow：hidden 即可清除浮动，让父元素的高度撑开 - 用 clear:both 样式清除元素浮动（只有左浮动或右浮动时可以单独设置 clear:left 或 clear:right，但是设置 clear:both 都能解决，所以工作中用这种方法比较多) - 外墙法：指在父元素外面添加“一道墙”，设置属性为 clear:both - 内墙法：指在父元素内部，浮动元素的最后面添加“一道墙”，设置属性为 clear:both - 伪元素法：为对父元素添加 after 伪元素，设置属性：`content:''`; display:block; clear:both - 使用通用类 clearfix，clearfix 的实现如下(推荐使用) ```css .clearfix:after { content: ''; display: block; clear: both; } ``` **需要注意的是**：解决父元素高度塌陷的通常解决办法是在父元素中开启 BFC。当子元素脱离文档流的原因是 float，则可以通过开启 BFC 解决。但是如果子元素脱离文档流是因为`absolute`或者`fixed`，则开启 BFC 同样不管用。这种情况下，CSS 没有办法解决，只能通过 JS 获取子元素的高度然后赋值给父元素来解决。或者是直接设置父元素的固定高度或最小高度 ```html

``` [HTML img 和 picture 使用实例](https://blog.csdn.net/qq_36157085/article/details/115598886) ::: ## 18 继承属性和不可继承属性 ::: details 1. 无继承性的属性 - display：规定元素应该生成的框的类型 - 文本属性： vertical-align：垂直文本对齐 text-decoration：规定添加到文本的装饰 text-shadow：文本阴影效果 white-space：空白符的处理 unicode-bidi：设置文本的方向 - 盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left - 背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment - 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index - 生成内容属性：content、counter-reset、counter-increment - 轮廓样式属性：outline-style、outline-width、outline-color、outline - 页面样式属性：size、page-break-before、page-break-after - 声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during 2. 有继承性的属性 - 字体系列属性 font：组合字体 font-family：规定元素的字体系列 font-weight：设置字体的粗细 font-size：设置字体的尺寸 font-style：定义字体的风格 font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。 font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。 font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。 - 文本系列属性 text-indent：文本缩进 text-align：文本水平对齐 line-height：行高 word-spacing：增加或减少单词间的空白（即字间隔） letter-spacing：增加或减少字符间的空白（字符间距） text-transform：控制文本大小写 direction：规定文本的书写方向 color：文本颜色 - 元素可见性：visibility - 表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout - 列表布局属性：list-style-type、list-style-image、list-style-position、list-style - 生成内容属性：quotes - 光标属性：cursor - 页面样式属性：page、page-break-inside、windows、orphans - 声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation 3. 所有元素可以继承的属性 - 元素可见性：visibility - 光标属性：cursor 4. 内联元素可以继承的属性 - 字体系列属性 - 除 text-indent、text-align 之外的文本系列属性 5. 块级元素可以继承的属性 text-indent、text-align ::: ## 19 合成层 ::: details [合成层](https://blog.csdn.net/weixin_42370640/article/details/105690386) 一般来说，可以把普通文档流看成一个图层。特定的属性可以生成一个新的图层。不同的图层渲染互不影响，所以对于某些频繁需要渲染的建议单独生成一个新图层，提高性能。但也不能生成过多的图层，会引起反作用。 **通过以下几个常用属性可以生成新图层** - `3D` 变换：`translate3d`、`translateZ` - `will-change` - `video`、`iframe` 标签 - 通过动画实现的 `opacity` 动画转换 - `position: fixed` Composite：渲染层合并，由上一步可知，对页面中 DOM 元素的绘制是在多个层上进行的。在每个层上完成绘制过程之后，浏览器会将所有层按照合理的顺序合并成一个图层，然后显示在屏幕上。对于有位置重叠的元素的页面，这个过程尤其重要，因为一旦图层的合并顺序出错，将会导致元素显示异常。 ::: ## 20 nth-child 和 nth-of-type ::: details 给出下列 HTML 语句，下列哪些选择器会选择出一个带有字符串 Haha 的 p 元素 ```html

Hehe

Haha

Hehe

``` 1. p:nth-child(3n+1) 选择 1 4 7 不符合题意 2. p:not(:nth-child(3n+1)) 选择非 1 4 的，也就是选择 2 3 符合题意 3. div :not(:nth-of-type(3n+1)) 注意这里有空格 4. div:not(:nth-of-type(3n+1)) ## :nth-child 定义：:nth-child(n) 选择器匹配属于**其父元素**的第 n 个子元素，**不论元素的类型**。n 可以是数字、关键词或公式。 `:nth-child(n)`：选中某个元素，该元素必须是**某个父元素**下的第 n 个子元素； `p:nth-child(n)` ：选中 p 元素，且该 p 元素必须是**某个父元素下**的第 n 个子元素 **注意**：n 是从**1**开始的。只会选中第二个 div 中第一个子元素 p，例如： ```html nth-ch

div1 中span

div1 中第一个段落。

div1 中的最后一个段落。

div2 中第一个段落。

div2 中的最后一个段落。

``` 不会选中第一个 div 中的第一个 p，因为第一个 div 中第一个 p 元素不是第一个子元素。 - 正方向 `li:nth-child(n+6)` 选中从第 6 个开始的子元素 - 负方向 `:nth-child(-n+9)` 选中从第 1 个到第 9 个子元素。使用 :nth-child(-n+9) ，就相当让你选中第 9 个和其之前的所有子元素 - 前后限制 `:nth-child(n+4):nth-child(-n+8)` 选中第 4-8 个子元素。使用 nth-child(n+4):nth-child(-n+8) 我们可以选中某一范围内子元素，上面的例子里是从第 4 个到第 8 个子元素注意：如果这样写:nth-child(n+4):nth-child(n+8)，不是表示 4-8，而是覆盖前面的，从 8 开始所有的 - 奇数、偶数位 `:nth-child(odd)`/_奇数_/ `:nth-child(even)`/_偶数_/ - 隔离子元素 `:nth-child(3n+1),`选择 1,4,7,10… - 范围法 `nth-child(n+2):nth-child(odd):nth-child(-n+9)`使用 nth-child(n+2):nth-child(odd):nth-child(-n+9) ，将会选中的子元素是从第 2 位到第 9 位，并且只包含奇数位。使用总结：p:nth-child(2); 1. p 元素是某父元素的子元素 2. 选中的第二个元素要是 p 元素 ## :nth-of-type 定义： :nth-of-type(n) 选择器匹配属于父元素的指定类型的第 n 个子元素。**注意**：n 可以是数字、关键词或公式。 `:nth-of-type(n)`：选中某个元素，该元素必须是**某个父元素**下的第 n 个子元素； `p:nth-of-type(n)` ：选中 p 元素，且该 p 元素必须是某个父元素下的第 n 个 p 元素 **注意**：n 是从**1**开始的。使用总结： :nth-of-type(2): 1. P 元素是某个父元素的子元素 2. 选择的元素是 p 类型的元素 3. 子元素 P 必须是其父元素下的第二个 P 元素其他的正负方向，前后限制，奇偶数位和范围限制和 nth-child 一样。 ::: ## 21 什么是重排（回流）和重绘？ ::: details 当 DOM 的样式或内容被修改时，将触发重新渲染。除了属性值的计算、单位换算外，渲染主要分为三个步骤：
1. 布局：计算盒模型的位置，大小 2. 绘制：填充盒模型的文字、颜色、图像、边框和阴影等可视效果 3. 合并：所有图层绘制后，按层叠顺序合并为一个图层重新渲染的途径一般有三种执行路径：重排：布局 → 绘制 → 合并重绘：绘制 → 合并不同属性的修改，会触发不同的渲染路径 - 重绘是当节点需要更改外观而不会影响布局的，比如改变 `color` 就叫称为重绘 - 回流是布局或者几何属性需要改变就称为回流。 [重绘-repaint-和回流-reflow](http://interview.poetries.top/docs/excellent.html#_21-4-%E9%87%8D%E7%BB%98-repaint-%E5%92%8C%E5%9B%9E%E6%B5%81-reflow) 减少重绘和回流 1. 使用 `transform` 替代 `top` 2. 使用 `visibility` 替换`display: none` ，因为前者只会引起重绘，后者会引发回流（改变了布局） 3. 不要使用 `table` 布局，可能很小的一个小改动会造成整个 `table` 的重新布局 4. `CSS` 选择符从右往左匹配查找，避免节点层级过多 5. 将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点。比如对于 `video` 标签来说，浏览器会自动将该节点变为图层。 > 设置节点为图层的方式有很多，我们可以通过以下几个常用属性可以生成新图层 - `will-change` - `video`、`iframe` 标签 6. 动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用 `requestAnimationFrame` requestAnimationFrame 比起 setTimeout、setInterval 的优势主要有两点： - requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒 60 帧。 - 在隐藏或不可见的元素中，requestAnimationFrame 将不会进行重绘或回流，这当然就意味着更少的的 cpu，gpu 和内存使用量。 ::: ## 22 左右两边固定距离，中间自适应的方法 ::: details 三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局，一共有五种实现方式。 1. 利用绝对定位的方式，左右两栏设置为绝对定位，中间设置对应方向大小的 margin 的值 2. 利用 flex 布局的方式，左右两栏的放大和缩小比例都设置为 0，基础大小设置为固定的大小，中间一栏设置为 auto 3. 利用浮动的方式，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的 margin 值，注意这种方式，`中间一栏必须放到最后`。 4. 圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。圣杯布局中间列的宽度不能小于两边任意列的宽度，而双飞翼布局则不存在这个问题。 5. 双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。本质上来说，也是通过浮动和外边距负值来实现的。 ::: ## 23 flex = 1 具体含义是什么 ::: details flex 是 flex-grow，flex-shrink，flex-basis 的缩写 flex: _flex-grow_ _flex-shrink_ _flex-basis_|auto|initial|inherit; | 值 | 描述 | | :------------ | :----------------------------------------------------------------------------------------------------------------------------------------------- | | _flex-grow_ | 定义弹性盒子项（flex item）的拉伸因子。 | | _flex-shrink_ | flex-shrink 属性指定了 flex 元素的收缩规则。
flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，
其收缩的大小是依据 flex-shrink 的值。 | | _flex-basis_ | 项目的长度。
合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em"
或任何其他长度单位的数字。 | | auto | 与 1 1 auto 相同。 | | none | 与 0 0 auto 相同。 | | initial | 设置该属性为它的默认值，即为 0 1 auto。请参阅 [_initial_](https://www.runoob.com/cssref/css-initial.html)。 | | inherit | 从父元素继承该属性。请参阅 [_inherit_](https://www.runoob.com/cssref/css-inherit.html)。 | 假设现在有 3 个 view 垂直布局，第一个和第三个 view 不设置 flex，中间的 view 设置 flex:1: 默认 flex 属性是 0 1 auto，【父控件有剩余空间也不放大，父控件空间不足按 1 缩小，保持本身的空间大小】 flex:1;的值是 1 1 0%，【父控件有剩余空间占 1 份放大，父控件空间不足按 1 缩小，自身的空间大小是 0%】 ::: ## 24 CSS3 新增伪类有那些？ ::: details - elem:nth-child(n)选中父元素下的第 n 个子元素，并且这个子元素的标签名为 elem，n 可以接受具体的数值，也可以接受函数 - elem:nth-last-child(n)作用同上，不过是从后开始查找。 - elem:last-child 选中最后一个子元素。 - elem:only-child 如果 elem 是父元素下唯一的子元素，则选中之 - elem:nth-of-type(n)选中父元素下第 n 个 elem 类型元素，n 可以接受具体的数值，也可以接受函数。 - elem:first-of-type 选中父元素下第一个 elem 类型元素。 - elem:last-of-type 选中父元素下最后一个 elem 类型元素。 - elem:only-of-type 如果父元素下的子元素只有一个 elem 类型元素，则选中该元素。 - elem:empty 选中不包含子元素和内容的 elem 类型元素。 - elem:target 选择当前活动的 elem 元素。 - :not(elem)选择非 elem 元素的每个元素。 - :enabled 控制表单控件的禁用状态。 - :disabled 控制表单控件的禁用状态。 - :checked 单选框或复选框被选中。 ::: ## 25 用纯 CSS 创建一个三角形的原理是什么？ ::: details 采用的是相邻边框连接处均分的原理将元素的宽高到设置为 0，指设置 border，把任意三条边隐藏掉（颜色设置为 transparent），剩下的就是一个三角形 ```css #demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; } ``` ::: ## 25 一个满屏品字布局如何设计 ::: details 上面的 div 宽为 50% 下面的两个 div 分别宽为 50%，然后用 float 使其不换行 ```html 满屏品字的结构

``` ::: ## 26 CSS 多列等高如何实现？ ::: details 1. 利用 padding-bottom|margin-bottom 正负值相抵，不会影响页面布局的特点。设置父容器设置超出隐藏（overflow: hidden），这样父容器的高度就还是它里面的列没有设定 padding-bottom 时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的 padding-bottom 补偿这部分高度差。 2. 利用 table-cell 所有单元格高度都相等的特性，来实现多列等高。 3. 利用 flex 布局中项目 align-items 属性默认为 stretch，如果项目未设置高度或设为 auto，将占满整个容器的高度的特性，来实现多列等高。详细资料可以参考： [《前端应该掌握的 CSS 实现多列等高布局》](https://juejin.im/post/5b0fb34151882515662238fd) [《CSS：多列等高布局》](https://codepen.io/yangbo5207/post/equh) ::: ## 27 li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？ ::: details 浏览器会把 inline 元素间的空白字符（空格、换行、Tab 等）渲染成一个空格。而为了美观。我们通常是一个`

`放在一行，这导致`

`换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。解决办法： 1. 为`

`设置 float:left。不足：有些容器是不能设置浮动，如左右切换的焦点图等。 2. 将所有`

`写在同一行。不足：代码不美观。 3. 将`

`内的字符间隔，因此需要将`
`内的字符间隔设为默认 letter-spacing:normal。详细资料可以参考： [《li 与 li 之间有看不见的空白间隔是什么原因引起的？》](https://blog.csdn.net/sjinsa/article/details/70919546) ::: ## 28 width:auto 和 width:100%的区别 ::: details 一般而言 width:100%会使元素 box 的宽度等于父元素的 content box 的宽度。 100%表示子元素的宽度和父元素的宽度相等，其中并不包括子元素内外边距以及边框的值，为子元素真正的宽度 width:auto 会使元素撑满整个父元素，margin、border、padding、content 区域会自动分配水平空间。 auto 表示子元素的宽度+内边距+外边距+边框才等于父元素的宽度 1. width:100% 并不包含 margin-left margin-right 的属性值，直接取其父容器的宽度加上含 margin-left /margin-right 的值。如果设置了 margin 那新的 width 值是容器的宽度加上 margin 的值。就会发现加了 margin 相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围，(这条相对于父容器是 body)。 2. width:auto 包含 margin-left/margin-right 的属性值。width:auto 总是占据整行，这其中 margin 的值已经包含其中了，如果要设置 margin 的值那就用一整行然后减去 margin 的值就得到了现在的宽度了。减去的这个值就是相应边得空白。显著的特征是这个没有横向滚动条出现也就是宽度没有增加。 3. 一般 width:auto 使用的多，因为这样灵活，而 width:100%使用比较少，因为在增加 padding 或者 margin 的时候，容易使其突破父级框，破环布局。 [width：100%和 width：auto 的区别](https://blog.csdn.net/Tie_may/article/details/113761173?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-7.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-7.control) ::: ## 29 margin 和 padding 分别适合什么场景使用？ ::: details margin 是用来隔开元素与元素的间距；padding 是用来隔开元素与内容的间隔。 margin 用于布局分开元素使元素与元素互不相干。 padding 用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段距离。何时应当使用 margin： - 需要在 border 外侧添加空白时。 - 空白处不需要背景（色）时。 - 上下相连的两个盒子之间的空白，需要相互抵消时。如 15px+20px 的 margin，将得到 20px 的空白。何时应当时用 padding：需要在 border 内测添加空白时。空白处需要背景（色）时。上下相连的两个盒子之间的空白，希望等于两者之和时。如 15px+20px 的 padding，将得到 35px 的空白。 margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。实例: - margin:10px 5px 15px 20px; - 上边距是 10px - 右边距是 5px - 下边距是 15px - 左边距是 20px - margin:10px 5px 15px; - 上边距是 10px - `右边距和左边距是 5px` - 下边距是 15px - margin:10px 5px; - 上边距和下边距是 10px - 右边距和左边距是 5px - margin:10px; - 所有四个边距都是 10px ::: ## 30 为什么不建议使用通配符初始化 css 样式 ::: details 采用`*{padding:0;margin:0;}`这样的写法好处是写起来很简单，但是是通配符，需要把所有的标签都遍历一遍，当网站较大时，样式比较多，这样写就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间，因此一般大型的网站都有分层次的一套初始化样式。出于性能的考虑，并不是所有标签都会有 padding 和 margin，因此对常见的具有默认 padding 和 margin 的元素初始化即可，并不需使用通配符\*来初始化。 ::: ## 31 style 标签写在 body 后与 body 前有什么区别？ ::: details 页面加载自上而下当然是先加载样式。写在 body 标签后由于浏览器以逐行方式对 HTML 文档进行解析，当解析到写在尾部的样式表（外联或写在 style 标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在 windows 的 IE 下可能会出现 FOUC 现象（即样式失效导致的页面闪烁问题） ::: ## 32 常见的元素隐藏方式？ ::: details 1. 使用 display:none;隐藏元素，渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。 2. 使用 visibility:hidden;隐藏元素。元素在页面中仍占据空间，但是不会响应绑定的监听事件。 3. 使用 opacity:0;将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。 4. 通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。 5. 通过 z-index 负值，来使其他元素遮盖住该元素，以此来实现隐藏。 6. 通过 clip/clip-path 元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。 7. 通过 transform:scale(0,0)来将元素缩放为 0，以此来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。详细资料可以参考： [《CSS 隐藏元素的八种方法》](https://juejin.im/post/584b645a128fe10058a0d625#heading-2) ::: ## 33 justify-content 和 align-items 的属性值 ::: details justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 **提示**：使用 align-content 属性对齐交叉轴上的各项（垂直） | 值 | 描述 | 测试 | | :------------ | :------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------- | | flex-start | 默认值。项目位于容器的开头。 | [测试 »](https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=flex-start) | | flex-end | 项目位于容器的结尾。 | [测试 »](https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=flex-end) | | center | 项目位于容器的中心。 | [测试 »](https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=center) | | space-between | 项目位于各行之间留有空白的容器内。 | [测试 »](https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=space-between) | | space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 | [测试 »](https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=space-around) | | initial | 设置该属性为它的默认值。请参阅 [_initial_](https://www.runoob.com/cssref/css-initial.html)。 | [测试 »](https://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=initial) | | inherit | 从父元素继承该属性。请参阅 [_inherit_](https://www.runoob.com/cssref/css-inherit.html)。 | | align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。 **提示**：使用 justify-content 属性对齐主轴上的各项（水平）。 **注意**：容器内必须有多行的项目，该属性才能渲染出效果。 [CSS align-content 属性](https://www.runoob.com/cssref/css3-pr-align-content.html) align-items 属性定义 flex 子项在 flex 容器的当前行的侧轴（纵轴）方向上的对齐方式。 **提示**：使用每个弹性对象元素的 align-self 属性可重写 align-items 属性。 [CSS align-items 属性](https://www.runoob.com/cssref/css3-pr-align-items.html) ::: ## 34 单位 em，px，rem 适用场景 ::: details - `px`：绝对单位，页面按精确像素展示。 - `em`：相对单位，基准点为父节点字体的大小，如果自身定义了`font-size`按自身来计算（浏览器默认字体是`16px`），整个页面内 1em 不是一个固定的值。 - `rem`：相对单位，可理解为”`root em`”, 相对根节点 html 的字体大小来计算，`CSS3`新加属性，`chrome/firefox/IE9+`支持以根元素的字体大小为基准。例如`html`的`font-size: 14px`，则子级`1rem = 14px`。 **em 相对于父元素，rem 相对于根元素(html)** 用 rem 的好处：当用 rem 做响应式时，直接在媒体查询中改变 html 的 font-size 的大小，那么用 rem 作为单位的元素大小都会相应的改变，很方便对于需要适配各种移动设备，使用 rem，例如只需要适配 iPhone 和 iPad 等分辨率差别比较挺大的设备. ::: ## 35 display、float、position 的关系 ::: details - 如果`display`取值为`none`，那么`position`和`float`都不起作用，这种情况下元素不产生框 - 否则，如果`position`取值为`absolute`或者`fixed`，框就是绝对定位的，`float`的计算值为`none`，`display`根据下面的表格进行调整。 - 否则，如果`float`不是`none`，框是浮动的，`display`根据下表进行调整 - 其他情况下`display`的值为指定值 - 总结起来：绝对定位、浮动、根元素都需要调整`display` ::: ## 36 rgba()和 opacity 的透明效果有什么不同？ ::: details - `rgba()`和`opacity`都能实现透明效果，但最大的不同是`opacity`作用于元素，以及元素内的所有内容的透明度， - 而`rgba()`只作用于元素的颜色或其背景色。（设置`rgba`透明的元素的子元素不会继承透明效果！） ::: ## 37 [CSS3 之 transform 和 animation 区别](https://www.cnblogs.com/yongyang/p/8878044.html) ::: details **CSS3 有 3 种和动画相关的属性：transform, transition, animation。其中 transform 描述了元素静态样式。而 transition 和 animation 都能实现动画效果。所以 transform 常常配合后两者使用** 1. 触发条件不同。transition 通常和 hover 等事件配合使用，由事件触发。animation 则立即播放。 2. 循环。 animation 可以设定循环次数。 3. 精确性。 animation 可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation 中可以设置每一帧需要单独变化的样式属性， transition 中所有样式属性都要一起变化。 4. 与 javascript 的交互。animation 与 js 的交互不是很紧密。tranistion 和 js 的结合更强大。js 设定要变化的样式，transition 负责动画效果，天作之合，比之前只能用 js 时爽太多。先区分一下 css 中的几个属性：animation（动画）、transition（过渡）、transform（变形）、translate（移动）。 - CSS3 中的 transform(变形)属性用于内联元素和块级元素，可以旋转、扭曲、缩放、移动元素，它的属性值有以下五个：旋转 rotate、扭曲 skew、缩放 scale 和移动 translate 以及矩阵变形 matrix； - transform(变形)是 CSS3 中的元素的属性，而 translate 只是 transform 的一个属性值；`transform是transition（过渡动画）的transition-property的一个属性值。` - `animation（动画）、transition（过渡）是css3中的两种动画属性`。animation 强调流程与控制，对元素的一个或多个属性的变化进行控制，可以有多个关键帧（animation 和@ keyframes 结合使用）； - transition 强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生（例如 hover）时才能获取样式，这样就会产生过渡动画 - transition 的优点在于简单易用，但是它有几个很大的局限。 - transition 需要事件触发，所以没法在网页加载时自动发生。 - transition 是一次性的，不能重复发生，除非一再触发。 - transition 只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。 - 一条 transition 规则，只能定义一个属性的变化，不能涉及多个属性。 **CSS Animation 就是为了解决这些问题而提出的。** transition 强调过渡，transition ＋ transform ＝两个关键帧的 Animation animation 强调流程与控制，Duration ＋ TransformLib ＋ Control ＝多个关键帧的 animation ::: ## 38 去除 inline-block 元素间距的方法 :::details - 去除 HTML 元素标签之间的换行和空格，但是这种方式会降低代码的可读性，不可取 - 设置该元素的 margin 为负值 - 设置父元素的 font-size 属性为 0，子元素的 font-size 还可以正常设置 - 设置父元素的 letter-spacing，字符间距为负值 - 设置父元素的 word-spacing，单词间距为负值 - 子元素浮动 See the Pen <a href='https://codepen.io/ignorant-cirle/pen/xxrMgmB'>去除inline-block元素间距的方法</a> by ignorance (<a href='https://codepen.io/ignorant-cirle/pen/xxrMgmB'>@ignorance</a>) on <a href='https://codepen.io'>CodePen</a>. :::