CSS面试相关知识点

简单介绍使用图片 base64 编码的优点和缺点?

2020.05.20

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

使用base64的优点是：

减少一个图片的HTTP请求

使用base64的缺点是：

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

一般一些网站的小图标可以使用base64图片来引入。

margin 重叠问题的理解?

2020.05.20

块级元素的上外边距（margin-top）与下外边距（margin-bottom）有时会合并为单个外边距，这样的现象称为“margin合并”。

产生折叠的必备条件：margin必须是邻接的!

根据w3c规范，两个margin是邻接的必须满足以下条件：

必须是处于常规文档流（非float和绝对定位）的块级盒子，并且处于同一个BFC当中。
没有线盒，没有空隙，没有padding和border将他们分隔开
都属于垂直方向上相邻的外边距，可以是下面任意一种情况
元素的margin-top与其第一个常规文档流的子元素的margin-top
元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom

margin合并的3种场景：

1. 相邻兄弟元素margin合并。

解决方案: 设置块状格式化上下文元素（BFC）

2. 父级和第一个/最后一个子元素的margin合并。

对于margin-top合并，可以进行如下操作（满足一个条件即可）：

父元素设置为块状格式化上下文元素；
父元素设置border-top值；
父元素设置padding-top值；
父元素和第一个子元素之间添加内联元素进行分隔。

对于margin-bottom合并，可以进行如下操作（满足一个条件即可）：

父元素设置为块状格式化上下文元素；
父元素设置border-bottom值；
父元素设置padding-bottom值；
父元素和最后一个子元素之间添加内联元素进行分隔；
父元素设置height、min-height或max-height。

3. 空块级元素的margin合并。

设置垂直方向的border；
设置垂直方向的padding；
里面添加内联元素（直接Space键空格是没用的）；
设置height或者min-height。

BFC(块级格式化上下文)

2020.05.20

BFC是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。BFC 就好像一个结界，结界里面的东西不能影响外面的布局，也就是说，BFC的子元素再翻江倒海，都不会影响外面的元素。所以：

BFC本身不会发生margin重叠。
BFC可以彻底解决子元素浮动带来的的高度坍塌和文字环绕问题。

BFC的创建方法

根元素；
浮动元素 (float不为none的元素)；
绝对定位元素 (元素的position为absolute或fixed)；
inline-blocks(元素的 display: inline-block)；
表格单元格(元素的display: table-cell，HTML表格单元格默认属性)；
overflow的值不为visible的元素；
弹性盒 flex boxes (元素的display: flex或inline-flex)；

WARNING

BFC包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。

CSS 优化、提高性能的方法有哪些？

2020.05.20

加载性能：

css压缩：将写好的css进行打包压缩，可以减少很多的体积。
css单一样式：当需要下边距和左边距的时候，很多时候选择:margin:top0 bottom0;但margin-bottom:bottom;margin-left:left;执行的效率更高。
减少使用@import,而建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。

选择器性能：

关键选择器（keyselector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；
如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。
避免使用通配规则，如*{}计算次数惊人！只对需要用到的元素进行选择。
尽量少的去对标签进行选择，而是用class。
尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。
了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。

渲染性能：

慎重使用高性能属性：浮动、定位。
尽量减少页面重排、重绘。
去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。
属性值为0时，不加单位。
属性值为浮动小数0.**，可以省略小数点之前的0。
标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。
不使用@import前缀，它会影响css的加载速度。
选择器优化嵌套，尽量避免层级过深。
css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。
正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。webfonts通常体积庞大，而且一些浏览器在下载webfonts时会阻塞页面渲染损伤性能。

可维护性、健壮性：

将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。
样式与内容分离：将css代码定义到外部css中。

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

2020.05.21

样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。

试想一下，如果采用从左至右的方式读取CSS规则，那么大多数规则读到最后（最右）才会发现是不匹配的，这样做会费时耗能，最后有很多都是无用的；而如果采取从右向左的方式，那么只要发现最右边选择器不匹配，就可以直接舍弃了，避免了许多无效匹配。

推荐阅读:《探究 CSS 解析原理》

margin 和 padding 分别适合什么场景使用？

2020.05.21

margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。

margin用于布局分开元素使元素与元素互不相干。
padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段距离。

何时应当使用margin：

需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。

何时应当时用padding：

需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。

为什么不建议使用统配符初始化 css 样式？

2020.05.21

采用*{ pading:0;margin:0; }这样的写法好处是写起来很简单，但是通配符，需要把所有的标签都遍历一遍，当网站较大时，样式比较多，这样写就大大的加强了网站运行的负载，需要很长一段时间加载。

