2025前端最新面试题之HTML和CSS篇（前端面试题大全及答案）
本篇文章给大家谈谈
DOCTYPE 是什么，都有哪些属性？参考答案HTML 的 声明是文档类型声明，用于告知浏览器当前 HTML 文档使用的 HTML 版本，从而确保文档以正确的模式渲染它通常出现在 HTML 文档的第一行。
在现代开发中，推荐使用 HTML5 的简单声明在之前的 HTML 版本中，如 HTML4 ，会有其他写法，不过现在已经不常用
"http://www.w3.org/TR/html4/strict.dtd">meta 标签是干什么的，都有什么属性和作用参考答案HTML 中的 标签用于提供页面的元信息，这些信息不会直接显示在网页内容中，但对浏览器、搜索引擎和其他服务非常重要。
常见的 meta 信息如下：字符编码指定网页的字符编码，确保正确显示内容html页面视口设置（响应式设计）控制页面在移动设备上的显示和缩放行为html
name="viewport"content="width=device-width, initial-scale=1.0" />width=device-width：页面宽度匹配设备屏幕宽度initial-scale=1.0：初始缩放比例为 1
搜索引擎优化（SEO）提供描述性信息，便于搜索引擎索引html
/>什么是 DOM ，它和 HTML 有什么区别？参考答案DOM 即 Document Object Model 文档对象模型，它是一个 JS 对象。
而 HTML 是一种标记语言（和 XML 类似）用于定义网页的内容和结构DOM 的特点树形结构，DOM 树可编程，可以使用 Javascript 读取和修改 DOM 数据动态性，通过 DOM API 动态修改结构和数据
HTML 到 DOM 的过程HTML 解析：浏览器解析 HTML 代码，生成 DOM 树CSSOM 生成：解析 CSS，生成 CSSOM（CSS 对象模型）渲染树：结合 DOM 和 CSSOM，生成渲染树。
页面渲染：根据渲染树将内容显示在页面上如何理解 HTML5 语义化 ？有哪些常见的语义化标签？理解 HTML5 语义化HTML5语义化是指通过使用具有明确含义的标签，使网页的结构和内容更加清晰，方便浏览器、开发者以及搜索引擎理解网页内容。
语义化的核心在于让标签不仅描述外观，还能表达内容的含义，从而提升网页的可读性、可维护性和可访问性1.提高代码可读性：开发者无需额外注释即可理解代码结构2.增强SEO（搜索引擎优化）：搜索引擎能更好地抓取和理解网页内容。
3.提升可访问性：辅助技术（如屏幕阅读器）可以更准确地解释页面内容4.支持更好的浏览器兼容性：现代浏览器能够更高效地渲染语义化结构常见的 HTML5 语义化标签 注意：要区别于
>写一个 HTML5 语义化的例子
/>HTML5 语义化示例
面试
首页<li>关于联系
>
欢迎访问
这是一个 HTML5 语义化的示例
关于我们
我们的历史
>
这是关于我们历史的介绍
相关文章
文章 1© 2025 © 面试
DOM 节点的 attr 和 property 有何区别attr 指的是 HTML 属性（attribute）property 指的是 DOM 对象的属性（property）主要区别定义不同attr定义在 HTML 元素上的初始属性，存储在 DOM 元素的属性列表中，与 HTML 源代码一一对应。
property是 DOM 对象的属性，是通过浏览器解析 HTML 并生成 DOM 对象时动态创建的，供 JavaScript 操作存储位置不同attr是 HTML 的一部分，存储在元素的 HTML 标记 中。
property是 DOM 的一部分，存储在 JavaScript 对象中行为不同attr一般是静态的，表示元素初始的值，即从 HTML 源代码中解析的值，通常不会因用户操作或脚本修改而自动更新除非你手动使用 JS 修改值。
property一般是动态的，表示当前状态，可以通过 JavaScript 修改，并反映在 DOM 中对于一些常用的属性（如id、value、checked 等），attr 和 property 会部分同步：。
修改attr 会影响 property 值而修改property 可能不会同步回 attr总结，一般来说，attr用于设置元素的初始状态，而 property 用于操作和获取当前状态如何一次性插入多个 DOM 节点？考虑性能。
参考答案直接多次操作 DOM（如多次 appendChild 或 innerHTML 更新）会导致性能问题，因为每次操作都会触发 DOM 的重新渲染DocumentFragment 是一个轻量级的文档片段，可以在内存中操作节点，最后一次性插入到 DOM 中，从而减少重绘和回流。
// 获取目标容器const container = document.getElementById(list) // 创建 DocumentFragmentconst fragment = document
.createDocumentFragment() // 创建多个节点并添加到 fragment 中for (let i = 1; i <= 1000; i++) { const li = document
.createElement(li) li.textContent = `item ${i}` fragment.appendChild(li) } // 一次性插入到 DOM container.appendChild(fragment)
offsetHeight scrollHeight clientHeight 有什么区别参考答案offsetHeight 元素的总高度，包括内容高度、内边距（padding）、水平滚动条高度（如果存在）、以及边框（
border）不包括外边距（margin） scrollHeight 元素的实际内容高度，包括不可见的溢出部分（scrollable content），大于等于 clientHeight clientHeight 元素的可见内容高度，包括内容高度和内边距（。
padding），但不包括水平滚动条高度、边框（border）和外边距（margin）Node 和 Element 有什么区别？在 DOM（文档对象模型）中，HTML Element 和 Node 都是表示文档结构中的对象，但它们有不同的定义和用途。
Node 是 DOM 树中所有类型对象的基类，是一个接口，表示文档树中的一个节点它有多个子类型，Element 是其中的一个其他的还有 Text、Comment 等 Node 常见属性如 nodeName nodeValue HTML 。
Element 是 Node 的子类，专门表示 HTML 元素节点它提供了与 HTML 元素相关的更多功能，如属性、样式等HTML Element 仅表示 HTML 元素节点，通常对应 HTML 标签，如 <。
div>,
, 等 Element 常见属性和方法如 innerHTML getAttribute setAttributewindow.onload 和 DOMContentLoaded 的区别是什么？。
这两个事件都用于检测页面的加载状态，但触发的时机和作用范围有所不同DOMContentLoaded 是当 DOM 树构建完成（HTML 被解析完成，不等待样式表、图片、iframe 等资源加载）时触发，不依赖于外部资源。
window.onload 是当 整个页面及所有资源（包括样式表、图片、iframe、脚本等）加载完成时触发，依赖于外部资源 DOMContentLoaded 会更早触发 使用推荐 如果你的逻辑只依赖 DOM 的加载（如操作页面结构、绑定事件），使用 DOMContentLoaded。
如果你的逻辑需要依赖页面所有资源加载完成（如获取图片尺寸、执行动画），使用 window.onloadscript 标签放在 head 里，怎么解决加载阻塞的问题在 HTML 中， 标签通常会阻塞页面的渲染，尤其是当它放在 部分时，因为浏览器会在执行 JavaScript 代码之前停止解析 HTML。
可参考的解决方案使用 async 属性当 async 属性添加到 标签时，脚本会异步加载，并在加载完成后立即执行，不会阻塞页面的渲染适用于不依赖其他脚本或页面内容的独立脚本，但多个 JS 文件时无法保证加载和执行顺序。
html使用 defer 属性defer 属性使得脚本延迟执行，直到 HTML 文档解析完毕这意味着脚本不会阻塞 HTML 渲染，且会按照文档中 标签的顺序执行。
适用于依赖 DOM 元素的脚本（如操作页面内容）html将 放在 最后。
常见的 CSS 选择器有哪些？参考答案选择器类型示例说明元素选择器p选择所有
元素类选择器.button选择所有 class="button" 的元素ID 选择器#header选择 id="header" 的元素
通用选择器*选择页面中的所有元素后代选择器div p选择 div 内的所有
元素子元素选择器div > p选择 div 的直接子元素
相邻兄弟选择器h1 + p选择紧接在
后面的
元素
通用兄弟选择器h1 ~ p选择所有紧跟在
后面的
元素属性选择器a[href]选择具有 href 属性的所有 元素:hovera:hover选择鼠标悬停时的 元素:first-child
p:first-child选择父元素中的第一个
元素:nth-child(n)li:nth-child(odd)选择父元素中所有奇数位置的 元素::beforep::before { content: "Note: "; }
在每个
元素的前面插入 "Note: "::afterp::after { content: "."; }在每个
元素的后面插入一个句点:not()p:not(.highlight)选择所有不具有 highlight 类的
元素
CSS 盒子模型，尺寸计算如下代码，请问 div1 的 offsetWidth 是多大？html#div1 {
width: 100px; padding: 10px; border: 1px solid #ccc; margin: 10px; }
>答案offsetWidth 是指 元素内容 + 内间距 + 边框的距离，不包括外间距 所以 offsetWidth 是 122px追问：如果想要让 offsetWidth 等于 100px ，还需要再增加一个什么属性？
答案增加 box-sizing: border-box;margin 纵向重叠如下代码，AAA 和 BBB 之间的距离是多少？html<
style>p { font-size: 16px; line-height: 1; margin-top: 10px; margin-bottom: 15px; }
AAA
BBB
答案AAA 和 BBB 之间的距离是 15pxlineHeight 如何继承？如下代码，标签的行高将会是多少？
htmlbody { font-size: 20px; line-height: 200%; } p {
font-size: 16px; }
AAA
答案line-height不同类型的值，继承规则是不一样的写具体的数值，如30px，则继承该数值——比较好理解写百分比，如200%，则继承当前计算出来的值，如上述题目——重要！！！写比例，如2或1.5，则继承比例所以，该问题的的答案是，继承40pxmargin 负值问题参考答案margin-left 负值，元素左移
margin-top 负值，元素上移 margin-right 负值，自身宽度缩小，右侧元素会跟进，但内容不受影响 margin-bottom 负值，自身高度缩小，下方元素会跟进，但内容不受影响什么是 BFC 如何触发 BFC？
参考答案BFC (Block formatting context) 直译为"块级格式化上下文"它是一个独立的渲染区域，与这个区域外部毫不相干即，BFC 里面的的内容再怎么发生变化，也不会影响到 BFC 外面的布局，这一点是在网页布局中非常有用的。
先说，能形成 BFC 的条件有：根元素float 属性不为 noneposition 为 absolute 或 fixeddisplay 为 inline-block table-cell table-caption flex inline-flex
overflow 不为 visibleBFC 在网页布局中经常用来清除浮动（特别是在使用 float 布局的情况下），最常被用来触发 BFC 的属性是overflow: hidden，例如要实现一个左图右文的布局：
html.bfc { overflow: hidden; /* 触发 BFC */ } .left { float: left; }
="bfc">text...
使用 CSS 实现居中对齐，有哪几种方式？实现水平居中对齐inline 元素用text-align: center;即可，如下：css.container { text-align: center; }block 元素可使用margin: auto;
css.container { text-align: center; } .item { width: 1000px; margin: auto; }绝对定位元素可结合left和margin实现，但是必须知道宽度
css.container { position: relative; width: 500px; } .item { width: 300px; height: 100px; position
: absolute; left: 50%; margin-left: -150px; }实现垂直居中对齐inline 元素可设置line-height的值等于height值，如单行文字垂直居中：
css.container { height: 50px; line-height: 50px; }绝对定位元素，可结合top和margin实现，但是必须知道尺寸优点：兼容性好；缺点：需要提前知道尺寸，
css.container { position: relative; height: 200px; } .item { width: 80px; height: 40px; position
: absolute; left: 50%; top: 50%; margin-top: -20px; margin-left: -40px; }绝对定位可结合transform实现居中
优点：不需要提前知道尺寸；缺点：兼容性不好（现代浏览器都没问题）css.container { position: relative; height: 200px; } .item { width
: 80px; height: 40px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -
50%); }绝对定位结合margin: auto，不需要提前知道尺寸，兼容性好css.container { position: relative; height: 300px; } .item
{ width: 100px; height: 50px; position: absolute; left: 0; top: 0; right: 0; bottom: 0
; margin: auto; }什么是 CSS 定位上下文？absolute 和 relative 分别依据谁来定位？参考答案relative是相对于自身定位的（且不会影响其他元素的定位）absolute
是相对于上层最近的一个定位元素来定位的，如果没有就依赖于 body 定位CSS overflow: hiddendisplay：none和visibility: hidden有什么区别参考答案overflow。
: hidden 溢出内容不可见，未溢出的部分正常可见 display：none 隐藏内容，不占用任何空间，内容变化不会重新渲染 visibility: hidden 隐藏元素，但保留其占据的空间，内容变化会重新渲染
CSS px % em rem vw/vh的区别参考答案单位基准绝对/相对优点缺点适用场景px固定像素绝对精确，简单易用缺乏响应式能力固定尺寸元素%父元素尺寸相对灵活，适合响应式设计依赖父元素响应式布局，流式设计
em当前元素字体大小相对动态调整，适合局部相对设计嵌套复杂，计算难预测动态字体、内外边距等rem根元素字体大小（html）相对全局一致，计算简单需要设置根元素字体全局比例调整，响应式设计vw/vh视口宽度或高度
相对基于视口，适合全屏设计小屏显示可能不理想全屏布局，视口动态调整使用建议:响应式设计：结合使用 rem 和 %固定大小：使用 px 定义精确尺寸全屏布局：使用 vw 和 vh动态比例设计：em 和 rem 都是优秀的选择，但推荐 rem 更加简洁统一。
如何实现黑白主题变化？参考答案可使用 CSS 变量css/* 定义变量 */:root, :host { --color: #333; --bg-color: #fff; } /* 使用变量 */
p { color: var(--color); background-color: var(--bg-color); }如何实现响应式布局？CSS 实现响应式布局可以使页面在不同的设备和屏幕尺寸上有良好的显示效果，以下是几种常见的实现方式：
使用媒体查询（Media Queries）媒体查询是响应式布局的核心技术，通过检测设备的宽度、高度、分辨率等条件应用不同的样式可根据屏幕宽度调整字体大小、布局样式等css/* 默认样式 */body {
font-size: 16px; padding: 20px; } /* 屏幕宽度小于等于768px时的样式 */@media (max-width:768px) { body { font-size
: 14px; padding: 10px; } } /* 屏幕宽度大于1200px时的样式 */@media (min-width:1200px) { body { font-size
: 18px; padding: 30px; } }使用弹性盒子（Flexbox）创建水平或垂直方向上的自适应布局，比如导航栏、网格布局css.container { display: flex;
flex-wrap: wrap; /* 允许换行 */ } .item { flex: 11200px; /* 每个子项占据至少200px，随空间调整 */margin: 10px; background-color
: #f0f0f0; }使用网格布局（CSS Grid Layout） 创建复杂的自适应网格布局，比如图片库、商品列表css.container { display: grid; grid-template-columns。
: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } .item { background-color: #d4edda; padding
: 10px; }使用百分比和单位 vh/vw 实现宽度和高度的自适应实现宽度和高度随窗口变化而调整css.container { width: 80%; /* 占父容器的80% */height:
50vh; /* 占视口高度的50% */background-color: #e9ecef; }使用 flex 设计一个“四合院”布局如下图
参考答案
CSS 四合院html
* { margin: 0; padding: 0; } html { height: 100%; }
body { display: flex; flex-direction: column; height: 100%; } #header
{ height: 50px; background-color: red; } #container { flex: 1;
display: flex; } #left-container { width: 100px; background-color: green; }
#main-container { flex: 1; background-color: #ccc; } #right-container {
width: 200px; background-color: yellow; } #footer { height: 50px;
background-color: blue; } header
leftmain
right
