frenchleave

前端面试-CSS

2021/5/10 InterviewCSS

TIPS

# CSS你用的什么布局多一点

  • 单列布局

    • header,content和footer等宽的单列布局

      通过对header,content,footer统一设置width：width;或者max-width：width(这两者的区别是当屏幕小于width时，前者会出现滚动条，后者则不会，显示出实际宽度);然后设置margin:auto实现居中即可得到。

    • header与footer等宽,content略窄的单列布局

      header、footer的内容宽度不设置，块级元素充满整个屏幕，但header、content和footer的内容区设置同一个width，并通过margin:auto实现居中。

  • 两列自适应布局

    两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式

    • float+overflow:hidden

      如果是普通的两列布局，浮动+普通元素的margin便可以实现，但如果是自适应的两列布局，利用float+overflow:hidden便可以实现，这种办法主要通过overflow触发BFC,而BFC不会重叠浮动元素。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom:1来兼容IE6-浏览器。(注意点:如果侧边栏在右边时，注意渲染顺序。即在HTML中，先写侧边栏后写主内容)

    • Flex布局

    • grid布局

  • 三栏布局

    中间列自适应宽度，旁边两侧固定宽度，实现三栏布局有多种方式，浮动顺序为左右中，圣杯模式和双飞翼是中左右

    • 最外层inline-block布局，左右固定宽度，中间使用calc

    • 利用绝对定位的方式，父级相对定位，左右两栏设置为绝对定位left:0;top:0;和right:0;top:0;，中间设置对应方向大小的margin的值。

    • 利用浮动的方式，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后。

    • 利用flex布局的方式，左右两栏的放大和缩小比例都设置为0，基础大小设置为固定的大小，中间一栏设置为auto。

    • 父级display:table，左右两个display:table-cell

    • 网格布局：父级display:table;grid-template-columns:200px auto 300px;

    • 圣杯布局

      利用浮动和负边距来实现。父级元素设置左右的padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置margin负值将其移动到上一行，再利用相对定位，定位到两边。两边固定宽度，中间自适应，dom结构必须是先写中间列部分，这样实现中间列可以优先加载。中间列的宽度不能小于两边任意列的宽度

    • 双飞翼布局

      dom结构必须是先写中间列部分。双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的margin（是中间列里面还有个元素的margin，不是中间列本身的margin）值来实现的，而不是通过父元素的padding来实现的。解决了圣杯布局错乱问题，实现了内容与布局的分离。而且任何一栏都可以是最高栏，不会出问题。缺点是增加了一层额外的dom结构

  • 伪等高布局

  • 粘连布局

    有一块内容<main>，当<main>的高康足够长的时候，紧跟在<main>后面的元素<footer>会跟在<main>元素的后面。当<main>元素比较短的时候(比如小于屏幕的高度),我们期望这个<footer>元素能够“粘连”在屏幕的底部

# 说一下flex中，你常用的的属性

  • justify-content: 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式

  • align-items: 定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。（写在父级上）

  • align-self: 定义flex子项单独在侧轴（纵轴）方向上的对齐方式。（写在flex子项上）

  • align-content: 当伸缩容器的侧轴还有多余空间时，本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的 justify-content 属性类似。请注意本属性在只有一行的伸缩容器上没有效果。

  • order: 设置或检索弹性盒模型对象的子元素出現的順序。用整数值来定义排列顺序，数值小的排在前面。可以为负值

  • flex-flow: 复合属性。设置或检索弹性盒模型对象的子元素排列方式。同时定义flex-direction和flex-wrap

  • flex: 复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。

    • flex-grow: 用来指定扩展比率，即剩余空间是正值时此「flex子项」相对于「flex容器」里其他「flex子项」能分配到空间比例。不允许负值，默认0

    • flex-shrink: 用来指定收缩比率，即剩余空间是负值时此「flex子项」相对于「flex容器」里其他「flex子项」能收缩的空间比例。不允许负值，默认1

    • flex-basis: 用来指定伸缩基准值，即在根据伸缩比率计算出剩余空间的分布之前，「flex子项」长度的起始数值。<length> | <percentage> | auto | content，如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间。「flex」属性中该值如果被省略则默认为「0%」

    • 如果缩写「flex: 1」, 则其计算值为「1 1 0%」

    • 如果缩写「flex: auto」, 则其计算值为「1 1 auto」

    • 如果「flex: none」, 则其计算值为「0 0 auto」

    • 如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值

    应试教育：

    • 如果有剩余空间则是扩展（即flex-shrink无效），溢出则是收缩（flex-grow无效）
    • 扩展时：元素最终宽度 = 元素设置宽度 + (剩余宽度 * (flex-grow / flex-grow总值))，注：此时basis无效
    • 收缩时：元素最终宽度 = 元素设置宽度 - (溢出宽度 * (flex-shrink * flex-basis) / (所有的flex-shrink * flex-basis))

  • flex溢出换行用的哪个属性？

    flex-wrap: nowrap | wrap | wrap-reverse

  • 主轴与交叉轴的方向用哪个属性定义？如何颠倒这些属性？

    flex-direction: row | row-reverse | column | column-reverse

  • 说一下flex-grow怎么使用？

    分配剩余空间，元素最终宽度 = 元素设置宽度 + (剩余宽度 * (flex-grow / flex-grow总值))

