likes
comments
collection
share

css常见的面试题（二）

作者站长头像
站长
· 阅读数 64

整理了一些css常见的面试题，如有问题，欢迎指正~

1、margin塌陷问题及解决

1、 margin塌陷现象：在垂直方向如果有两个元素的外边距有间距，在浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值比较大的，边距小的塌陷到了边距值大的值内部。 解决办法：两个外边距不同时出现。

2、两个父子元素，内部的盒子给margin-top，其父级也会受到影响，同时产生上边距，父子元素会进行粘连。 解决办法：父级添加一个css属性，overflow: hidden，禁止超出，外边距重叠就是margin-collapse。

css常见的面试题（二）

2、实现单行文本/多行文本溢出省略号

1. 单行文本溢出省略号：

文本在一行内显示，超出部分以省略号的形式展现。

实现方法：

.ele{
    text-overflow:ellipsis;//省略号
    white-space:nowrap;//禁止换行
    overflow:hidden;//溢出隐藏
    display:block/inline-block;
    width:100px;
}

该方法需要在块级元素或行内块元素下配合尺寸才可以实现（如果是块级元素不设置元素也可以实现，因为块级元素的默认宽度是100%）

2. 多行文本溢出省略号

.ele{
    width:200px;
    word-break: break-all;//换行显示
    overflow: hidden;//溢出隐藏
    display: -webkit-box;//将对象作为弹性伸缩盒子模型显示
    -webkit-box-orient: vertical;//设置或检索伸缩盒对象的子元素的排列方式
    -webkit-line-clamp: 3;//显示行数    
}

css常见的面试题（二）

3、clip-path

1.概念及语法结构

clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。

clip-path:clip-source | basic-shape| geometry-box | none;

2.属性及用法介绍

clip-source 用 URL 表示剪切元素的路径（获取`SVG`轮廓裁剪图像。） 参考代码: clip-path:clip-source(url) // 剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径
basic-shape 使用一些基本的形状函数创建的一个形状。主要包括circle()、ellipse()、inset()和polygon()。 1、circle(radius,at position)圆。传入两个参数：radius为圆的半径，默认元素宽高中短的那个为直径，支持百分比；at position为圆心位置，默认为元素的中心点。 2、ellipse( radius-x, radius-y, at position ) 椭圆。可以传人3个可选参数: radius-x椭圆的X轴半径，默认是宽度的一半，支持百分比。radius-y椭圆的Y轴半径，默认是高度的一半，支持百分比。at position椭圆中心位置，默认是元素的中心点。 3、inset(top, right, bottom, left, round radius) 矩形,可以传入5个参数，分别对应`top,right,bottom,left`的裁剪位置，`round radius`（可选，圆角） 4、polygon( fill-rule, shape-arg shape-arg) 多边形fill-rule代表了填充规则（可选）可选值为 nonzero 和 evenodd。该参数的默认值为 nonzero。shape-arg多组，每一对在列表中的参数都代表了多边形顶点的坐标。
margin-box 使用外边距框作为引用框
border-box 使用边框作为引用框
padding-box 使用内边框作为引用框
content-box 使用内容框作为引用框
fill-box 使用对象边界框作为引用框
stroke-box 使用笔触边界框（stroke bounding box）作为引用框
view-box 使用最近的 SVG 视口（viewport）作为引用框。
none 这是默认设置。 没有剪辑

3. fill-rule的设置规则

  • nonzero 是 fill-rule 的默认值，用于判断某个点在剪裁图形的内部还是外部。 **nonzero 的判断规则： **从一点做一条任意方向的射线，然后计算射线与多边形边的相交情况。从 0 开始统计，路径上每一条从左到右（顺时针）跨过射线的线段都会让结果加 1，每条从右向左（逆时针）跨过射线的线段都会让结果减 1。当统计结束后，如果结果为 0，则点在外部；如果结果不为 0，则点在内部。
  • evenodd 是 fill-rule 的另一个可选值，也是用于判断某个点在剪裁图形的内部还是外部。 **evenodd 的判断规则： **从该点向任意方向无限远处绘制射线，并统计这个形状所有的路径段中，与射线相交的路径段的数量。如果有奇数个路径段与射线相交，则点在内部；如果有偶数个，则点在外部。

4. 注意事项

clip-path 属性将替换已弃用的 clip 属性。在开始使用clip-path绘制图形，或者裁剪图形之前，有两点需要注意：

  1. 使用clip-path要从同一个方向绘制，如果顺时针绘制就一律顺时针，逆时针就一律逆时针，因为polygon是一个连续线段，若线段彼此有交集，裁剪区域就会有相减的情况发生(特意需求此效果除外)。
  2. 如果绘制时采用比例的方式绘制，长宽就必须要先行设定，不然有可能绘制出来的长宽和我们想像的就会有差距，使用像素绘制就不会有这样的现象。