出于性能的考虑，并不是所有标签都会有padding和margin，因此对常见的具有默认padding和margin的元素初始化即可，并不需使用通配符*来初始化。

设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别？

2020.05.21
设备像素指的是物理像素，一般手机的分辨率指的就是设备像素，一个设备的设备像素是不可变的。
css像素和设备独立像素是等价的，不管在何种分辨率的设备上，css像素的大小应该是一致的，css像素是一个相对单位，它是相对于设备像素的，一个css像素的大小取决于页面缩放程度和dpr的大小。
dpr指的是设备像素和设备独立像素的比值，一般的pc屏幕，dpr=1。在iphone4时，苹果推出了retina屏幕，它的dpr 为2。屏幕的缩放会改变dpr的值。
ppi指的是每英寸的物理像素的密度，ppi越大，屏幕的分辨率越大。

layoutviewport、visualviewport 和 idealviewport 的区别？

2020.05.21
如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。 ppk把这个浏览器默认的viewport叫做layoutviewport。
layoutviewport的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表浏览器可视区域的大小，ppk把这个viewport叫做visualviewport。
idealviewport是最适合移动设备的viewport，idealviewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为idealviewport的宽度（单位用px），那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。idealviewport的意义在于，无论在何种分辨率的屏幕下，那些针对idealviewport而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。

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

2020.05.21

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

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

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

这也是为什么我们开发移动端项目的时候要设置viewport的原因。

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

2020.05.21

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

在ios下默认的-webkit-overflow-scrolling:auto; 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止,会产生滚动卡顿的效果。

需要修改为:

-webkit-overflow-scrolling:touch;

浏览器如何判断是否支持 webp 格式图片？

2020.05.21

宽高判断法。通过创建image对象，将其src属性设置为webp格式的图片，然后在onload事件中获取图片的宽高，如果能够获取，则说明浏览器支持webp格式图片。如果不能获取或者触发了onerror函数，那么就说明浏览器不支持webp格式的图片。
canvas判断方法。我们可以动态的创建一个canvas对象，通过canvas的toDataURL将设置为webp格式，然后判断返回值中是否含有image/webp字段，如果包含则说明支持WebP，反之则不支持

transition 和 animation 的区别?

2020.05.21

transition关注的是CSSproperty的变化，property值和时间的关系是一个三次贝塞尔曲线。
animation作用于元素本身而不是样式属性，可以使用关键帧的概念，应该说可以实现更自由的动画效果。

什么是幽灵空白节点？

2020.05.21

幽灵空白节点是内联盒模型中非常重要的一个概念，具体指的是：在HTML5文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个空白节点一样。这个空白节点永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样，但又确确实实地存在，表现如同文本节点一样，因此，我们称之为幽灵空白节点。

content 与替换元素的关系？

2020.05.21

content属性生成的对象称为“匿名替换元素”。

我们使用content生成的文本是无法选中、无法复制的，好像设置了userselect:none声明一般，但是普通元素的文本却可以被轻松选中。同时，content生成的文本无法被屏幕阅读设备读取，也无法被搜索引擎抓取。

WARNING

因此，千万不要自以为是地把重要的文本信息使用content属性生成，因为这对可访问性和SEO都很不友好。

content生成的内容不能左右:empty伪类。
content动态生成值无法获取。

margin:auto 的填充规则？

2020.05.21

margin:auto;是具有强烈的计算意味的关键字，用来计算元素对应方向应该获得的剩余间距大小。但是触发margin:auto计算有一个前提条件，就是width或height为auto时，元素是具有对应方向的自动填充特性的。

如果一侧定值，一侧auto，则auto为剩余空间大小。
如果两侧均是auto，则平分剩余空间。

什么是基线和 x-height？

2020.05.21

字母x的下边缘（线）就是我们的基线。

x-height指的就是小写字母x的高度，术语描述就是基线和等分线（meanline）（也称作中线，midline）之间的距离。在CSS世界中，middle指的是基线往上1/2x-height高度。我们可以近似理解为字母x交叉点那个位置。

ex是CSS中的一个相对单位，指的是小写字母x的高度，没错，就是指x-height。ex的价值就在其副业上不受字体和字号影响的内联元素的垂直居中对齐效果。内联元素默认是基线对齐的，而基线就是x的底部，而1ex就是一个x的高度。

line-height 的特殊性？

2020.05.21

（1）对于非替换元素的纯内联元素，其可视高度完全由line-height决定。对于文本这样的纯内联元素，line-height就是高度计算的基石，用专业说法就是指定了用来计算行框盒子高度的基础高度。