# CSS选择器优先级

内联样式表的优先级最高，内部样式表和外部样式表的优先级与书写顺序有关（后写或后引入的优先级高，即离得最近的优先级高）。继承的样式没有权重值，虽然通配符、子选择器、相邻选择器权重为0,0,0,0，但是也比继承样式权重高。

选择器 权重
!important Infinity
行内样式 1,0,0,0
id 0,1,0,0
class，属性选择器，伪类 0,0,1,0
标签选择器，伪元素 0,0,0,1
通配符*，子选择器>，相邻选择器+ 0,0,0,0

否定（:not()）和任意匹配（:is()）伪类本身对优先级没有影响，但它们的参数则会带来影响。参数中，对优先级算法有贡献的参数的优先级的最大值将作为该伪类选择器的优先级。

比较的规则：

四位权重值是没有关联的，不存在进位，通过比较选择器的四位权重值，从左往右比较，如果值相等才会比较下一位，否则就是哪个大哪个权重高，例如：1,0,0,0大于0,99,99,99，并不是简单的权重值相加。

/* html结构如下 */
/* div>span>strong>sub>b>a>nav>article>section>aside>ul>li>i.text{文字} */
/* 权重为 0010 所以文字表现为红色*/
.text { color: red; }
/* 权重为 000,13 */
div span strong sub b a nav article section aside ul li i { color: green; }
1
2
3
4
5
6

# CSS实现10列布局如何做

  • grid

    .row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.cloumn {
  grid-row: 1/auto;
}
    1
    2
    3
    4
    5
    6
    7
    8

  • flex

    父级：display: flex; 子级：flex: 1;

  • column

    • 父级：column-count: 10;

  • 浮动、定位等

如何实现通过不同的类名，来控制它的均分？比如我传col2，那么这一列就占20%，col3就占30%

.column.col2 {width:20%}
.column.col3 {width:30%}
1
2

# 如何让块级元素水平排列

  • display: inline-block;

    出现元素之间有间隙，解决办法：

    • 父级font-size设为0，子级单独设置font-size。
    • 所有元素写在一行或者用注释把换行连接起来。
    • 负margin值，值的大小与父级字体大小有关不是固定值（加在子元素上）。
    • 使用负的letter-spacing或者word-spacing（加在父级上），子级再设置为0。

  • float: left/right;

    需要解决浮动带来的问题，如父级高度塌陷

    • 父级overflow: hidden;
    • 子级最后加个空标签，clear: both;
    • 使用父级的 ::after ，加上 clear: both;

  • display: flex;

    最大的问题就是兼容

# 让一个元素水平垂直居中

/* <div class="parent">
  <div class="child"></div>
</div> */

.parent {
  width: 100px;
  height: 100px;
  background-color: #000;
}
.child {
  width: 50px;
  height: 50px;
  background-color: #eee;
}

/* 方法一：flex */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 方法二：position + margin 要已知子元素宽高*/
/* .parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
} */

/* 方法三：position + translate */
/* .parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} */

/* 方法四：position + margin: auto */
/* .parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
} */

/* 方法五：flex/grid + margin: auto */
/* .parent {
  display: flex;
}
.child {
  margin: auto;
} */

