前端八股文---HTML-CSS-常⻅⾯试题---整理中

01-HTML-CSS-常⻅⾯试题

1.HTML 标签有哪些⾏内元素

a
img
picture
span
input
textarea
select
label

2.说说你对元素语义化的理解

元素语义化就是⽤正确的元素做正确的事情。虽然在理论上，所以的html元素都可以通过css样式实现
相同的事情，但是这么做会使事情复杂化，所以我们需要元素语义化来降低复杂度。
元素语义化在我们实际的开发中有很多好处，⽐如：
提⾼代码的阅读性和可维护性;
减少coder之间的沟通成本;
能让语⾳合成⼯具正确识别⽹⻚元素的⽤途，以便做出正确的反应
有利于SEO(Search Engine Optimization)

3.HTML 中有哪些语义化标签

header
footer
main
aside
article
section
address
summary/details
menu
h1/h2/h3/h4/h5/h6
img
p
strong/italic

4.什么是 URL 编码 (URL Encode)

encodeURI ⽤来编码URI，其不会编码保留字符。
encodeURIComponent ⽤来编码 URI参数，除了字符：A-Z a-z 0-9 - _ . ! ~ * ' ( )，都将会转义。

5.说说你对SEO的理解

SEO就是搜索引擎优化(Search Engine Optimization)，SEO通过了解搜索引擎的运⾏规则来调整⽹站，
以提⾼⽹站的曝光度,以及⽹站的排名。
Google 搜索引擎的⼯作流程主要分为三个阶段：
抓取：Google 会使⽤名为“抓取⼯具”的⾃动程序搜索⽹络，以查找新⽹⻚或更新后的⽹⻚。Google 会
将这些⽹⻚的地址（即⽹址）存储在⼀个⼤型列表中，以便⽇后查看。我们会通过许多不同的⽅法查找
⽹⻚，但主要⽅法是跟踪我们已知的⽹⻚中的链接。
编⼊索引：Google 会访问它通过抓取得知的⽹⻚，并会尝试分析每个⽹⻚的主题。Google 会分析⽹⻚
中的内容、图⽚和视频⽂件，尝试了解⽹⻚的主题。这些信息存储在 Google 索引中，⽽ Google 索引
是⼀个存储在海量计算机中的巨⼤数据库。
呈现搜索结果：当⽤户在 Google 上进⾏搜索时，Google 会尝试确定最优质的搜索结果。“最佳”结果取
决于许多因素，包括⽤户的位置、语⾔、设备（桌⾯设备或⼿机）以及先前⽤过的搜索查询。例如，在
⽤户搜索“⾃⾏⻋维修店”后，Google 向巴黎⽤户显示的答案与向⾹港⽤户显示的答案有所不同。⽀付费
⽤不能提⾼⽹⻚在 Google 搜索结果中的排名，⽹⻚排名是完全依靠算法完成的。

6.‘+’ 与 ‘~’ 选择器有什么不同

~ 是匹配元素之后的选择器
+ 是匹配相邻元素选择器

<template>
  <div>我是div</div>
  <p>我是p</p>
  <p>我是p</p>
  <div>我是div</div>
  <p>我是p</p>
  <div>
    <p>我是div下⾯的p</p>
    <p>我是div下⾯的p</p>
  </div>
  <span>我是span</span>
</template>
<style>
div + p {
  color: red;
}
</style>

/* 第⼀个p标签变红⾊了 */

7.说明text-align居中的条件

text-align : 直接翻译过来设置⽂本的⽔平对⻬⽅式 (是继承属性)(是继承属性)
text-align 并不控制块元素⾃⼰的对⻬，只控制它的⾏内内容的对⻬
MDN解释: 定义⾏内内容（例如⽂字）如何相对它的块⽗元素对⻬(可以设置图⽚居中)
W3C官⽅⽂档解释: 设置⾏内(inline-level)元素(没有填满⽗元素)在快级⽗元素的对⻬⽅式

8. line-height为什么可以让⽂字垂直居中？

