前端题目类型

HTML+CSS常见面试题

1. HTML标签有哪些行内元素
   • img、picture、span、input、textarea、select、label
2. 说说你对元素语义化的理解
   • 元素语义化就是用正确的元素做正确的事情。虽然理论上所有html元素都可通过css样式实现相同效果，但这样会使事情复杂化，所以需要元素语义化来降低复杂度。
   • 实际开发中，元素语义化好处很多：提高代码的阅读性和可维护性；减少开发者之间的沟通成本；能让语音合成工具正确识别网页元素的用途，以便做出正确的反应；有利于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），目的是提高网站的曝光度以及网站的排名。
   • Google搜索引擎的工作流程主要分为三个阶段：
     • 抓取：Google会使用名为“抓取工具”的自动程序搜索网络，查找新网页或更新后的网页，并将这些网页的地址（即网址）存储在一个大型列表中，以便日后查看。主要通过跟踪已知网页中的链接查找网页。
     • 编入索引：Google会访问通过抓取得知的网页，并尝试分析每个网页的主题。Google会分析网页中的内容、图片和视频文件，尝试了解网页的主题，这些信息存储在Google索引中，Google索引是一个存储在海量计算机中的巨大数据库。
     • 呈现搜索结果：当用户在Google上进行搜索时，Google会尝试确定最优质的搜索结果。“最佳”结果取决于许多因素，包括用户的位置、语言、设备（桌面设备或手机）以及先前用过的搜索查询。例如，用户搜索“自行车维修店”后，Google向巴黎用户显示的答案与向香港用户显示的答案有所不同。支付费用不能提高网页在Google搜索结果中的排名，网页排名是完全依靠算法完成的。
6. '+‘与’~'选择器有什么不同
   • ~是匹配元素之后的选择器。
   • +是匹配相邻元素选择器。
7. 说明text-align居中的条件
   • text-align是设置文本的水平对齐方式，是继承属性。它并不控制块元素自己的对齐，只控制它的行内内容的对齐。
   • MDN解释：定义行内内容（例如文字）如何相对它的块父元素对齐（可以设置图片居中）。
   • W3C官方文档解释：设置行内（inline - level）元素（没有填满父元素）在块级父元素的对齐方式。
8. line-height为什么可以让文字垂直居中?
   • line-height指两行文字基线（baseline）之间的间距。基线是与小写字母x最底部对齐的线 。行高 - 文本高度 = 行距 。
   • normal：取决于用户端。桌面浏览器（包括Firefox）使用默认值，约为1.2。
   • <数字>：该属性的应用值是这个无单位数字乘以该元素的字体大小，这是设置line-height的推荐方法，不会在继承时产生不确定的结果。
   • <长度>：指定长度用于计算line box的高度，以em为单位的值可能会产生不确定的结果。
   • <百分比>：与元素自身的字体大小有关，计算值是给定的百分比值乘以元素计算出的字体大小，百分比值可能会带来不确定的结果。
   • 假设div中只有一行文字，让line-height等同于height，这行文字就能在div内部垂直居中。
9. 说说盒子模型包含哪些内容?
   • 宽度和高度：通过宽度和高度设置。
   • 内边距：通过padding设置，padding: padding-top padding-right padding-bottom padding-left;。
   • 边框：通过border设置，border: border-width border-style border-color。
   • 外边距：通过margin设置，margin: margin-top margin-right margin-bottom margin-left。
10. 说说你对margin的传递和折叠的理解
    • margin-top传递：当块级元素的顶部线和父元素的顶部线重叠，一般发生在父子块元素之间，这个块级元素的margin-top值会传递给父元素。
    • margin-bottom传递：当块级元素的底部线和父元素的底部线重叠，这个块级元素的margin-bottom值会传递给父元素 。
    • 折叠：指的是垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin。它有兄弟块级元素之间的上下margin的折叠，也有父子块级元素之间的margin折叠。
