CSS语法相关的面经总结

秋招前端面试经历分享在了B站： 2024届校招秋招前端分享

1.1 单位

​ px全称pixel像素，是相对于屏幕分辨率而言的，它是一个绝对单位，但同时具有一定的相对性。因为在同一个设备上每个像素代表的物理长度是固定不变的，这点表现的是绝对性。但是在不同的设备之间每个设备像素所代表的物理长度是可以变化的，这点表现的是相对性。

​ em是一个相对长度单位，具体的大小需要相对于父元素计算，比如父元素的字体大小为80px，那么子元素1em就表示大小和父元素一样为80px，0.5em就表示字体大小是父元素的一半为40px。em 作为尺度单位时是以 font-size 属性为参考依据的。

​ rem 是 root em 的简称，表示设置以网页根元素 ( html ) 的字符高度为单位。因此可以只对 html 元素设置字体大小，其他元素用 rem 单位设置百分比大小，例如 h 1{font-size:1.25 rem}。一般的浏览器默认的 1 rem 是 16 px。

​ vw 和 vh 是 CSS3 新单位，即 view width 可视窗口宽度 和 view height 可视窗口高度。1vw 就等于可视窗口宽度的百分之一，1vh 就等于可视窗口高度的百分之一。

1.2 块级元素

块级：form h li p table th

• 每个块级元素都是独自占一行；
• 高度，行高，外边距（margin）以及内边距（padding）都可以控制；
• 元素的宽度如果不设置的话，默认为父元素的宽度（父元素宽度100%；
• 多个块状元素标签写在一起，默认排列方式为从上至下；

行内：a br i label small textarea select strong

• 不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会自动换行，其宽度随元素的内容而变化；
• 高宽无效，对外边距（margin）和内边距（padding）仅设置左右方向有效 上下无效；
• 设置行高有效，等同于给父级元素设置行高；
• 元素的宽度就是它包含的文字或图片的宽度，不可改变；
• 行内元素中不能放块级元素，a 链接里面不能再放链接；

行内块：button input textarea select img

• 高度、行高、外边距以及内边距都可以控制；
• 默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白缝隙，设置它上一级的 font-size 为 0，才会消除间隙；

1.3 隐藏

分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

• 结构： display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 ，opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击。

• 继承： display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。 visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。

• 性能： display: none : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大 visibility: hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容 opacity: 0 ： 修改元素会造成重绘，性能消耗较少。

  通过display: none隐藏一个DOM节点-触发重排和重绘

  通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化（详见 3.2）

​ 屏幕并不是唯一的输出机制，比如说屏幕上看不见的元素（隐藏的元素），其中一些依然能够被读屏软件阅读出来（因为读屏软件依赖于可访问性树来阐述）。为了消除它们之间的歧义，我们将隐藏类型归为三大类：

完全隐藏：元素从渲染树中消失，不占据空间。 视觉上的隐藏：屏幕中不可见，占据空间。 语义上的隐藏：读屏软件不可读，但正常占据空。

完全隐藏

(1) display 属性

 display: none;

(2) hidden 属性 HTML5 新增属性，相当于 display: none

<div hidden></div>

视觉上的隐藏

(1) 设置 posoition 为 absolute 或 fixed，通过设置 top、left 等值，将其移出可视区域。

position:absolute;
left: -99999px;

(2) 设置 position 为 relative，通过设置 top、left 等值，将其移出可视区域。

position: relative;
left: -99999px;
height: 0

(3) 设置 margin 值，将其移出可视区域范围（可视区域占位）。

margin-left: -99999px;
height: 0;

语义上隐藏

aria-hidden 属性

读屏软件不可读，占据空间，可见。

<div aria-hidden="true"></div>

1.4 清除浮动

​ 清除浮动是清除浮动带来的负面影响。因为子元素浮动了，脱离标准流，不再占用之前的位置，导致无法撑开没有设置高度的父元素浮动的父元素高度为0,进而导致后续结构直接跑上来，导致高度塌陷。

• ​ clear 清除浮动（添加空div法）在浮动元素下方添加空div，并给该元素写css样式：

  {clear:both;height:0;overflow:hidden;}

  ​ 缺点：添加无意义标签，语义化差；