（2）内联元素的高度由固定高度和不固定高度组成，这个不固定的部分就是这里的“行距”。换句话说，line-height之所以起作用，就是通过改变“行距”来实现的。在CSS中，“行距”分散在当前文字的上方和下方，也就是即使是第一行文字，其上方也是有“行距”的，只不过这个“行距”的高度仅仅是完整“行距”高度的一半，因此，也被称为“半行距”。

（3）行距=line-height-font-size。

（4）border以及line-height等传统CSS属性并没有小数像素的概念。如果标注的是文字上边距，则向下取整；如果是文字下边距，则向上取整。

（5）对于纯文本元素，line-height直接决定了最终的高度。但是，如果同时有替换元素，则line-height只能决定最小高度。

（6）对于块级元素，line-height对其本身是没有任何作用的，我们平时改变line-height，块级元素的高度跟着变化实际上是通过改变块级元素里面内联级别元素占据的高度实现的。

（7）line-height的默认值是normal，还支持数值、百分比值以及长度值。为数值类型时，其最终的计算值是和当前font-si ze相乘后的值。为百分比值时，其最终的计算值是和当前font-size相乘后的值。为长度值时原意不变。

（8）如果使用数值作为line-height的属性值，那么所有的子元素继承的都是这个值；但是，如果使用百分比值或者长度值作为属性值，那么所有的子元素继承的是最终的计算值。

（9）无论内联元素line-height如何设置，最终父级元素的高度都是由数值大的那个line-height决定的。

（10）只要有“内联盒子”在，就一定会有“行框盒子”，就是每一行内联元素外面包裹的一层看不见的盒子。然后，重点来了，在每个 “行框盒子”前面有一个宽度为0的具有该元素的字体和行高属性的看不见的“幽灵空白节点”。

vertical-align 的特殊性？

2020.05.21

（1）vertical-align的默认值是baseline，即基线对齐，而基线的定义是字母x的下边缘。因此，内联元素默认都是沿着字母x的下边缘对齐的。对于图片等替换元素，往往使用元素本身的下边缘作为基线。：一个inline-block元素，如果里面没有内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘；否则其基线就是元素里面最后一行内联元素的基线。

（2）vertical-align:top就是垂直上边缘对齐，如果是内联元素，则和这一行位置最高的内联元素的顶部对齐；如果display 计算值是table-cell的元素，我们不妨脑补成<td>元素，则和<tr>元素上边缘对齐。

（3）vertical-align:middle是中间对齐，对于内联元素，元素的垂直中心点和行框盒子基线往上1/2x-height处对齐。对于table-cell元素，单元格填充盒子相对于外面的表格行居中对齐。

（4）vertical-align支持数值属性，根据数值的不同，相对于基线往上或往下偏移，如果是负值，往下偏移，如果是正值，往上偏移。

（5）vertical-align属性的百分比值则是相对于line-height的计算值计算的。

（6）vertical-align起作用是有前提条件的，这个前提条件就是：只能应用于内联元素以及display值为table-cell的元素。

（7）table-cell元素设置vertical-align垂直对齐的是子元素，但是其作用的并不是子元素，而是table-cell元素自身。

overflow 的特殊性？

2020.05.21

（1）一个设置了overflow:hidden声明的元素，假设同时存在border属性和padding属性，则当子元素内容超出容器宽度高度限制的时候，剪裁的边界是borderbox的内边缘，而非paddingbox的内边缘。

（2）HTML中有两个标签是默认可以产生滚动条的，一个是根元素<html>，另一个是文本域<textarea>。

（3）滚动条会占用容器的可用宽度或高度。

（4）元素设置了overflow:hidden声明，里面内容高度溢出的时候，滚动依然存在，仅仅滚动条不存在！

元素的层叠顺序？

2020.05.21

层叠顺序，英文称作 stackingorder，表示元素发生层叠时有着特定的垂直显示顺序。

层叠顺序

white-space 与换行和空格的控制？

2020.05.21

white-space属性声明了如何处理元素内的空白字符，这类空白字符包括Space（空格）键、Enter（回车）键、Tab（制表符）键产生的空白。因此，white-space可以决定图文内容是否在一行显示（回车空格是否生效），是否显示大段连续空白（空格是否生效）等。

normal：合并空白字符和换行符。
pre：空白字符不合并，并且内容只在有换行符的地方换行。
nowrap：该值和normal一样会合并空白字符，但不允许文本环绕。
pre-wrap：空白字符不合并，并且内容只在有换行符的地方换行，同时允许文本环绕。
pre-line：合并空白字符，但只在有换行符的地方换行，允许文本环绕。

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

2020.05.21

/*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%;
}

← 布局技巧 svg基础知识 →