11. CSS隐藏页面中某个元素的几种方法
    • display: none：元素完全从渲染树中消失，渲染时不占据任何空间，不能点击。
    • opacity: 0：透明度为0，仍在文档流中，作用于其上的事件（如点击）仍有效。
    • visibility: hidden：透明度为0，仍在文档流中，但作用于其上的事件（如点击）无效，这也是visibility:hidden与opacity: 0的区别。
    • content-visibility：移出文档流，但是再次显示时消耗性能低。
    • position: absolute; top: -9000px; left: -9000px;：绝对定位于当前页面的不可见位置。
12. box-sizing有什么作用?content-box和border-box的区别
    • box-sizing用来设置盒子模型中宽高的计算方式。
    • content-box：padding、border都布置在width、height外边。
    • border-box：padding、border都布置在width、height里边。
13. 为什么会发生样式抖动
    • 因为没有指定元素具体高度和宽度，比如数据还没有加载进来时元素高度是100px（假设），数据加载进来后，元素被撑大，所以出现了抖动。
14. 说说浮动常见的规则?
    • 元素一旦浮动后，脱离标准流。
    • 朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止。
    • 定位元素会层叠在浮动元素上面。
    • 如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界。
    • 浮动元素之间不能层叠（左浮找左浮，右浮找右浮）。
    • 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止。
    • 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出，比如行内级元素、inline-block元素、块级元素的文字内容。
    • 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐。
15. 为什么需要清除浮动?清除浮动有几种方法?
    • 为什么需要清除浮动：由于浮动元素脱离了标准流，变成了浮动元素，不再向父元素汇报高度，所以父元素在计算高度时并没有将浮动元素的高度计算进来，造成了高度塌陷的问题。解决高度塌陷的问题就叫做清除浮动。清除浮动的目的是为了让父元素在计算高度的时候把浮动子元素的高度计算进去。
    • 清除浮动的方法：
      • 给父元素设置固定高度，扩展性不好，不推荐。
      • 在父元素的最后增加一个空的块级子元素，并设置clear:both，但是增加了无意义的空标签，违反了结构与样式分离的原则。
      • 给父元素添加一个伪元素（推荐）：

.clear_fix::after {content: "";display: block;clear:both;visibility: hidden; /* 浏览器兼容性 */height: 0; /* 浏览器兼容性 */
}
.clear_fix {*zoom: 1; /* IE6/7兼容性 */
}

    - `overflow:auto`触发BFC（块级格式化上下文）来清除浮动（前提高度为auto）。

16. 伪类与伪元素有什么区别?
    • 伪类使用单冒号，而伪元素使用双冒号。如:hover是伪类，::before是伪元素。
    • 伪元素会在文档流生成一个新的元素，并且可以使用content属性设置内容。
17. 结构伪类nth-child(n)和nth-of-type(n)的区别?
    • :nth-child是结构伪类选择器，选中父元素的第几个子元素 ，计数时与元素的类型无关。
    • :nth-of-type是结构伪类选择器，类似:nth-child，但是计数时只计算同种类型的元素。
18. 元素或文本水平居中实现方案有哪几种?
    • text-align: center：指定该属性的元素可以让其内部行内元素、行内块级元素和文本水平居中。
    • margin: 0 auto：该属性可以让具有宽度的块级元素水平居中。
    • 定位：
      • position: relative; left:50%; transform:translate(-50%,0); （行内元素无效）。
      • 或者设置了宽度的情况：

width: 200px;
height:200px;
position: absolute; 
left: 0;
right: 0;
margin: 0 auto;

    - 或者：

position: absolute; 
width: 200px;
left:50%;
margin-left: -100px(需要居中的元素使用);

- **flex布局**：

display: flex;
justify-content: center; /* flex item居中 */

19. 元素或文本垂直居中实现方案有哪几种?
    • line-height：可以让块级和行内元素（行内非替换元素，行内替换元素，行内块级元素）的文本垂直居中。
    • 定位：
      • position: relative; top:50%; transform: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 (需要居中的元素使用);