/* 方法六：grid + place-items */
/* place-items = justify-items + align-items */
/* .parent {
  display: grid;
  place-items: center;
} */

/* 方法七：table-cell */
/* table-cell是不支持设置width: 100%;想让parent和其容器宽度一致最好设置一个dispaly: table的父容器。*/
/* .parent {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.child {
  display: inline-block;
} */

/* 方法八：父级的伪元素after和子级inline-block */
/* .parent {
  text-align: center;
}
.parent::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}
.child {
  display: inline-block;
  vertical-align: middle;
} */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

实现一个div垂直居中，其距离屏幕左右两边各10px，其高度始终是宽度的50%。同时div中有一个文字A，文字需要水平垂直居中。

参考地址: div垂直居中，左右10px，高度始终为宽度一半 (opens new window)

/* <div class="parent">
  <div class="child">
    <div class="box">A</div>
  </div>
</div> */

.parent {
  margin: 0 10px;
  height: 100%;
  /* flex布局让块垂直居中 */
  display: flex;
  align-items: center;
}
.child {
  background: #eee;
  position: relative;
  width: 100%;
  height: 0;
  /* 在默认的水平文档流方向下，CSS margin和padding属性的垂直方向的
  百分比值都是相对于宽度计算的，这个和top, bottom等属性的百分比值不一样 */
  padding-bottom: 50%;
}
.box {
  /* 父元素相对定位，那绝对定位下的子元素宽高若设为百分比，
  相对于父元素的(content + padding)值，如果子元素不是绝对定位，
  那宽高设为百分比是相对于父元素的宽高，标准盒模型下是content,
  IE盒模型是content+padding+border。 */
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# 如何用CSS实现“品”字布局

.box {
  width: 100px;
  height: 100px;
}
.box1 {
  margin-left: 50px;
}
.box2, .box3 {
  float: left;
}

/* 或者 */
/* .box1 {
  margin: 100px auto 0;
}
.box2 {
  margin-left: 50%;
  float: left;
  transform: translateX(-100%);
}
.box3 {
  float: left;
  transform: translateX(-100%);
} */
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# CSS哪些属性可以继承

  1. 字体系列属性

    • font：组合字体
    • font-family：规定元素的字体系列
    • font-weight：设置字体的粗细
    • font-size：设置字体的尺寸
    • font-style：定义字体的风格
    • font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
    • font-stretch：允许你使文字变宽或变窄。所有主流浏览器都不支持。
    • font-size-adjust：为某个元素规定一个 aspect 值，字体的小写字母 "x" 的高度与"font-size" 高度之间的比率被称为一个字体的 aspect 值。这样就可以保持首选字体的 x-height。

  2. 文本系列属性

    • text-indent：文本缩进
    • text-align：文本水平对齐
    • line-height：行高
    • word-spacing：增加或减少单词间的空白（即字间隔）
    • letter-spacing：增加或减少字符间的空白（字符间距）
    • text-transform：控制文本大小写
    • direction：规定文本的书写方向
    • color：文本颜色

  3. 元素可见性

    • visibility

  4. 列表属性

    • list-style-type
    • list-style-image
    • list-style-position
    • list-style

  5. 光标属性

    • cursor

# position的值

  • static（默认）：按照正常文档流进行排列。
  • relative（相对定位）：不脱离文档流，参考自身静态位置通过top、bottom、left、right定位。
  • absolute（绝对定位）：脱离文档流，参考距其最近一个不为static的父级元素通过top、bottom、left、right定位。
  • fixed（固定定位）：脱离文档流，所固定的参照对像是可视窗口。
  • sticky（粘粘定位）对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版（根据正常文档流进行定位），当卷动到屏幕外时则表现如fixed（相对它的最近滚动祖先（nearest scrolling ancestor）和containing block（最近块级祖先nearest block-level ancestor））。该属性的表现是现实中你见到的吸附效果。（CSS3）

CSS中能脱离文档流的方式就三种：float、absolute、fixed。

实际上对于非根元素来讲，包含块还有一种可能，那就是如果position属性是absolute或fixed，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的：

  • transform或perspective的值不是none。
  • will-change的值是transform或perspective。
  • filter的值不是none或will-change的值是filter（只在Firefox下生效）。
  • contain的值是paint。

# 纯CSS实现三角形

  1. border

    采用的是均分原理,把矩形分为4等份,这4等份其实都是边框。核心就是给块级元素设置宽高为0,设置边框的宽度,不需要显示的边框使用透明色;

    div {
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-top-color: skyblue;
}
    1
    2
    3
    4
    5
    6

    由纯边框组成的矩形可以看成是四个三角形拼接组成的

  2. clip-path裁剪获得

    div {
  width: 50px;
  height: 50px;
  background-color: red;
  /*每一对在列表中的参数都代表了多边形顶点的坐标， xi 与 yi ，i代表顶点的编号，即，第i个顶点。*/
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  /* 所以效果是三角形底边是矩形的底边，顶点是底边对边的中点 */
}
    1
    2
    3
    4
    5
    6
    7
    8

  3. 渐变linear-gradient实现

    div {
  width: 50px;
  height: 50px;
  /* 往右下渐变，前面一半是白色，后面一半是红色，效果为副对角线分割的两个三角形右下那个 */
  background:linear-gradient(to bottom right, #fff 0%, #fff 49.9%, red 50%,red 100%);
}
    1
    2
    3
    4
    5
    6

# position跟display、overflow、float这些特性相互叠加后会怎么样

参考地址：position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？ (opens new window)

  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 的时候或者它是根元素(html)的时候，调整 display 的值； 最后，非根元素，并且非浮动元素，并且非绝对定位的元素，display 特性值同设置值。

# JS设置float

float是ECMAScript的保留字

  • IE9和webkit系列的支持['float']的方式
  • IE6-8，styleFloat
  • 其他，cssFloat
IE6-8 IE9+ FF Chrome Safari Opera
styleFloat √ √ × × × √
cssFloat × √ √ √ √ √
float × √ × √ √ ×
var oDiv = document.getElementById('div1');
oDiv.style.styleFloat = 'right'; //兼容ie6~8
oDiv.style.cssFloat = 'right'; //兼容标准浏览器以及ie9以上
1
2
3

# 对BFC的理解

参考文章：什么是BFC？看这一篇就够了 (opens new window)

BFC（块级格式化上下文：block formatting context）规定了内部的Block Box如何布局。

一个元素形成了BFC之后，那么它内部元素产生的布局不会影响到外部元素，外部元素的布局也不会影响到BFC中的内部元素。一个BFC就像是一个隔离区域，和其他区域互不影响。

定位方案：

  • 内部的Box会在垂直方向上一个接一个放置。
  • Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
  • 每个元素的margin box的左边，与包含块border box的左边相接触。
  • BFC的区域不会与float box重叠。
  • BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
  • 计算BFC的高度时，浮动元素也会参与计算。

满足下列条件之一就可触发BFC

  • 根元素，即html。
  • float的值不为none（默认）。
  • overflow的值不为visible（默认），即hidden，auto，scroll。
  • display的值为inline-block、table-cell、table-caption、flex、inline-flex。
  • position的值为absolute或fixed。

扩展：IFC指的是行级格式化上下文，它有这样的一些布局规则：

  • 行级上下文内部的盒子会在水平方向，一个接一个地放置。
  • 当一行不够的时候会自动切换到下一行。
  • 行级上下文的高度由内部最高的内联盒子的高度决定。

# 浮动带来的问题与如何清除浮动

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。

浮动带来的问题：

  • 父元素的高度无法被撑开，影响与父元素同级的元素
  • 与浮动元素同级的非浮动元素（内联元素）会跟随其后
  • 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

  • 父级div定义height
  • 最后一个浮动元素后加空div标签 并添加样式clear:both。
  • 包含浮动元素的父标签添加样式overflow为hidden或auto。
  • 父级div定义zoom

# 浏览器是怎样解析CSS选择器的

CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。

若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。

两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。

而在CSS解析完毕后，需要将解析的结果与DOM Tree的内容一起进行分析建立一棵Render Tree，最终用来进行绘图。

在建立Render Tree时（WebKit中的「Attachment」过程），浏览器就要为每个DOM Tree中的元素根据CSS的解析结果（Style Rules）来确定生成怎样的Render Tree。

# 在网页中的应该使用奇数还是偶数的字体

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了1px，但点阵没变），于是略显稀疏。

但是也不一定，很多网页也用奇数字体，比如知乎

# 怎么让Chrome支持小于12px的文字

span{
  font-size:10px;
  -webkit-transform:scale(0.8);
  display:block;
}
1
2
3
4
5

# 文字溢出显示省略号

单行文本

@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}
1
2
3
4
5
6

多行文本

@mixin text-ellipsis-line($line) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  overflow: hidden;
}
1
2
3
4
5
6