• ​ 给浮动元素父级设置高度

• ​ 父级同时浮动（需要给父级同级元素添加浮动）

• ​ 父级设置成inline-block

  ​ 缺点：需要设置宽度，margin: 0 auto居中方式失效；

• ​ 给父级添加overflow:hidden

  ​ 缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素；

• ​ 万能清除法 ::after 伪元素清浮动（现在主流方法，推荐使用）

  ​ 缺点：：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

1.5 动画

ss中实现动画有两种方式：transition过渡动画、 animation自定义动画。

1. transition：

• transition-property：指定使用过渡效果的css属性 w| h| color |font-size | all
• transition-duration：设置过渡动画持续时间
• transition-timing-function：设置动画的时间函数。linear | ease（缓解）| cubic-bezier(n ,n ,n ,n)
• transition-delay：设置动画的延迟时间

注意：

​ 不支持z-index | display

2. animation:

通过@keyframes自定义关键帧动画并为动画命名，可以在其中对每一帧进行设置。

@keyframes animateName{
    from|0%   { width:50px; height:50px; }	
    50%  { width:100px; height:100px; }	
    to|100% { width:50px; height:50px; }
}

// 从左往右滑动，或者用transition实现，或者使用jQuery的window.requestAnimationFrame实现
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
.slideInElement {
  animation: 2s ease-out 0s 1 slideInFromLeft;
}

使用自定义动画的元素，需要通过animation相关属性进行配置

• animation-name: 某个元素想要使用对应名称的动画

• animation-duration：默认为0

• animation-timing-function：可配置动画随时间的运动速率和轨迹

• animation-delay

• animation-iteration-count：用于定义动画迭代次数，默认为1|infinite

• animation-direction：设置动画执行方向 normal|reverse|alternate|inherit

• animation-fill-mode：动画的填充模式 none|forwards|backwards

• animation-play-state：设置动画的执行状态，通常通过JavaScript动态控制。running|paused

多动画：

1. 首先使用animation-name来锁定使用的各个动画
2. 之后使用其它的animation族属性，分别约束对应动画，且设置顺序与animation-name使用动画的顺序保持一致。

为什么transform比top快

​ 因为top和left的改变会触发浏览器的 reflow和 repaint 。整个动画过程都在不断触发浏览器的重新渲染，这个过程是很影响性能的。而transform 动画由GPU控制该过程发生在合成线程，与渲染主线程无关，支持硬件加速。

​ CSS transform属性并不会触发当前元素或附近元素的relayout。浏览器将当前元素视为一个整体，它会缩放、旋转、移动这一整个元素。浏览器只需要在动画开始之时生成位图，然后将位图发送给GPU。之后浏览器不需要做额外的relayout和repaint，甚至不需要发送位图给GPU。浏览器只需要充分发挥GPU的长处：绘制同一张位图到不同的位置、旋转角度和缩放比例。

现代浏览器通常由两个重要的线程组成（主线程 和 合成线程）。这两个线程一起工作完成绘制页面的任务：
主线程需要做的任务如下：
- 运行Javascript
- 计算HTML元素的CSS样式
- layout (relayout)
- 将页面元素绘制成一张或多张位图
- 将位图发送给合成线程

合成线程主要任务是：

- 利用GPU将位图绘制到屏幕上
- 让主线程将可见的或即将可见的位图发给自己
- 计算哪部分页面是可见的
- 计算哪部分页面是即将可见的（当你的滚动页面的时候）
- 在你滚动时移动部分页面

在很长的一段时间内，主线程都在忙于运行Javascript和绘制元素。

其他优化的策略还有： - opacity替代visibility - 多个DOM统一操作（虽然V8会有缓存优化） - 先将DOM离线，即display：none；修改后显示 - 不要把DOM放在已给循环中作为循环变量 - 不要使用table

合成层与渲染层blog.csdn.net/weixin_4410...

1.6 权重

第一优先级：无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。

第二优先级：在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。

第三优先级：由一个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3pxl}

第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}

第五优先级：由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px；}

第六优先级：通配选择器，如*{marigin:6px;}

权重优先级：行内样式（1000）>ID选择器（100）>类选择器（10）>标签选择器（1）>通用选择器（0）