4、重绘与回流

css常见的面试题（二）

1. 概念：

当renderTree发生因为元素的规模尺寸，布局，隐藏等改变而需要重建时，这就称为回流。每个页面在第一次加载时至少要经历一次回流。

当renderTree中的一些元素需要更新属性，但这些属性只会影响元素外观，风格，而不影响布局时，比如background-Color则叫重绘。

回流必将引起重绘，重绘不一定引起回流。

2. 引起回流的方式？

  1. 页面初始化时，DOM载入后的第一次回流，将会遍历所有frame。最消耗性能的一次回流；
  2. 删除或者添加可见的元素时；
  3. 元素的位置发生改变时；
  4. 元素的大小改变时（例如改变了元素的内外边距，宽高，边框大小）；
  5. 元素的内容发生变化（字体、文字、图片更换）；
  6. 改变浏览器窗口尺寸（例如 resize 事件发生时）；
  7. 样式改变（StyleChange）。整个frame树都应得到遍历；
  8. Css伪类激活
  9. 设置 style 属性的值，因为通过设置 style 属性改变节点样式的话，每一次设置都会触发一次回流；
  10. 查询某些属性或调用某些计算方法：offsetWidth、offsetHeight 等，会触发回流，为了 “即时性” 和 “准确性” ；
  11. Dom操作。

3. 引起重绘的方式？

  1. 可见性(visibility)和透明度(opacity)的改变；2.
  2. 颜色的改变；
  3. 背景的改变；
  4. 阴影、轮廓的改变；
  5. 文本方向(text-decoration)的改变等。

4. 如何减少回流、重绘？

css常见的面试题（二）

可以看到每次DOM元素的样式操作都会引发重绘，如果涉及布局还会引发回流。避免大量页面回流的手段也有很多，其本质都是尽量减少引起回流和重绘的DOM操作：

  1. 避免逐项更改样式。最好一次性更改style属性，或者将样式列表定义为class并一次性更改class属性。
  2. 避免循环操作DOM。创建一个documentFragment或div，在它上面应用所有DOM操作，最后再把它添加到window.document。 3.避免循环读取offsetLeft等属性。在循环之前把它们存起来。 4.绝对定位具有复杂动画的元素。绝对定位使它脱离文档流，否则会引起父元素及后续元素大量的回流。

5、BFC（Block Formatting Context）块级格式化上下文

1. 概念

BFC它作为 HTML 页面上的一个独立渲染区域，只有区域内元素参与渲染，且不会影响其外部元素。 在一个 Web 页面的 CSS 渲染中，块级格式化上下文 （Block Fromatting Context）是按照块级盒子布局的。

你可以将一个 BFC 可以理解为一个容器，里面的元素不会影响到容器外的布局；

可以简单理解为一个元素的内部子元素无论尺寸、定位如何变化，都不会影响外部元素的定位和尺寸。

2. 形成BFC常见条件

  • 根元素，也就是 HTML 元素
  • 浮动元素，即float不是none
  • 定位元素，position是absolute或者fixed
  • overflow不是visible的元素，如overflow:hidden
  • 行内块元素（display：inline-block）
  • display值为 table、flex、grid

3. BFC的作用

  • 阻止相邻元素的上下margin合并
  • 用于解决容器元素高度塌陷问题
  • 清除浮动

6、计算属性calc()的使用

1. 定义及用法

calc() 函数用于动态计算长度值。 语法：calc(expression)

.ele{
    width:calc(100% - 20px);
}

2. 注意事项

  • 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)。
  • 任何长度值都可以使用calc()函数进行计算。
  • calc()函数支持 "+", "-", "*", "/" 运算。
  • calc()函数使用标准的数学运算优先级规则。

7、--CSS变量

1. 概念

var() 函数用于插入 CSS 变量的值。

CSS 变量可以访问 DOM，这意味着您可以创建具有局部或全局范围的变量，使用 JavaScript 来修改变量，以及基于媒体查询来修改变量。

使用 CSS 变量的一种好方法涉及设计的颜色。您可以将它们放在变量中，而不必一遍又一遍地复制和粘贴相同的颜色。

2. 语法

var() 函数的语法如下：var(name, value)

  • name必需,变量名（以两条破折号开头）。
  • value可选。回退值（在未找到变量时使用）。
  • -- 前缀通常被用在类中，是CSS中对变量声明的前缀。
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