使用伪元素

p {
  position: relative;
  line-height: 1.5em;
  /*高度为需要显示的行数*行高，比如这里我们显示两行，则为3*/
  height: 3em;
  overflow: hidden;
}

p:after {
  content: '...';
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# CSS允许使用哪些不同的媒介类型

@media属性主要有四种类型（包括screen）：

  • all—适用于所有设备。
  • print—打印预览模式/打印页面。
  • speech——适用于“朗读”页面的屏幕阅读器
  • screen——计算机屏幕（默认）

# visibility:collapse是干嘛的

  1. 对于一般的元素，它的表现跟visibility：hidden;是一样的。元素是不可见的，但此时仍占用页面空间。
  2. 但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟display:none一样，也就是说，它们占用的空间也会释放，但是元素依旧存在，隐藏的行或列能够被其他内容使用。

使用场景：在element-ui中，表格的表头和内容是分开的，表格内容单独滚动，相当于是两个表格，下面那个表格列又需要和表头的列对齐，需要隐藏内容区的表头，但是又能被列当做对齐使用

# 绝对定位元素与非绝对定位元素的百分比

  • 绝对定位元素的宽高百分比是相对于临近的position不为static的祖先元素的padding box来计算的。
  • 非绝对定位元素的宽高百分比则是相对于父元素的content box来计算的。

# 图片base64编码的优点和缺点

base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的url属性。

使用base64的优点是：

  • 减少一个图片的HTTP请求

使用base64的缺点是：

  • 根据base64的编码原理，编码后的大小会比原文件大小大1/3，如果把大图片编码到html/css中，不仅会造成文件体积的增加，影响文件的加载速度，还会增加浏览器对html或css文件解析渲染的时间。
  • 使用base64无法直接缓存，要缓存只能缓存包含base64的文件，比如HTML或者CSS，这相比于直接缓存图片的效果要差很多。
  • 兼容性的问题，ie8以前的浏览器不支持。

# css3的all属性

input {
  color: inherit;
  font-size: inherit;
  font-family: inherit;
}
/* 相当于简写 */
input {
  all: inherit;
}
1
2
3
4
5
6
7
8
9

all属性实际上是所有CSS属性的缩写，表示：所有的CSS属性都怎样怎样，但是，不包括unicode-bidi和direction这两个CSS属性。支持三个CSS通用属性值，initial,inherit,unset

  • initial是初始值的意思，也就是该元素元素都除了unicode-bidi和direction以外的CSS属性都使用属性的默认初始值。
  • inherit是继承的意思，也就是该元素除了unicode-bidi和direction以外的CSS属性都继承父元素的属性值。
  • unset是取消设置的意思，也就是当前元素浏览器或用户设置的CSS忽略，然后如果是具有继承特性的CSS，如color，则使用继承值；如果是没有继承特性的CSS属性，如background-color，则使用初始值。

# 如何修改chrome自动填充表单的背景

chrome表单自动填充后，input文本框的背景会变成黄色的，通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式：

{
  background-color: rgb(250,255,189)!important;
  background-image: none!important;
  color: rgb(0,0,0)!important;
}
1
2
3
4
5

对chrome默认定义的background-color，background-image，color使用important是不能提高其优先级的，但是其他属性可使用。

使用足够大的纯色内阴影来覆盖input输入框的黄色背景，处理如下

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
  border: 1px solid #CCC !important;
}
1
2
3
4
5
6