- **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，来布局一个页面盒子的内容。为了可以显示完整的页面，会对整个页面进行缩小。可以通过<meta name="viewport" content="width=device-width, initial-scale=1.0" />设置布局视口的宽度。
      • 视觉视口：显示在可视区域的视口，就是视觉视口。
      • 理想视口：当布局视口 = 视觉视口的时候，就是理想视口 。可以通过<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">实现理想视口。
22. 移动端适配的方案有哪些?
    • 百分比布局：因为不同属性百分比的值，相对的可能是不同的参照物，所以百分比往往很难统一。
    • 视口 + (rem + 动态HTML的font-size )：
      • 动态计算HTML font-size：
        • 用媒体查询来修改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插件来实现 。
      • px转成vw：
        • 手动计算vw。
        • Less的映射来计算 。
        • postcss-px-to-viewport的插件（需依赖webpack或Vite） 。
        • cssrem VSCode插件。
    • flex弹性布局：利用flex container属性和flex item属性实现布局。
23. 什么是Flexible Box布局?
    • CSS Flexible Box布局俗称Flexbox，是一种一维布局模型，它具有灵活高效的布局，在项目之间分配空间来控制它们的对齐结构。它允许容器内的响应式元素根据屏幕或设备大小自动排列。
    • Flex布局有两根轴线，分别为主轴和交叉轴。主轴由flex-direction定义，另一根轴垂直于它。
24. flex布局container和item的属性分别有哪些?以及其作用?
    • flex container属性：
      • display: flex：定义元素为Flex容器。
      • flex-direction：决定主轴方向，默认值为row。
      • flex-wrap：决定flex container是单行还是多行，默认值为nowrap。
      • flex-flow：前面两个属性的组合写法，默认值为row nowrap。
      • 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规定动画执行次数。
      • 无需触发特定状态即可执行。
    • 性能与特点：
      • CSS3动画：浏览器会进行优化，如新建图层来运行动画，性能稍好，代码相对简单，但动画控制不够灵活，兼容性欠佳，部分动画功能（如滚动动画、视差滚动等）无法实现。
      • JavaScript动画：控制能力强，可单帧控制和变换，兼容性好（如兼容IE6），功能强大。复杂控制的动画适合用JavaScript；小的交互动效可优先考虑CSS。
27. play-state属性，动画与js动画哪个性能更好：在性能上，CSS3动画会因为浏览器的优化（如新建图层）稍好一些。但代码灵活性不如JavaScript动画。JavaScript动画能弥补CSS动画的缺点，控制能力强、功能强大且兼容性好。复杂动画适合用JavaScript，简单交互动效适合用CSS。
28. 说说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对齐；文字的margin - bottom底部和文字的baseline对齐。
      • 有图片、文字、inline - block（比图片大）且设置了margin - bottom并且有文字baseline时：图片的底部、行内块内最后一行文字的baseline对齐。
29. 说说你对BFC的理解
    • 定义：block format context（块级格式化上下文），是页面的一块渲染区域，有一套渲染规则，决定子元素如何定位以及与其他元素之间的排列布局关系 。
    • 创建条件：
      • 根元素：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）：页面上的一个隔离的渲染区域。通过float、position、overflow、display等属性可触发。可用于实现多栏布局、解决margin折叠和高度塌陷问题等。
    • IFC（Inline formatting contexts）：内联格式上下文。IFC的line box高度由其包含行内元素中最高的实际高度计算而来（不受竖直方向的padding/margin影响）。IFC中的line box一般左右都贴紧整个IFC，但会被float元素扰乱。IFC中不能有块级元素，插入块级元素会产生两个匿名块与该块级元素分隔开，形成两个IFC。可用于水平居中和垂直居中，如将块元素设置为inline - block产生IFC，利用text - align水平居中；创建IFC，用一个元素撑开父元素高度，设置vertical - align:middle实现其他行内元素垂直居中。
    • GFC（GrideLayout formatting contexts）：网格布局格式化上下文。当元素的display值为grid时，该元素会获得一个独立的渲染区域。通过在网格容器上定义网格定义行和列属性，以及在网格项目上定义网格行和列，可为每个网格项目定义位置和空间。与table相比，有更丰富的属性来控制行列、对齐和精细的渲染语义。
    • FFC（Flex formatting contexts）：自适应格式上下文。display值为flex或inline - flex的元素会生成自适应容器。由伸缩容器和伸缩项目组成，设置为flex的容器渲染为块级元素，inline - flex的容器渲染为行内元素。伸缩容器中的子元素为伸缩项目，可自由布局。目前部分浏览器支持，在移动端应用广泛。