对于一个已经定位的盒子（即其 position 属性值不是 static，这里要注意的是 CSS 把元素看作盒子），z-index 属性指定：

1. 盒子在当前堆叠上下文中的堆叠层级。
2. 盒子是否创建一个本地堆叠上下文。

1.7 居中

​ 1）父、子元素宽高未知时

• table-cell（使用表格样式）

<style>
.table-wrap{
        display: table-cell;
        height: 200px;
        width: 100px;
        padding: 20px;
        vertical-align: middle;
        text-align: center;
        border: 1px solid red;
        }
</style>
<div  class="table-wrap">
    我是一大推文字，我想要垂直居中，这是省略这是省略这是省略这是省略
</div>

• flex 布局（父级 justify-content: center 和 align-items: center 即可）
• absolute + transform（定位的上、左为 50%，translate 上、左负 50%）
• absolute + margin: 0 auto（定位的上下左右为 0）
• Grid 网格布局
• 直接使用 table（改变结构实现，和第一条类似）

​ 2）子元素固定宽高已知时（假设子元素宽高为 200px）

• absolute + calc（定位上、左负50%时减去子元素宽、高）
• absolute + 负margin（定位的上、左为 50%，margin 的上、左负子元素的一半）

​ 3）父元素高度已知（假设为 400px），子元素宽高未知

• text-align + vertical-align

​ text-align: center; 是给父元素设置的，使得父元素设置之后，它里面的行内级元素居中

1.8 定位与脱标

1）脱标：

• 元素设置position，并且position的值为fixed或absolute；【这里有两种在流 定位值，他们分别是static和relative】
• 元素添加浮动float，并且float的值不为none；

​ 特点：

• 元素不再严格区分块级(block)、行内级(inline)，行内块级(inline-block)，若元素未设置宽度高度，那么元素的宽高将完全由内容决定；
• 不再给父元素汇报自身宽高，若父元素没有设置宽高，将不能撑起父元素；
• 即使原来是行内级元素也可以随意设置宽度高度；

2）子绝父相

​ 子绝父绝，子绝父固定都是可以的，absolute 的 left、right、top、bottom 这几个定位的属性参照对象是最邻近的定位祖先元素，所以只要我们要相对与哪个祖先来定位只要将祖先设置为定位元素就行，至于是哪种就得看你的实际需求了，当希望子元素相对于父元素进行定位，又不希望父元素脱标的时候，我们才会会用到子绝父相。

3） 定位属性

1. position: static;默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
2. position: inherit;即继承父元素的position值。
3. position: relative;
4. position: absolute;绝对定位的元素的位置相对于最近的已定位祖先元素 ，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
5. position: fixed;``fixed元素脱离正常的文档流，所以它与absolute元素很相似，同样会被周围元素忽略，支持top,bottom,left,right属性，固定在屏幕的某个位置。不支持IE6、IE7、IE8。可以通过给该元素设置position: absolute并获取滚动条距离顶部高度加上某个固定高度来实现。
6. position: sticky;当元素距离页面视口（Viewport，也就是fixed定位的参照）顶部距离大于 0px 时，元素以 relative 定位表现，而当元素距离页面视口小于 0px 时，元素表现为 fixed 定位，也就会固定在顶部。

须指定 top、right、bottom、left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。设定为sticky 元素的任意父节点的 overflow 属性必须是 visible，否则 sticky 不会生效。如果 sticky 元素的任意父节点定位设置为 hidden，则父容器无法进行滚动，所以sticky 元素也不会有滚动然后固定的情况。如果 position:sticky 元素的任意父节点定位设置为 relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewport 定位。

1.9 选择器

• 伪类：以冒号(:)开头，用于选择处于特定状态的元素。

动态伪类：:visited(链接已访问时)、:focus、:hover等
状态伪类：:disabled、:empty、:required(表单项是否必填) 等
结构伪类：:first-child、:nth-of-type等
p:nth-child(odd){} //奇数行
p:nth-child(even){} //偶数行
其他伪类：:target(元素 id 匹配到哈希值时)、:lang(匹配到指定语言时)、:not()等
//顺序：link、visited、focus、hover、active 前三个无所谓，后两个保持一致