但是上面的阴影遮盖会出现白色，如果是白色背景无所谓，如果需要透明背景则需要使用background-color的过渡

input:-internal-autofill-previewed,
input:-internal-autofill-selected {
  -webkit-text-fill-color: #fff !important;
  transition: background-color 0s linear 5000s !important;
}
input:-webkit-autofill {
  -webkit-text-fill-color: #fff !important;
}
1
2
3
4
5
6
7
8

# 用CSS让页面里的字体变清晰，变细

  • webkit内核的私有属性：-webkit-font-smoothing，用于字体抗锯齿，使用后字体看起来会更清晰舒服。
  • 在MacOS测试环境下面设置-webkit-font-smoothing: antialiased;但是这个属性仅仅是面向MacOS，其他操作系统设 置后无效。
{
  -webkit-font-smoothing: antialiased; /* chrome、safari */
  -moz-osx-font-smoothing: grayscale; /* firefox */
}
1
2
3
4

# font-style属性中italic和oblique的区别

italic和oblique这两个关键字都表示“斜体”的意思。

它们的区别在于，italic是使用当前字体的斜体字体，而oblique只是单纯地让文字倾斜。如果当前字体没有对应的斜体字体，则退而求其次，解析为oblique，也就是单纯形状倾斜。

# 设备像素,css像素,设备独立像素,dpr,ppi之间的区别

  • 设备像素指的是物理像素，一般手机的分辨率指的就是设备像素，一个设备的设备像素是不可变的。
  • 设备独立像素（逻辑像素）是操作系统为了方便开发者而提供的一种抽象。程序与操作系统之间描述长度是以设备独立像素为单位。
  • css像素和设备独立像素是等价的，不管在何种分辨率的设备上，css像素的大小应该是一致的，css像素是一个相对单位，它是相对于设备像素的，一个css像素的大小取决于页面缩放程度和dpr的大小。
  • dpr指的是设备像素和设备独立像素的比值，一般的pc屏幕，dpr=1。在iphone4时，苹果推出了retina屏幕，它的dpr为2。屏幕的缩放会改变dpr的值。
  • ppi指的是每英寸的物理像素的密度，ppi越大，屏幕的分辨率越大。