8、伪类和伪元素

使用伪元素的时候，总是感觉和伪类很相似，但又不能详细的说出两者的区别和联系，那么两者到底有什么区别和联系呢？

1.伪元素/伪对象

不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于DOM树中。

伪元素选择符是指为一个HTML元素的各种状态和部分内容定义样式的一种方式。

1. 前端CSS中的伪元素选择符有以下几种：

  • ::after：在元素的最后面添加一个伪元素，通常用于添加内容。
  • ::before：在元素的最前面添加一个伪元素，通常用于添加内容。
  • ::first-letter：用于选中元素中的第一个字母。
  • ::first-line：用于选中元素中的第一行文字。
  • ::selection：用于选中元素中被用户选中的文本部分。
  • ::placeholder 用于设置输入框或文本域中placeholder属性设置的文字的样式。

2. 伪元素使用时的注意事项

  • 伪元素如果没有设置content属性，那么伪元素是无用的（可以将伪元素的内容设置为空）
  • 插入的内容在页面的源码里是不可见的，只能在css里面可见。
  • 插入的伪元素默认情况是内联元素，因此，为了给插入元素赋予高度，外边距、填充等等，必须显式定义它是一个块级元素。
  • 典型的css继承规则适用于插入的伪元素，比如，插入的字体系列，然后伪元素会像其他元素一样继承这些字体系列，同样的，伪元素不会继承没有自然继承自父元素（如padding和margin）的样式。
  • 使用伪元素插入非文本内容。

2. 伪类

存在DOM文档中，逻辑上存在但在文档树中却无须标识的“幽灵”分类，用来表示元素的一种状态。

1. 常见的伪类选择器

1.动态伪类选择器

  • :link。元素被定义了超链接但并未被访问过
  • :visited。元素被定义了超链接并已被访问过
  • :active。元素被激活
  • :hover。鼠标悬停
  • :focus。元素获取焦点

a 标签的这四种伪类选择器的顺序为：​a:link ，a:visited，a:hover ，a:active​。必须严格按照此规则来设置属性，否则无效。

  1. UI 元素状态伪类选择器
  • :checked。选中的复选按钮或者单选按钮表单元素
  • :enabled。所有启用的表单元素
  • :disabled。所有禁用的表单元素
  1. 结构伪类选择器
  • first-child: 元素得是其父元素的第一个子元素才匹配
  • :last-child: 元素得是其父元素的最后一个子元素才匹配
  • :nth-child(n): 元素得是其父元素的第n个子元素才匹配
  • :nth-last-child(n): 元素得是其父元素的倒数第n个子元素才匹配
  • :only-child: 元素得是其父元素的唯一一个子元素才匹配
  • :first-of-type: 元素得是其父元素的第一个该类元素才匹配
  • :last-of-type: 元素得是其父元素的最后一个该类元素才匹配
  • :only-of-type: 元素得是其父元素的唯一一个该类元素才匹配
  • :nth-of-type(n): 元素得是其父元素的第n个该类元素才匹配
  • :nth-last-of-type(n): 元素得是其父元素的倒数第n个子元素才匹配
  • not: 排除元素 例： li:not(:first-child): 元素不是其父元素的第一个子元素的li元素被匹配

3. 伪类与伪元素的区别与联系

  • 在计算权重的时候 ：伪类与类优先级相同 、伪元素与标签优先级相同
  • 伪类与伪元素都是用于向选择器加特殊效果
  • 伪类与伪元素的本质区别就是是否抽象创造了新元素
  • 伪类只要不是互斥可以叠加使用
  • 伪元素在一个选择器中只能出现一次，并且只能出现在末尾
  • 伪类与伪元素优先级分别与类、标签优先级相同

9、css解析规则

  1. 因为css对空格不敏感，因此在每个样式后都要加一个分号，不然会把写在后面的样式当成一个整体来解析，直到遇到分号为止。
  2. 当遇见不认识的属性或值时，将忽略这个属性，继续解析后面的属性。
  3. 对于复合属性，只要其中一个值是错误的，那么整个属性都不解析。
  4. 后代选择器中间必须加空格。
  5. 换行会被当做一个空格。 6.关键字不可以用引号，否则会被忽略。
  6. 在多组选择器中，只要有一个选择器是错误的其他的也不会执行。
  7. 在CSS中，如果需要使用到@import规则导入外部样式表，那么需要注意的是，@import规则只能写在其他样式规则的前面，否则@import规则会被忽略。

整理了一些css常见的面试题整理用于学习，如有问题欢迎指正，侵删~

转载自:https://juejin.cn/post/7248479984901472315
评论
请登录