当前位置：首页 > news >正文

2025年css+html面试题

news 来源：原创 2025/6/10 11:35:07

1.如何理解HTML语义化？

让人更容易读懂（增加代码的可读性）

让搜索引擎更容易读懂（SEO）

2.默认情况下，哪些 HTML 标签是块级元素、哪些是内联元素 ?

块级元素:display：block/table有div h1 h2 table ul li ol p等

内联元素：display:inline/inline-bliock 有 span img input button 等

3.盒子模型的宽度如何计算 ?

offsetWidth=(内容宽度+内边距+边框)，无外边距 100+20+2=122

如果让offsetWidth为100

加border-box

4.margin 纵向重叠的问题？

相邻元素的margin-top和margin-bottom会发生重叠

空白内容的P标签也会重叠

5.margin 负值的问题？

margin-top 和 margin-left 负值，元素向上、向左移动
margin-right 负值，右侧元素左移，自身不受影响
margin-bottom 负值，下方元素上移，自身不受影响

6.BFC的理解和应用？

Block format context，块级格式化上下文@68161金一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

应用：BFC清除浮动

7.float 布局的问题，以及 clearfix？

如何实现圣杯布局和双飞翼布局

目的：三栏布局，中间一栏最先加载和渲染（内容最重要）

两侧内容固定，中间内容随着宽度自适应

一般用于PC网页

技术总结：

1.使用 float 布局
2.两侧使用 margin 负值，以便和中间内容横向重叠
3.防止中间内容被两侧覆盖，一个用 padding 一个用 margin

手写clearfix

8.flex 画色子？

9.absolute 和 relative 分别依据什么定位 ?

定位依据：相对于元素正常文档流中的位置进行定位。
特点：
- 元素仍占据原文档流中的空间（不会影响其他元素布局）。
- 通过 top、right、bottom、left 调整位置时，是相对于元素原本应在的位置偏移。
- 不会创建新的包含块（除非同时设置了 transform、perspective 等属性）。

定位依据：相对于最近的已定位祖先元素（即设置了 position 为 relative、absolute、fixed 或 sticky 的元素）。
特点：
- 元素脱离文档流，不占据空间，可能覆盖其他元素。
- 若没有已定位的祖先元素，则相对于初始包含块（通常是 <html> 元素）。
- 通过 top、right、bottom、left 调整位置时，是相对于定位祖先元素的内边距（padding）边界。

10.居中对齐有哪些实现方式 ?

(2)、垂直居中

(3)水平垂直居中

11.line-height 的继承问题？

关键结论：line-height 的继承取决于父元素的声明方式：
- 当父元素使用数值（如 1.5）声明时：子元素继承的是这个数值，并根据自身字体大小重新计算行高。
- 当父元素使用具体单位（如 px、em、rem）声明时：子元素继承的是计算后的具体像素值。