# layout viewport,visual viewport和ideal viewport的区别

移动端一共需要理解三个viewport的概念的理解。

  • 第一个视口是布局视口，在移动端显示网页时，由于移动端的屏幕尺寸比较小，如果网页使用移动端的屏幕尺寸进行布局的话，那么整个页面的布局都会显示错乱。所以移动端浏览器提供了一个layout viewport布局视口的概念，使用这个视口来对页面进行布局展示，一般layout viewport的大小为980px，因此页面布局不会有太大的变化，我们可以通过拖动和缩放来查看到这个页面。
  • 第二个视口指的是视觉视口，visual viewport指的是移动设备上我们可见的区域的视口大小，一般为屏幕的分辨率的大小。visual viewport和layout viewport的关系，就像是我们通过窗户看外面的风景，视觉视口就是窗户，而外面的风景就是布局视口中的网页内容。
  • 第三个视口是理想视口，由于layout viewport一般比visual viewport要大，所以想要看到整个页面必须通过拖动和缩放才能实现。所以又提出了ideal viewport的概念，ideal viewport下用户不用缩放和滚动条就能够查看到整个页面，并且页面在不同分辨率下显示的内容大小相同。ideal viewport其实就是通过修改layout viewport的大小，让它等于设备的宽度，这个宽度可以理解为是设备独立像素，因此根据ideal viewport设计的页面，在不同分辨率的屏幕下，显示应该相同。

# position:fixed在android下无效怎么处理

因为移动端浏览器默认的viewport叫做layout viewport。在移动端显示时，因为layout viewport的宽度大于移动端屏幕的宽度，所以页面会出现滚动条左右移动，fixed的元素是相对layout viewport来固定位置的，而不是移动端屏幕来固定位置的，所以会出现感觉fixed无效的情况。

如果想实现fixed相对于屏幕的固定效果，我们需要改变的是viewport的大小为ideal viewport，可以如下设置：

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

# 如果需要手动写动画，你认为最小时间间隔是多久，为什么

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms=16.7ms

# overflow:scroll时不能平滑滚动的问题怎么处理

-webkit-overflow-scrolling：属性控制元素在移动设备上是否使用滚动回弹效果

  • auto：使用普通滚动，当手指从触摸屏上移开，滚动会立即停止。
  • touch：使用具有回弹效果的滚动，当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