31. 说出不同像素之间的差异?
    • 设备像素（物理像素）：显示器上真实的像素，设备分辨率（如iPhone X的1125x2436）指的就是设备像素。
    • 设备独立像素（逻辑像素）：是对设备像素的抽象，为开发者提供统一的像素概念。不同设备像素下，开发者使用设备独立像素可实现相对一致的显示效果。
    • css像素：默认情况下就是设备独立像素（逻辑像素）。在高分辨率屏幕（如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可让子孙节点显示。
    • 性能：
      • display:none：修改元素会造成文档回流，读屏器不会读取该元素内容，性能消耗较大。
      • visibility:hidden：修改元素只会造成本元素的重绘，性能消耗较少，读屏器读取该元素内容。
      • opacity: 0：修改元素会造成重绘，性能消耗较少。
    • 适用场景：
      • display:none：适用于在页面加载时就不需要显示，且不希望占用布局空间的元素。
      • visibility: hidden：适用于临时隐藏元素，且希望保留其占位空间的场景。
      • opacity: 0：适用于需要元素不可见但仍可交互（如点击）的情况。
33. 如何解决移动端Retina屏1px像素问题
    • 0.5px实现：利用媒体查询根据设备像素比设置边框宽度为0.5px（或0.333333px等）。但在IOS7及以下和部分Android浏览器中，0.5px可能显示为0px，需通过JS检测浏览器是否支持0.5px。优点是简单无副作用，缺点是兼容性有限。
    • viewport + rem实现：通过设置缩放，使CSS像素等于真正的物理像素。需要动态计算并设置根字体大小，在CSS中使用rem单位。缺点是通过JS修改文档会影响性能，且会影响项目中所有使用rem单位的对象，不适合老项目改造。
    • 伪元素 + transform实现（推荐）：利用伪元素（如::after或::before）独立于当前元素的特性，基于媒体查询判断设备像素比，对伪元素进行缩放来实现1px效果。若要满足圆角，需给伪类也加上border - radius。优点是兼容性好，无副作用。
    • svg实现（推荐）：svg是矢量图形，1px对应的物理像素就是1px。可搭配PostCSS的postcss - write - svg使用。优点是实现简单，可实现圆角；缺点是需要学习svg语法。
34. 如何用css实现单行和多行文本溢出省略效果?并考虑兼容
    • 单行（推荐）：

p {overflow: hidden; text - overflow: ellipsis; white - space: nowrap; 
}

- **多行（推荐）**：

p {display: -webkit - box; -webkit - line - clamp: 3; /* 行数 */-webkit - box - orient: vertical;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.performance.timing.navigationStart。
36. 如何自定义滚动条的样式
    • 滚动条相关样式都是伪元素，以scrollbar打头，兼容性一般（主要是-webkit -前缀），但Chrome浏览器使用广泛。
    • 常用伪元素：
      • ::-webkit - scrollbar：整个滚动条。
      • ::-webkit - scrollbar - thumb：滚动条上的滚动滑块。
      • ::-webkit - scrollbar - track：滚动条轨道。
    • 示例代码：

::-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);
}