前端面试题总结HTMLCSS部分

前端面试题总结HTMLCSS部分前端面试中HTML与CSS作为前端开发的基础核心内容，考察频率远高于各类框架API，是面试官判断候选人基础功底与项目实践经验的核心依据。HTML高频考点1.对HTML语义化的理解HTML语义化指根据内容的结构语义，选择对应含义的标签进行开发，而非统一使用div和span无语义标签搭建结构，HTML5新增的<header>、<nav>、<article>、<section>、<main>、<aside>、<footer>、<figure>等都是典型的语义化标签。语义化的核心价值主要有三点：第一，提升SEO友好性，搜索引擎爬虫可以通过语义标签直接识别页面不同模块的内容权重，更准确的提取页面结构信息，利于页面排名；第二，支持无障碍访问，屏幕阅读器等辅助设备可以根据语义标签解读内容，比如盲人用户使用读屏软件时，可以通过<nav>标签直接识别导航区域，通过标题标签区分内容层级，全是无语义div的页面读屏软件无法正确识别内容；第三，提升代码可维护性，团队协作开发中，开发人员可以通过标签语义快速理解模块功能，降低对命名规则的依赖，提升代码可读性。常见误区需要注意：语义化不是完全禁止使用div和span，在没有对应语义的容器场景下，div和span仍然是最优选择；其次不要错用语义，不要为了语义化把块级元素放到行内元素中，一个页面建议只保留一个<h1>标签，符合搜索引擎优化规则。面试常延伸问题：article和section怎么区分？article是独立完整的内容块，抽离出来单独存在仍然具有完整意义，比如一篇博客文章、一个商品卡片、一条用户评论都适合用article；section是对内容的分组，一般需要带标题，只是把相关内容聚合在一起，本身不具备完整独立性，如果只是需要容器包裹，仍然优先选择div而非section。2.doctype的作用，严格模式与混杂模式的区别doctype是文档类型声明，放在HTML文档的最顶部，不属于HTML标签，作用是告诉浏览器当前文档遵循哪个HTML版本规范渲染，避免浏览器进入非标准的混杂模式。严格模式又称标准模式，指浏览器按照W3C发布的HTML标准规范渲染页面；混杂模式又称怪异模式，指浏览器按照早年非标准的渲染规则渲染页面，用来兼容网景时代、IE早期版本编写的未声明doctype的老页面。如果HTML中缺失doctype或者doctype声明错误，浏览器会自动触发混杂模式。两种模式核心差异体现在盒模型计算、样式解析规则上：怪异模式下，元素设置的width会默认包含border和padding，不需要手动设置box-sizing:border-box，而标准模式下，默认width仅包含内容区；此外，很多旧CSS特性的解析规则、行内元素垂直居中、表格高度计算都存在差异。HTML5的doctype之所以简写为<!DOCTYPEhtml>，是因为HTML5不基于SGML标准，不需要引用DTD文档类型定义，而HTML4的doctype需要引入DTD，因为HTML4基于SGML。3.行内元素、块级元素、空元素的区别与分类块级元素默认独占一行，宽度默认继承父容器宽度，支持设置宽高，常见块级元素有：div、h1-h6、p、ul、ol、li、所有语义化布局标签、form等。行内元素默认不换行，宽高由内容撑开，直接设置width、height不生效，常见行内元素有：span、a、i、em、strong、label、br等。其中img、input属于特殊的行内块元素，保留行内元素不换行的特性，同时支持设置宽高。空元素又称自闭合元素，只有开始标签没有闭合标签，内容写在标签属性中，常见空元素有：img、input、br、hr、meta、link等。常见误区：早年HTML规范不允许a标签嵌套块级元素，HTML5规范已经放开该限制，整块可点击的卡片用a包裹块级元素符合规范。4.metaviewport的原理与作用，移动端开发为什么必须设置metaviewport是用来控制移动端视口尺寸与缩放行为的标签，最早由苹果推出，现在已经成为所有移动端浏览器支持的通用规范。早年移动端屏幕尺寸远小于PC，浏览器默认会将布局视口设置为980px左右，将整个PC页面缩小后显示，导致页面文字过小，用户需要手动放大查看，体验极差，metaviewport就是用来解决这个问题的。标准写法为：html<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">各属性含义：width=device-width表示将布局视口宽度设置为设备的逻辑像素宽度，让页面宽度刚好和设备屏幕宽度一致，不需要缩放；initial-scale=1.0表示初始缩放比例为1，不做任何缩放；maximum-scale限制最大缩放比例，user-scalable=no禁止用户双指缩放，很多业务页面为了体验会添加该配置。移动端有三种视口概念：布局视口是浏览器用来渲染页面的基础容器，默认宽度980px；视觉视口是用户当前可见的页面区域，缩放会改变视觉视口大小；理想视口是刚好匹配设备屏幕宽度的布局视口，设置width=device-width就是让布局视口变成理想视口，这也是移动端页面适配的基础，所以必须添加。5.cookie、sessionStorage、localStorage的区别三者都是浏览器端存储数据的方案，核心区别如下：1.存储大小：cookie单个域名下总大小限制在4KB左右，sessionStorage和localStorage单个域名下可以存储5-10MB，远大于cookie。2.生命周期：cookie可以自定义过期时间，默认会话结束后过期；sessionStorage仅在当前浏览器标签页会话内有效，关闭标签页后自动清除；localStorage持久化存储，除非用户手动清除浏览器缓存或者代码主动删除，否则永久有效。3.作用域与共享：cookie同域名下默认所有路径共享，也可以通过path属性限制作用域；sessionStorage仅同域名同路径同标签页下共享，不同标签页即使打开同一个网站也不共享；localStorage同域名同路径下所有标签页、浏览器进程共享。4.网络传输：cookie每次发送同源请求都会自动携带到请求头中，传给服务器；sessionStorage和localStorage仅存储在本地，不会自动传给服务器。适用场景：cookie适合存储需要和服务器交互的用户身份凭证等小数据；localStorage适合存储长期不变的用户偏好、静态缓存数据；sessionStorage适合存储临时的表单草稿、页面状态，关闭页面后不需要保留。延伸考点：cookie的httpOnly属性作用是禁止JavaScript读取cookie，防止XSS攻击窃取用户登录凭证，提升安全性。6.iframe的优缺点iframe用于嵌入第三方页面，优点是可以完全隔离第三方代码，不会影响主页面的DOM和样式，适合嵌入第三方广告、支付页面、在线文档等内容。缺点非常明显：1.iframe会阻塞主页面的onload事件，影响主页面加载性能，即使没有内容也会触发资源加载；2.iframe和主页面共享连接池，会占用主页面的网络连接，影响主页面资源加载；3.搜索引擎爬虫无法很好的抓取iframe内的内容，不利于SEO；4.存在安全风险，容易被用于点击劫持，嵌入不安全的第三方页面还会带来XSS等安全问题；5.移动端适配难度大，滚动体验差，需要单独处理滚动事件。因此非必要场景不推荐使用iframe。CSS高频考点1.CSS盒模型，标准盒模型与IE盒模型的区别，怎么切换CSS中所有HTML元素渲染时都会被当作一个矩形盒子，由内容区content、内边距padding、边框border、外边距margin四个部分组成，这就是CSS盒模型。两种盒模型的核心差异是宽高计算规则不同：•标准W3C盒模型：元素设置的width和height仅表示内容区content的大小，不包含padding和border，元素实际占据宽度=width+左右padding+左右border+左右margin。•IE怪异盒模型：元素设置的width和height包含内容区、padding和border，元素实际占据宽度=设置的width+左右margin。可以通过box-sizing属性切换盒模型：box-sizing:content-box对应标准盒模型，box-sizing:border-box对应IE盒模型。现代开发中通常会全局设置*{box-sizing:border-box;}，让布局计算更方便，避免出现宽度溢出的问题。延伸考点：外边距塌陷（margincollapsing）是什么？垂直方向上相邻块级元素的外边距会发生合并，最终取两个外边距中的较大值作为最终间距，分为两种场景：兄弟元素相邻上下外边距合并、父子元素无border/padding分隔时顶部外边距合并。这个设计原本是为了排版需求，比如多个段落之间不需要双倍间距，如果要避免合并，可以将两个元素放到不同的BFC容器中。2.对BFC的理解，怎么触发BFC，BFC的作用BFC全称BlockFormattingContext，即块级格式化上下文，是CSS中独立的渲染容器，容器内部元素的布局不会影响容器外部的元素，有自己独立的渲染规则。BFC核心渲染规则：1.内部块级元素垂直方向依次排列；2.同一个BFC内垂直相邻元素的外边距会发生塌陷；3.BFC区域不会和外部浮动元素重叠；4.计算BFC高度时，内部浮动元素也会参与高度计算。常见触发BFC的方式：•根元素html默认就是BFC；•浮动元素（float不为none）；•绝对定位/固定定位元素（position为absolute/fixed）；•overflow不为visible（overflow:hidden/auto/scroll）；•display为inline-block、flex、grid、table-cell。BFC的核心应用场景：1.解决外边距塌陷问题，将两个需要避免塌陷的元素放到不同BFC中即可；2.清除浮动，解决父元素因为子元素浮动导致的高度塌陷，父元素触发BFC后，计算高度会把浮动子元素纳入计算，高度不会变成0；3.实现两栏自适应布局，左栏浮动定宽，右栏触发BFC后会自动避开浮动元素，占满剩余宽度，不需要计算margin，兼容性好。3.CSS实现居中的常用方法，分别适用什么场景CSS居中分为水平居中、垂直居中、水平垂直居中，不同场景方案不同：水平居中1.行内/行内块元素：给父元素设置text-align:center，适合文字、图片、行内块元素，兼容所有浏览器；2.定宽块级元素：给元素自身设置margin:0auto，适合定宽的容器，是最经典的实现方式；3.flex布局：父元素设置display:flex;justify-content:center，不管子元素宽度是否固定都可以实现，现代开发最常用；4.绝对定位：position:absolute;left:50%;margin-left:-自身宽度一半，适合定宽的绝对定位元素。垂直居中1.单行文字：设置line-height等于父元素高度，适合导航栏、按钮内的单行文字，最简单高效；2.多行文字/不定高元素：父元素设置display:table-cell;vertical-align:middle，兼容IE8+，适合多行文字场景；3.flex布局：父元素设置display:flex;align-items:center，不管子元素高度都可以实现，现代开发最常用；4.绝对定位：position:absolute;top:50%;margin-top:-自身高度一半，适合定高元素。水平垂直居中1.不定宽高元素最常用：绝对定位+transform，position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)，transform百分比是相对于自身尺寸计算，所以不需要知道元素宽高就能居中，是弹窗等居中场景的经典方案；2.flex方案：父元素设置display:flex;justify-content:center;align-items:center，一行核心代码，现代开发大部分场景都用这个，简单好维护；3.grid方案：父元素设置display:grid;place-items:center，一行代码就可以实现水平垂直居中，比flex更简洁，适合现代浏览器；4.绝对定位auto方案：position:absolute;top:0;left:0;right:0;bottom:0;margin:auto，不管宽高都可以居中，实现巧妙，兼容性也很好。4.三栏布局（两边定宽中间自适应）的常用实现，优缺点三栏布局是前端布局的经典考题，常用实现方案如下：1.浮动法：左栏左浮动，右栏右浮动，中间栏放在HTML最后，设置margin-left和margin-right留出两边位置，优点是简单好理解，兼容性好，缺点是中间栏必须放在HTML最后，优先加载的重要内容放到后面，不利于SEO，中间内容高度变化容易出现环绕问题。2.绝对定位法：左右栏绝对定位放到两边，中间栏设置margin留出位置，优点是结构顺序不受限制，代码简单，缺点是左右栏脱离文档流，父元素高度无法被内容撑开，适合对高度要求不高的场景。3.双飞翼布局：三栏全部左浮动，中间栏宽度100%放在HTML最前面，中间栏内部嵌套一层容器，内层容器设置margin留出两边位置，左栏设置margin-left:-100%拉到左侧，右栏设置margin-left:-自身宽度拉到右侧，优点是中间栏优先加载，SEO友好，兼容性好，缺点是多嵌套一层容器，结构冗余。4.圣杯布局：和双飞翼类似，三栏都浮动，中间宽度100%，父容器设置padding留出两边位置，左栏margin-left:-100%然后left:-自身宽度定位，右栏margin-left:-自身宽度然后right:-自身宽度定位，优点是不需要额外嵌套容器，结构比双飞翼简洁，缺点是中间宽度小于左右宽度时会出现布局错乱。5.flex布局：父容器设置display:flex，左右栏设置固定宽度，中间栏设置flex:1，自动占满剩余宽度，优点是代码极其简洁，结构顺序不受限制，没有布局错乱问题，现代浏览器都支持，缺点是IE9及以下不支持，不过现在已经很少需要兼容低版本IE，所以flex是现代开发三栏布局的首选方案。6.grid布局：父容器设置display:grid;grid-template-columns:左宽1fr右宽，几行代码搞定，比flex更简洁，适合现代浏览器。5.浮动的原理，为什么浮动会导致高度塌陷，怎么清除浮动浮动设计的初衷是实现文字环绕图片的效果，后来被开发者用来做布局。浮动元素会脱离普通文档流，不占据普通流的空间，所以如果父元素内部所有子元素都是浮动，父元素计算高度的时候会认为没有内容，高度塌陷为0，这就是浮动高度塌陷的原因。常用清除浮动方案：1.额外标签法：在浮动元素最后添加一个空标签，设置clear:both，优点是简单，兼容性好，缺点是添加无用标签，结构冗余，不推荐。2.父元素触发BFC：给父元素设置overflow:hidden触发BFC，优点是代码少，没有额外标签，缺点是父元素溢出内容会被裁剪，不适合有下拉菜单等溢出内容的场景。3.伪元素清除法：这是现在最常用的方案，给父元素添加伪元素：css.clearfix::after{content:'';display:block;clear:both;visibility:hidden;height:0;}优点是没有额外标签，结构语义正确，兼容性好，是目前主流重置样式采用的方案。6.CSS选择器优先级计算规则CSS选择器优先级是按维度从高到低比较，不是简单的分数累加，正确规则如下：1.带有!important声明的优先级最高，如果多个规则都带有!important，再比较其他维度；2.内联样式（style属性写的样式）优先级高于内部和外部样式表；3.ID选择器数量更多的优先级更高；4.ID数量相同，类选择器、属性选择器、伪类数量更多的优先级更高；5.以上都相同，标签选择器、伪元素数量更多的优先级更高；6.所有维度都相同，后写的样式覆盖先写的样式，即后来居上。常见误区：早年流传的「内联1000分，ID100分，类10分，标签1分」只是方便记忆的说法，实际优先级比较是按维度的，100个类选择器优先级也低于1个ID选择器；继承来的样式优先级低于任何直接选中元素的样式，哪怕直接选中的是通配符*。7.CSS五种定位的区别，参照物分别是什么•static：默认值，静态定位，遵循普通文档流，top/left等偏移属性不生效，不需要特殊处理的元素默认就是静态定位。•relative：相对定位，相对于元素自身在普通文档流中的位置偏移，不脱离文档流，原来占据的空间保留，周围元素不会占据它的位置，通常用作绝对定位元素的父容器，或者小范围调整元素位置。•absolute：绝对定位，脱离普通文档流，原来的空间不保留，相对于最近的非static定位的祖先元素定位，如果没有符合条件的祖先元素，就相对于根元素html定位。•fixed：固定定位，脱离普通文档流，相对于浏览器视口定位，滚动页面的时候位置保持不变，通常用来做固定导航栏、回到顶部按钮等。常见坑：如果父元素设置了transform属性，fixed子元素会相对父元素定位，而不是视口，开发中需要注意。•sticky：粘性定位，是相对定位和固定定位的结合，默认遵循普通文档流，当元素滚动到距离视口阈值小于设置的偏移值时，自动变成固定定位固定在对应位置，原来的空间保留，通常用来做吸顶导航、粘性侧边栏，兼容性很好，除了IE都支持。8.flex:1的含义是什么flex是flex-grow、flex-shrink、flex-basis三个属性的缩写，flex:1完整展开是flex-grow:1;flex-shrink:1;flex-basis:0%;。•flex-grow定义空间多余时的放大比例，1表示按比例分配剩余空间；•flex-shrink定义空间不足时的缩小比例，1表示空间不足时自动缩小；•flex-basis定义分配空间前元素的基础大小，0%表示基础大小为0，所有空间都拿来分配，不管元素内容原本大小。常见误区：很多开发者认为flex:1是11auto，那是flex:auto的取值，flex:1的flex-basis是0%，这是最容易答错的点。常见开发坑：如果flex子元素内部有长文本，需要给flex子元素设置overflow:hidden，否则默认flex-shrink不生效，长文本会溢出容器。9.重绘与回流（重排）的区别，怎么优化浏览器渲染页面的流程是：解析HTML生成DOM树，解析CSS生成CSSOM树，合并DOM和CSSOM生成渲染树，然后进行回流（布局）计算每个元素的几何位置和大小，最后进行重绘把元素绘制到屏幕上。•回流（重排）：DOM修改导致元素几何属性（宽高、位置）发生变化，浏览器重新计算元素几何属性，重新构建渲染树的过程，回流一定会触发重绘。•重绘：元素几何属性不变，仅外观属性（颜色、背景色、透明度）变化，浏览器只需要重新绘制元素外观，不会重新计算几何位置，重绘不一定需要回流。回流的性能开销远大于重绘，频繁回流会导致页面卡顿。常见优化方案：1.批量修改DOM：将DOM设置为display:none修改完成后再显示，或者使用文档碎片一次性插入DOM，减少回流次数；2.避免强制同步回流：不要反复读取offsetWidth、offsetHeight等需要回流计算的属性，读取一次后存到变量中使用，避免浏览器多次强制回流；3.减少回流范围：动画元素设置为绝对定位脱离文档流，它的变化只会回流自身，不会影响其他元素，避免整页回流；4.使用transform和opacity做动画：transfor