# 画一条0.5px的线

  • 移动端采用meta viewport的方式

    <meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5">
    1

    操作步骤：在根元素html设置font-size，将元素转换成rem，通过 window.devicePixelRatio拿到dpr，再写meta，设置viewport的scale : 1/dpr

  • 采用transform:scale

    .xxx {
  height: 1px;
  transform: scaleY(0.5);
  /* 直接scaleY在chrome上变虚 需要加上transform-origin */
  transform-origin: 50% 100%;
}
    1
    2
    3
    4
    5
    6

  • 采用border-image的方式

  • 采用box-shadow：box-shadow: inset 0px -1px 1px -1px #ccc

  • SVG

# min-width/max-width和min-height/max-height属性间的覆盖规则

  • max-width会覆盖width，即使width是行类样式或者设置了!important。
  • min-width会覆盖max-width，此规则发生在min-width和max-width冲突的时候。

# letter-spacing与word-spacing的区别

letter-spacing可以用来控制字符之间的间距，这里说的“字符”包括英文字母、汉字以及空格等。

letter-spacing具有以下一些特性。

  • 继承性。
  • 默认值是normal而不是0。虽然说正常情况下，normal的计算值就是0，但两者还是有差别的，在有些场景下，letter-spacing会调整normal的计算值以实现更好的版面布局。
  • 支持负值，且值足够大的时候，会让字符形成重叠，甚至反向排列。
  • 和text-indent属性一样，无论值多大或多小，第一行一定会保留至少一个字符。
  • 支持小数值，即使0.1px也是支持的。
  • 暂不支持百分比值。

letter-spacing作用于所有字符，但word-spacing仅作用于空格字符。换句话说，word-spacing的作用就是增加空格的间隙宽度。

# 隐藏元素的background-image到底加不加载

根据测试，一个元素如果display计算值为none，在IE浏览器下（IE8～IE11，更高版本不确定）依然会发送图片请求，Firefox浏览器不会，至于Chrome和Safari浏览器则似乎更加智能一点：如果隐藏元素同时又设置了background-image，则图片依然会去加载；如果是父元素的display计算值为none，则背景图不会请求，此时浏览器或许放心地认为这个背景图暂时是不会使用的。

如果不是background-image，而是<img>元素，则设置display:none在所有浏览器下依旧都会请求图片资源。

还需要注意的是如果设置的样式没有对应的元素，则background-image也不会加载。hover情况下的background-image，在触发时加载。

# 实现一个宽高自适应的正方形

/*1.第一种方式是利用vw来实现*/
.square {
  width: 10%;
  height: 10vw;
  background: tomato;
}

/*2.第二种方式是利用元素的margin/padding百分比是相对父元素width的性质来实现*/
.square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}

/*3.第三种方式是利用子元素的margin-top的值来实现的*/
.square {
  width: 30%;
  overflow: hidden;
  background: yellow;
}