line-height :两⾏⽂字基线( baseline )之间的间距 基线( baseline`):与⼩写字⺟x最底部对⻬的线
⼀⾏⽂本 等于 line-height
⾏⾼ - ⽂本⾼度 = ⾏距
属性值:
normal :取决于⽤户端。桌⾯浏览器（包括Firefox）使⽤默认值，约为1.2，这取决于元素的
font-family
<数字> :该属性的应⽤值是这个⽆单位数字<数字>乘以该元素的字体⼤⼩ 这是设置lineheight的推荐⽅法，不会在继承时产⽣不确定的结果
<⻓度> :指定<⻓度>⽤于计算 line box 的⾼度 以 em 为单位的值可能会产⽣不确定的结果
<百分⽐> :与元素⾃身的字体⼤⼩有关。计算值是给定的百分⽐值乘以元素计算出的字体⼤
⼩。百分⽐值可能会带来不确定的结果
height :元素的整体⾼度 line-height :元素中每⼀⾏⽂字所占据的⾼度
假设div中只有⼀⾏⽂字，如何让这⾏⽂字在div内部垂直居中 让 line-height 等同于 height

9.说说盒⼦模型包含哪些内容？

内容
通过宽度和⾼度设置
内边距
通过padding设置
padding: padding-top padding-right padding-bottom padding-left;
边框
通过border设置
div~p{
color:red;
}
/* div后⾯的p标签都变成红⾊了 */

border: border-width border-style border-color
外边距
通过margin设置
margin: margin-top margin-right margin-bottom margin-left

10.说说你对margin的传递和折叠的理解

margin的传递⼀般是⽗⼦块元素之间,有margin-top传递,margin-bottom传递.
margin-top传递: 当块级元素的顶部线和⽗元素的顶部线重叠，那么这个块级元素的margin-top值
会传递给⽗元素
margin-bottom传递:当块级元素的底部线和⽗元素的底部线重叠，那么这个块级元素的marginbottom值会传递给⽗元素
折叠: 指的是 垂直⽅向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个
margin.
它有两个兄弟块级元素之间的上下margin的折叠,也有⽗⼦块元素之间的margin折叠

11.CSS 隐藏⻚⾯中某个元素的⼏种⽅法

display: none
通过 CSS 操控 display，移出⽂档流
opacity: 0
透明度为 0，仍在⽂档流中，当作⽤于其上的事件(如点击)仍有效
visibility: hidden
透明度为 0，仍在⽂档流中，但作⽤于其上的事件(如点击)⽆效，这也是
visibility:hidden 与 opacity: 0 的区别
content-visibility
移出⽂档流，但是再次显示时消耗性能低
绝对定位于当前⻚⾯的不可⻅位置

12.box-sizing有什么作⽤？content-box和border-box

的区别
box-sizing⽤来设置盒⼦模型中宽⾼的计算⽅式：
content-box: padding、border都布置在width、height外边
border-box: padding、border都布置在width、height⾥边
position: absolute;
top: -9000px;
left: -9000px;

13.为什么会发⽣样式抖动

因为没有指定元素具体⾼度和宽度,⽐如数据还没有加载进来时元素⾼度是 100px(假设这⾥是

100px)
数据加载进来后,因为有了数据,然后元素被撑⼤,所有出现了抖动

14.说说浮动常⻅的规则？

元素⼀旦浮动后, 脱离标准流
朝着向左或向右⽅向移动，直到⾃⼰的边界紧贴着包含块（⼀般是⽗元素）或者其他浮动元
素的边界为⽌
定位元素会层叠在浮动元素上⾯
如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界
浮动元素之间不能层叠
如果⼀个元素浮动，另⼀个浮动元素已经在那个位置了，后浮动的元素将紧贴着前⼀个浮动
元素（左浮找左浮，右浮找右浮）
如果⽔平⽅向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充⾜的空间为⽌
浮动元素不能与⾏内级内容层叠，⾏内级内容将会被浮动元素推出
⽐如⾏内级元素、inline-block元素、块级元素的⽂字内容
⾏内级元素、inline-block元素浮动后，其顶部将与所在⾏的顶部对⻬

15.为什么需要清除浮动？清除浮动有⼏种⽅法？

为什么需要清除浮动：
1）由于浮动元素脱离了标准流，变成了浮动元素，不再向⽗元素汇报⾼度。所以⽗元素在计算⾼度时
并没有将浮动元素的⾼度计算进来，因此就造成了⾼度塌陷的问题 。解决⾼度塌陷的问题就叫做清除浮
动（3分）
2）清除浮动的⽬的：是为了让⽗元素在计算⾼度的时候把浮动⼦元素的⾼度计算进去
清除浮动有⼏种⽅法：
给⽗元素设置固定⾼度，扩展性不好，不推荐
在⽗元素的最后增加⼀个空的块级⼦元素，并设置让他clear:both , 但是增加了⽆意义的空标签，
违反了结构与样式分离的原则
给⽗元素添加⼀个伪元素(推荐)
overflow:auto触发BFC来清除浮动（前提⾼度为auto）

16.伪类与伪元素有什么区别?

伪类使⽤单冒号，⽽伪元素使⽤双冒号。如 :hover 是伪类， ::before 是伪元素
伪元素会在⽂档流⽣成⼀个新的元素，并且可以使⽤ content 属性设置内容

17.结构伪类nth-child(n)和nth-of-type(n)的区别？

:nth-child
是结构伪类选择器，选中⽗元素的第⼏个⼦元素 , 计数时与元素的类型⽆关。
:nth-of-type
是结构伪类选择器和nth-child类似，但是计数时只计算同种类型的元素。

18.元素或⽂本⽔平居中实现⽅案有哪⼏种？

1. text-align: center
   指定该属性的元素可以让其内部：⾏内元素，⾏内块级元素和⽂本⽔平居中。
2. margin: 0 auto
   该属性可以让具有宽度的块级元素⽔平居中。
3. 定位
   position: relative;
   left:50%
   transfrom:translate(-50%,0); (⾏内元素⽆效)
   或者
   width: 200px
   .clear_fix::after {
   content: “”;
   display: block;
   clear:both;
   visibility: hidden; /* 浏览器兼容性 /
   height: 0; / 浏览器兼容性 */
   }
   .clear_fix {
   zoom: 1; / IE6/7兼容性 */
   }
   height:200px
   position: absolute; （需要设置宽）
   left: 0;
   right: 0;
   margin: 0 auto;
   或者
   position: absolute;
   left:50%
   width: 200px;
   margin-left: -100px（需要居中的元素使⽤）
4. flex布局
   display: flex;（1分）
   justify-content: center (flex item居中)

19.元素或⽂本垂直居中实现⽅案有哪⼏种？

1）line-height（2分）
可以让块级和⾏内元素（⾏内⾮替换元素，⾏内替换元素，⾏内块级元素）的⽂本垂直居中。
2）定位
position: relative;
top:50%
transfrom:translate(0,-50%)(⾏内元素⽆效)
或者
width: 200px
height:200px
position: absolute; （需要设置⾼）
left: 0;
right: 0;
margin: 0 auto;
或者
position: absolute;
top:50%
height: 200px;
margin-top: -100px （需要居中的元素使⽤）
3）flex布局实现
display: flex;
align-items: center (flex item居中)

20.rem、em、vw、vh 单位是什么意思?

rem : 单位是根据根元素(即 html )的 font-size ⼤⼩来计算
em : 单位是根据⾃身元素的 font-size ⼤⼩来计算
vw : viewport width，即视⼝的宽
vh : viewport height，即视⼝的⾼

21.什么是视⼝(viewport)？

pc端的视⼝
就是浏览器的可视区域
移动端视⼝
布局视⼝
会按照⼀个默认宽度980px,来布局⼀个⻚⾯盒⼦的内容
为了可以显示完整的⻚⾯,会对整个⻚⾯进⾏缩⼩
视觉视⼝
显示在可视区域的视⼝,就是视觉视⼝
理想视⼝
当布局视⼝ = 视觉视⼝的时候,就是理想视⼝
怎样是这理想视⼝呢?

22.移动端适配的⽅案有哪些？

1. 百分⽐布局

    <meta name="viewport" content="width=device-width, initialscale=1.0" />
    <meta
      name="viewport"
      content="width=device-width, initialscale=1.0, user-scalable=no, minimum-scale=1.0, maximumscale=1.0"
    />

	因为不同属性百分⽐的值，相对的可能是不同的参照物，所以百分⽐往很难统⼀。

2. 视⼝ + ( rem + 动态HTML的 font-size )

	动态计算 HTML font-zise：
	⽤媒体查询来修改HTML font-size( 缺点不能实时改变font-size的⼤⼩ )
	⾃⼰编写JS来实现修改HTML font-size的⼤⼩(可以实时修改字体⼤⼩)
	是引⽤lib-flexiable库来实现（原理是JS动态改HTML font-size⼤⼩）
	px 转成rem：
	⼿动计算 rem
	Less的映射来计算
	postcss-pxtorem插件来实现（需依赖webpack或Vite）
	cssrem VSCode插件来实现

3. 视⼝ + vw
   px转成rem
   ⼿动计算vw
   Less的映射来计算
   postcss-px-to-viewport的插件（需依赖webpack或Vite）
   ccsrem VSCode插件
4. flex弹性布局
   flex container 属性
   flex item 属性
   23.什么是Flexible Box布局？
   CSS Flexible Box布局俗称Flexbox，是⼀种⼀维布局模型，它具有灵活⾼效的布局，在项⽬之间
   分配空间来控制它们的对⻬结构，即，它是⼀种布局模型，提供了⼀种简单⽽⼲净的⽅式来排列项
   ⽬。
   CSS Flexible Box布局允许容器内的响应式元素根据屏幕或设备⼤⼩⾃动排列。
   Flex 布局有两根轴线，分别为主轴和交叉轴。
   主轴由 flex-direction 定义，另⼀根轴垂直于它。

24.flex布局container 和 item的属性分别有哪些？以及其作⽤？

display: flex
flex container
flex-direction 决定主轴⽅向,默认值为row。
flex-wrap 决定flex container是单⾏还是多⾏,默认值为nowrap。
flex-flow 前⾯两个属性的组合写法,默认值为row。
justify-content 决定flex items在主轴的对⻬⽅式,默认值为flex-start。
align-items 决定flex items在交叉轴的对⻬⽅式,默认值为normal。
align-content 决定多⾏flex items在交叉轴的对⻬⽅式,默认值为stretch。
flex item
flex-grow: 决定flex items如何拉伸,默认值为0。
flex-shrink: 决定flex items如何收缩,默认值为1。
flex-basis:决定flex items的基本size⼤⼩, 默认值为auto。
flex: 是前⾯3个属性的组合写法。
align-self:指定flex item⾃身的排序⽅式,默认值为auto。
order:决定了flex items的排布顺序，越⼩越靠前,默认值为0。

25.常⻅的CSS Transform形变有哪些?

transform属性允许对某⼀个元素进⾏某些形变, 包括旋转，缩放，倾斜或平移等。transform对于⾏内
级⾮替换元素（如a，span）是⽆效的。
translate(x, y) :平移，⽤于移动元素在平⾯上的位置
scale(x, y) :缩放，可改变元素的⼤⼩。
rotate(deg) :旋转，表示旋转的⻆度 。
skew(deg, deg) :倾斜，定义了⼀个元素在⼆维平⾯上的倾斜转换

26.说出CSS Transition和Animation动画的区别

transition:
只能定义两个状态：开始状态和结束状态，不能定义中间状态
不能重复执⾏动画，除⾮⼀再触发动画
需要在特定状态触发后才能执⾏，⽐如某属性修改了
animation:
可以⽤@keyframes定义动画序列（每⼀帧如何执⾏）
通过设置animation-iteration-count来规定动画执⾏的次数
不需要触发特定状态即可执⾏
animation动画⽐transition多了:
animation-iteration-count， animation-direction， animation-fill-mode 和 animationplay-state属性

27.css 动画与 js 动画哪个性能更好

CSS3 的动画:
在性能上会稍微好⼀些，浏览器会对 CSS3 的动画做⼀些优化（⽐如专⻔新建⼀个图层⽤来跑动
画） 　　
代码相对简单，但在动画控制上不够灵活 　　
兼容性不好 　　
部分动画功能⽆法实现（如滚动动画，视差滚动等）
JavaScript 的动画：
正好弥补了css缺点，控制能⼒很强，可以单帧的控制、变换，同时写得好完全可以兼容 IE6，并且
功能强⼤。
总结：
对于⼀些复杂控制的动画，使⽤ javascript 会⽐较好。⽽在实现⼀些⼩的交互动效的时候，可以多
考虑 CSS

28.说说vertical-align的作⽤以及应⽤场景？

vertical-align影响⾏内级元素在⼀个⾏盒中垂直⽅向的位置，默认值为baseline对⻬
baseline(默认值)：基线对⻬
top：把⾏内级盒⼦的顶部跟line boxes顶部对⻬
middle：⾏内级盒⼦的中⼼点与⽗盒基线加上x-height⼀半的线对⻬
bottom：把⾏内级盒⼦的底部跟line box底部对⻬
不同应⽤情景分析：
只有⽂字时：⾏盒包裹内容,⽂字的bottom-line和⾏盒底部对⻬
有图⽚和⽂字时:图⽚的底部和⽂字的baseline对⻬
有图⽚，有⽂字，有inline-block（⽐图⽚要⼤ : 图⽚的底部,⾏内块底部和⽂字的baseline对⻬
有图⽚，有⽂字，有inline-block（⽐图⽚要⼤）⽽且设置了margin-bottom: 图⽚的底部,⾏内块
margin-bottom底部和⽂字的baseline对⻬
有图⽚、⽂字、 inline-block（⽐图⽚要⼤）⽽且设置了margin-bottom并且有⽂字 :⽂字的
baseline和图⽚的底部,⾏内块内最后⼀⾏⽂字的baseline对⻬

29.说说你对BFC的理解

block format context(块级格式化上下⽂)
是⻚⾯的⼀块渲染区域 并且有⼀套渲染规则,决定了⼦元素如何定位 以及与其他元素之间的排
列 布局之间的关系
BFC是⼀个独⽴的布局环境 相当于是⼀个容器 在其中按照⼀定的规则对块级元素进⾏摆放 ,并
且不会影响其他的布局环境中的盒⼦,如果⼀个元素触发BFC则BFC中的元素布局不受外界的影
响
块级元素在标准流中的布局是属于BFC的
创建BFC的条件:
根元素: body/:root
float left/right
position absolute/fixed
overflow: 除visible
display: inline-block/table-cell/table-caption ,flex/grid…
特点
垂直⽅向 ⾃上⽽下排布
垂直⽅向的间距由margin决定
同⼀个BFC中 盒⼦之间的margin会折叠
BFC中 每个元素的左边缘紧挨着包含快的左边缘
计算 BFC 的⾼度时，需要计算浮动元素的⾼度
BFC内部不会影响外部元素
BFC区域不会与浮动的元素发⽣重叠
作⽤
解决margin折叠的问题
解决⾼度塌陷的问题
前提 :浮动的⽗级BFC⾼度为auto
创建两栏布局
左边浮动 右边overflow:hidden

30.介绍下 BFC、IFC、GFC 和 FFC

BFC（Block formatting contexts）：块级格式上下⽂
⻚⾯上的⼀个隔离的渲染区域，那么他是如何产⽣的呢？可以触发BFC的元素有float、position、
overflow、display：table-cell/ inline-block/table-caption ；BFC有什么作⽤呢？⽐如说实现多栏
布局’
IFC（Inline formatting contexts）：内联格式上下⽂
IFC的line box（线框）⾼度由其包含⾏内元素中最⾼的实际⾼度计算⽽来（不受到竖直⽅向的
padding/margin影响)IFC中的line box⼀般左右都贴紧整个IFC，但是会因为float元素⽽扰乱。
float元素会位于IFC与与line box之间，使得line box宽度缩短。 同个ifc下的多个line box⾼度会不
同 IFC中时不可能有块级元素的，当插⼊块级元素时（如p中插⼊div）会产⽣两个匿名块与div分隔
开，即产⽣两个IFC，每个IFC对外表现为块级元素，与div垂直排列。 那么IFC⼀般有什么⽤呢？
⽔平居中：当⼀个块要在环境中⽔平居中时，设置其为inline-block则会在外层产⽣IFC，通过textalign则可以使其⽔平居中。 垂直居中：创建⼀个IFC，⽤其中⼀个元素撑开⽗元素的⾼度，然后设
置其vertical-align:middle，其他⾏内元素则可以在此⽗元素下垂直居中。
GFC（GrideLayout formatting contexts）：⽹格布局格式化上下⽂
当为⼀个元素设置display值为grid的时候，此元素将会获得⼀个独⽴的渲染区域，我们可以通过在
⽹格容器（grid container）上定义⽹格定义⾏（grid definition rows）和⽹格定义列（grid
definition columns）属性各在⽹格项⽬（grid item）上定义⽹格⾏（grid row）和⽹格列（grid
columns）为每⼀个⽹格项⽬（grid item）定义位置和空间。那么GFC有什么⽤呢，和table⼜有
什么区别呢？⾸先同样是⼀个⼆维的表格，但GridLayout会有更加丰富的属性来控制⾏列，控制对
⻬以及更为精细的渲染语义和控制。
FFC（Flex formatting contexts）:⾃适应格式上下⽂
display值为flex或者inline-flex的元素将会⽣成⾃适应容器（flex container），可惜这个⽜逼的属
性只有⾕歌和⽕狐⽀持，不过在移动端也⾜够了，⾄少safari和chrome还是OK的，毕竟这俩在移
动端才是王道。Flex Box 由伸缩容器和伸缩项⽬组成。通过设置元素的 display 属性为 flex 或
inline-flex 可以得到⼀个伸缩容器。设置为 flex 的容器被渲染为⼀个块级元素，⽽设置为 inlineflex 的容器则渲染为⼀个⾏内元素。伸缩容器中的每⼀个⼦元素都是⼀个伸缩项⽬。伸缩项⽬可以
是任意数量的。伸缩容器外和伸缩项⽬内的⼀切元素都不受影响。简单地说，Flexbox 定义了伸缩
容器内伸缩项⽬该如何布局。

31.说出不同像素之间的差异？

分为三种像素:设备像素(物理像素),设备独⽴像素(逻辑像素),css像素
设备像素(物理像素)
是指显示器上真实的像素,在购买显示器或者⼿机的时候，提到的设备分辨率就是设备像素的
⼤⼩
iPhone X的分辨率 1125 x 2436，指的就是设备像素
设备独⽴像素(逻辑像素)
如果⾯向开发者我们使⽤设备像素显示⼀个100px的宽度，那么在不同屏幕上显示效果会是不
同的
开发者针对不同的屏幕很难进⾏较好的适配，编写程序必须了解⽤户的分辨率来进⾏开发
所以在设备像素之上，操作系统为开发者进⾏抽象，提供了逻辑像素的概念
⽐如你购买了⼀台显示器，在操作系统上是以1920x1080设置的显示分辨率，那么⽆论你购
买的是2k、4k的显示器，对于开发者来说，都是1920x1080的⼤⼩
如果物理像素很⼤的时候,⽐如2k,4k等,可以理解为⼀个逻辑像素⾥⾯由多个物理像素来渲染
的
css像素
默认情况下就是设备独⽴像素(也就是逻辑像素)

32.分析⽐较 opacity: 0、visibility: hidden、display:

none 优劣和适⽤场景。
结构
display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility:
hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可⻅，不能点击 opacity:
0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可⻅，可以点击
继承
display: none和opacity: 0：是⾮继承属性，⼦孙节点消失由于元素从渲染树消失造成，通过修改
⼦孙节点属性⽆法显示。 visibility: hidden：是继承属性，⼦孙节点消失由于继承了hidden，通过
设置visibility: visible;可以让⼦孙节点显式。
性能
displaynone : 修改元素会造成⽂档回流,读屏器不会读取display: none元素内容，性能消耗较⼤
visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素
内容 opacity: 0 ： 修改元素会造成重绘，性能消耗较少
联系
它们都能让元素不可⻅

33.如何解决移动端 Retina 屏 1px 像素问题

在移动端 Web 开发中，UI 设计稿中设置边框为 1 像素，前端在开发过程中如果出现 border:1px ，
测试会发现在 Retina 屏机型中，1px 会⽐较粗，即是较经典的移动端 1px 像素问题。
以 iphone6 为例，iphone6 的屏幕宽度为 375px ，设计师做的视觉稿⼀般是750px ，也就是 2x ，这
个时候设计师在视觉稿上画了 1px 的边框，于是你就写了 border:1px ，所以1px边框问题产⽣了。
对设计师来说它的 1px 是相对于 750px 的（物理像素），对你来说你的 1px 是相对于 375px 的
（css像素），实际上你应该是 border:0.5px 。下⾯来看⼀下解决⽅案：
0.5px 实现
但在 IOS7 及以下和 Android 等其他系统⾥， 0.5px 将会被显示为 0px 。所以我们需要通过 JS 检
测浏览器能否处理 0.5px 的边框
优点：简单，没有副作⽤
缺点：⽀持 iOS 8+，安卓待兼容
viewport + rem 实现
通过设置缩放，让 CSS 像素等于真正的物理像素。
.border-1px { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border-1px { border: 0.5px solid #999 }
}
/* dpr=2 和 dpr=3 情况下 border 相差⽆⼏，下⾯代码可以省略*/
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border-1px { border: 0.333333px solid #999 }
}
if (window.devicePixelRatio && devicePixelRatio >= 2) {
var testElem = document.createElement(‘div’);
testElem.style.border = ‘.5px solid transparent’;
document.body.appendChild(testElem);
}
if (testElem.offsetHeight == 1) {
document.querySelector(‘html’).classList.add(‘hairlines’);
}
document.body.removeChild(testElem);
}
缺点：
通过 JS 对⽂档进⾏修改，所以性能上有⼀定影响
会对项⽬中所有使⽤ rem 单位的对象进⾏影响。如果是⽼项⽬，则会全部更改 css 样式（不适合
⽼项⽬改造）
伪元素 + transform 实现（推荐）
为什么⽤伪元素？ 因为伪元素 ::after 或 ::before 是独⽴于当前元素，可以单独对其缩放⽽不影
响元素本身的缩放
基于 media 查询判断不同的设备像素⽐对线条进⾏缩放：
.border-1px:before{
content: ‘’;
position: absolute;
top: 0;
height: 1px;
width: 100%;
background-color: #999;
transform-origin: 50% 0%;
}
@media only screen and (-webkit-min-device-pixel-ratio:2){
.border-1px:before{
transform: scaleY(0.5);
}
}
@media only screen and (-webkit-min-device-pixel-ratio:3){
.border-1px:before{
transform: scaleY(0.33);
const scale = 1 / window.devicePixelRatio;
const viewport = document.querySelector(‘meta[name=“viewport”]’);
if (!viewport) {
viewport = document.createElement(‘meta’);
viewport.setAttribute(‘name’, ‘viewport’);
window.document.head.appendChild(viewport);
}
viewport.setAttribute(‘content’, ‘width=device-width,user-scalable=no,initialscale=’ + scale + ‘,maximum-scale=’ + scale + ‘,minimum-scale=’ + scale);
// 设置根字体⼤⼩
var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + ‘px’;
docEl.style.fontSize = fontsize;
// 在CSS中⽤rem单位就⾏了
}
}
注意：如果需要满⾜圆⻆，需要给伪类也加上 border-radius
优点：兼容性好，⽆副作⽤，推荐使⽤
svg 实现(推荐)
因为 svg 是⽮量图形，它的 1px 对应的物理像素就是 1px
可以搭配 PostCSS 的 postcss-write-svg 使⽤：
@svg border-1px {
height: 2px;
@rect {
fill: var(–color, black);
width: 100%;
height: 50%;
}
}
.svg {
border: 1px solid transparent;
border-image: svg(border_1px param(–color #00b1ff)) 2 2 stretch;
}
编译后：
.svg { border: 1px solid transparent; border-image:
url(“data:image/svg+xml;charset=utf-8,%3Csvg xmlns=‘http://www.w3.org/2000/svg’
height=‘2px’%3E%3Crect fill=‘%2300b1ff’ width=‘100%25’
height=‘50%25’/%3E%3C/svg%3E”) 2 2 stretch; }
优点：实现简单，可以实现圆⻆，
缺点：需要学习 svg 语法

34.如何⽤ css 实现多⾏⽂本溢出省略效果？并考虑兼容

性？
单⾏（推荐）：
p {
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
多⾏（推荐）：
p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // ⾏数
overflow: hidden;
width: 600px;
}
考虑兼容：
p{
position: relative;
line-height: 20px;
max-height: 40px;
overflow: hidden;
}
// 使⽤为元素
p::after{
content: “…”;
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}

35.如何计算⽩屏时间和⾸屏加载时间

⽩屏时间:
window.performance.timing.domLoading - window.performance.timing.navigationStart
⾸屏时间:
window.performance.timing.domInteractive - window.performace.timing.navigationStart

36.如何⾃定义滚动条的样式

滚动条相关样式都是伪元素，以 scrollbar 打头，有以下伪元素，从 -webkit 中可⻅兼容性⼀般，
不过⽆所谓，现在 Chrome 浏览器占⼤头
::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和⽔平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的 corner 部分的部分样式(例:textarea 的可拖动按钮).
但其实最常⽤的是以下⼏个伪元素：滚动条、滑块、轨道，如下滚动条设置成功

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  border-radius: 3px;
  background: rgba(0, 0, 0);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08);
}
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(0, 0, 1);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}