• 伪元素：以双冒号(::)开头，用于在文档中插入虚构的元素。

  ::first-letter 选中块状元素中的首字母
  ::first-line	选中首行
  ::before在之前创建一个不在文档树中的元素(必须要设置 content 属性,宿主元素的 position 别忘记设置成 relative 或 absolute)
  ::placeholder	选中表单元素的占位文本

• 相邻选择器：

​ +选择器。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。

​ ~ 选择器。作用是查找某一个指定元素的后面的所有兄弟结点。

1.10 CSS3

CSS3 新增东西众多，这里列举出一些关键的新增内容：

• 选择器：通用兄弟选择器、伪类选择器、伪元素选择器、否定选择器、状态伪类选择器
• 盒子模型属性：border-radius、box-shadow、border-image
• 背景：background-size、background-origin、background-clip
• 文本效果：text-shadow、word-wrap
• 颜色：新增 RGBA，HSLA 模式
• 渐变：线性渐变、径向渐变
• 字体：@font-face
• 2D/3D转换：transform、transform-origin
• 过渡与动画：transition、@keyframes、animation
• 多列布局
• 媒体查询

1）transition：transition-property | transition-duration | transition-timing-function | transition-delay |

2）transform：translate() | rotate() | scale() | skew() |

1.11 BFC

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。它是页面中的一块渲染区域，并且有一套属于自己的渲染规则，它决定了元素如何对齐内容进行布局，以及与其他元素的关系和相互作用。 当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。

​ BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响。

​ BFC的布局规则： ​ 1 内部的Box会在垂直方向一个接着一个地放置。 ​ 2 Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。 ​ 3 每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。 ​ 4 BFC的区域不会与float box重叠。 ​ 5 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。 ​ 6 计算BFC的高度时，浮动子元素也参与计算。

​ 如何触发BFS:

​ BFC可以解决哪些问题？

1 解决浮动元素令父元素高度坍塌的问题

2 非浮动元素被浮动元素覆盖

3 两栏自适应布局

参考文献：

• 一次弄懂css的BFC - 知乎 (zhihu.com)

文档流：

文档流是由 CSS 定位语句定义的页面元素的排列，以及 HTML 元素的顺序。 也就是说，每个元素如何占用空间以及其他元素如何相应地定位自己。

简单点说，就是 document flow 指示了页面上的元素如何去排列 。接着，讲到了 document flow 的三种影响元素位置的方法：

• 显示类型：HTML 元素最初按其显示类型定位。 这种显示类型决定了其他元素是否能够位于它们旁边，以及填充、边距和其他 CSS 属性如何影响它。 两种最重要的显示类型是：block 和 inline
• Float：浮动框是一种CSS属性，它允许你应用在一个块级元素上，可以把这个块级元素推到父类块的左边界或者右边界。浮动元素离开了正常的文档流。一个周知的问题是当多个子元素都为浮动时，造成父类块高度的丢失。关于clearfix，本质上也是利用BFC
• 定位：这里有几个可以应该在元素上的定位值。应该在所有元素上的初始值是static，一个在"在流"类型，我们将在之后谈到。

​

1.12 canvas

1.canvas是html5的一个新标签，属于h5的新特性 2.canvas标签是一个图形的容器，简单点说就是一块画布，你可以在上画矩形，圆形，三角形，折线等等,也可以用来画logo 3.它是通过javascript来画的，即脚本绘制图形

canvas可以用来干啥呢？ 1.制作web网页游戏（但是如果代码写的不咋的游戏可能会非常卡） 2.数据可视化（这么说你可能不明白，但我告诉你echarts就是基于canvas） 3.广告banner的动态效果非常适合用canvas制作 4.canvas还可以用来内嵌一些网页

1.13 src和href

href标识超文本引用，用在link和a等元素上，href是引用和页面关联，是在当前元素和引用资源之间建立联系

src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分。

src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。

<script src="js.js"></script>当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于该元素所指向的资源嵌套如当前标签内，这也是为什么要把js饭再底部而不是头部。

<link href="common.css" rel="stylesheet"/>当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css而不是使用@import。

link和@import，两者都是外部引用CSS的方式，但是存在一定的区别：

• link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

• link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

• link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

• ink支持使用Javascript控制DOM去改变样式；而@import不支持