.square::after {
  content: '';
  display: block;
  margin-top: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# space-around和space-evenly的区别

justify-content: space-around/space-evenly

  • space-around：只有flex元素之间的空间是相等的，第一个flex元素和最后一个flex元素和容器的空间是flex元素间空间的一半
  • space-evenly：flex元素之间和flex元素和容器的空间总是相等的

# CSS元素左侧自动溢出

检索或设置文本流的方向。

direction: ltr | rtl

  • ltr：文本流从左到右（默认就是从左到右）。
  • rtl：文本流从右到左（像阿拉伯语就是从右到左读的）。

# nth-child(an+b)中n的计算规则

首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从 1 开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）。

a和b都必须为整数，并且元素的第一个子元素的下标为1。换言之就是，该伪类匹配所有下标在集合 { an + b; n = 0, 1, 2, ...} 中的子元素。另外需要特别注意的是，an必须写在b的前面，不能写成b+an的形式。

总结：n是从0开始的，元素下标是从1开始的，所有表达式计算后的值必须大于0才有效

# 表格列等宽

table {
  table-layout: fixed;
  width: 350px;
}
1
2
3
4

# 使用属性选择器用于空链接

a[href^="http"]:empty::before {
  content: attr(href);
}
1
2
3

# 纯CSS实现鼠标双击

<div class="test3">
  <span>
    <input type="text" value=" " readonly="true" />
    <a href="https://www.baidu.com/">Double click me</a>
  </span>
</div>
1
2
3
4
5
6

思路：让input和a标签都通过定位改变层级，输入框设置宽高把a标签盖住，通过伪类:focus修改层级，让a标签显示出来，就可以实现双击

# iPhoneX系列安全区域适配

设置viewport-fit为cover

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, viewport-fit=cover">
1

增加适配层

/* @supports 检测是否支持某CSS特性，如：@supports ( display: flex ) */

/* 适配 iPhone X 顶部填充*/
@supports (top: env(safe-area-inset-top)) {
  body,
  .header{
    padding-top: constant(safe-area-inset-top, 40px);
    padding-top: env(safe-area-inset-top, 40px);
    padding-top: var(safe-area-inset-top, 40px);
  }
}
/* 判断iPhoneX 将 footer 的 padding-bottom 填充到最底部 */
@supports (bottom: env(safe-area-inset-bottom)) {
  body,
  .footer{
    padding-bottom: constant(safe-area-inset-bottom, 20px);
    padding-bottom: env(safe-area-inset-bottom, 20px);
    padding-top: var(safe-area-inset-bottom, 20px);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

safe-area-inset-top，safe-area-inset-right，safe-area-inset-bottom，safe-area-inset-left，safe-area-inset-*由四个定义了视口边缘内矩形的top，right，bottom和left的环境变量组成，这样可以安全地放入内容，而不会有被非矩形的显示切断的风险。对于矩形视口，例如普通的笔记本电脑显示器，其值等于零。对于非矩形显示器（如圆形表盘，iPhoneX屏幕），在用户代理设置的四个值形成的矩形内，所有内容均可见。

  • env()用法为env(<custom-ident>,<declaration-value>?)，第一个参数为自定义的区域，第二个为备用值。
  • var()用法为var(<custom-property-name>,<declaration-value>?)，作用是在env()不生效的情况下，给出一个备用值。
  • constant()被css2017-2018年为草稿阶段，是否已被标准化未知。而其他iOS浏览器版本中是否有此函数未知，作为兼容处理而添加进去。

# 行内元素和块级元素的区别

行内元素和块级元素的主要区别在于它们的显示方式、‌包含关系、‌以及盒模型属性的设置。‌

  • 显示方式：‌行内元素不会占据整行，‌而是在一条直线上排列，‌通常是水平方向排列。‌块级元素则会占据一行，‌垂直方向排列，‌默认宽度是它本身父容器的100%，‌与内容无关。‌
  • 包含关系：‌块级元素可以包含行内元素和其他的块级元素，‌而行内元素则不能包含块级元素，‌只能包含文本或其他行内元素。‌不过，‌有一个例外，‌即<a>元素可以包含块级元素，‌例如<div>。‌
  • 盒模型属性：‌行内元素的宽度和高度设置无效，‌而块级元素的宽度和高度可以设置。‌行内元素的margin上下无效，‌而块级元素的margin和padding都可以设置（行内元素的padding有效）。‌
  • ‌行内元素转化为块元素可以通过设置display: block;实现，‌而块元素转化为行内元素则通过设置display: inline;实现。‌

# 基线baseline如何确定

对于西文字体，基线就是小写x字母的下边缘。对于中文，没有明确的基线定义，但可以理解为文字的底部对齐。

确定规则：

  • 父元素没有行内块元素（inline-block）：

    • 如果父元素中没有行内块元素，基线通常是父元素的底部。

  • 父元素有行内块元素：

    • 如果父元素中有行内块元素，基线通常是最后一个行内块元素的底部。
    • 如果父元素中有多个行内块元素，基线会根据哪个元素更接近父元素底部来确定。

  • 父元素有行内块元素且包含文字：

    • 这种情况基线是最后一行文字的基线。

  • 行内块元素嵌套：

    • 如果行内块元素嵌套，基线以最下面的行内块元素底部为准。

扩展：

  • line-height属性设置的行高也就是定义的两行文字基线之间的距离。
  • vertical-align: middle：使元素的中部与父元素的基线加上父元素x-height的一半对齐（就是小写x字母的中间交叉点那个位置）。x-height，意思也就是小写字母x的高度。
  • 1ex等于页面上使用的第一个可用字体的x字高度。
  • margin会影响基线的位置，transform和position不会，因为不会改变元素在标准文档流中的位置。
最近更新: 2025年03月19日 13:31:15

前端面试-JavaScript