前端css+html面试题

Angus-zoe

于 2025-04-02 17:28:06 发布

阅读量984

点赞数 27

分类专栏：面试题文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_66879773/article/details/146936631

版权

面试题专栏收录该内容

2 篇文章

订阅专栏

1、实现一个盒子居中有哪些方法

使用flexbox布局

.container {
     display: flex;
     justify-content: center;
     align-items: center;
   }

使用绝对定位和transform：

将盒子的父元素设置为相对定位（position: relative），然后使用绝对定位将盒子定位到父元素的50%位置，再使用transform属性的translate方法将盒子向左上方移动自身宽高的一半
```
.container {
    position: relative;
 }

 .box {
      position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }
```
使用表格布局：

将盒子的父元素设置为display: table-cell; vertical-align: middle; text-align: center;，使其表现为表格单元格，再将盒子水平居中对齐以及垂直居中对齐。
```
.container {
     display: table-cell;
     vertical-align: middle;
     text-align: center;
   }
```
使用网格布局：

将盒子的父元素设置为display: grid; place-items: center;，使其表现为网格容器，并使用place-items: center;将盒子水平和垂直居中。
```
.container {
     display: grid;
     place-items: center;
   }
```

2、如何理解HTML5的语义化

HTML5的语义化是指在编写HTML代码时，使用具有明确含义的标签元素来描述内容的结构和意义，以增强网页的可读性、可访问性和搜索引擎优化。

HTML5引入了一些新的语义化标签，如<header>、<nav>、<section>、<article>、<footer> 等。这些标签直观地表示了文档的结构和内容，使代码更易于理解和维护。

3、HTML和HTML5有什么区别?

HTML（超文本标记语言）和HTML5都是用于创建网页结构和内容的标记语言，但HTML5是在HTML的基础上进行了扩展和升级。下面是HTML和HTML5之间的一些主要区别：

1、HTML5 引入了语义化标签，提高代码可读性和 SEO 友好性：

HTML 标签	HTML5 新增标签	作用
<div>	<header>	头部区域
<div>	`<nav>`	导航栏
<div>	<article>	文章内容
<div>	<section>	页面快内容
<div>	<aside>	侧边栏
<div>	<footer>	页脚

2、多媒体支持：

🔹 HTML 需要使用 Flash 插件播放音频、视频。

🔹 HTML5 原生支持 <audio> 和 <video>，提高兼容性，减少插件依赖：

<video controls>
    <source src="video.mp4" type="video/mp4">
</video>

<audio controls>
    <source src="audio.mp3" type="audio/mp3">
</audio>

3、表单增强

🔹 HTML 表单类型少，<input> 主要支持 text、password、checkbox 等。

🔹 HTML5 增加了 新的表单类型和属性，提高用户体验，例如type值可以为email、date(选择日期)、tel、number、range(滑动条)、color(选择颜色)

4、更多的api

API	作用

Geolocation API

获取用户地理位置（GPS）

Canvas API

绘制 2D 图形

Web Storage 本地存储（localStorage、sessionStorage）

WebSocket

实现实时双向通信

Drag & Drop API

拖放功能

History API

控制浏览器历史记录

5、更好的本地存储

🔹 HTML 仅支持 cookie 存储数据，容量小（4KB），影响页面性能。

🔹 HTML5 新增 localStorage 和 sessionStorage，存储更高效：

存储方式	特点

cookie 4KB，随请求发送，影响性能

sessionStorage 仅当前页面存储，关闭页面清除

localStorage 永久存储，最大 5MB

6、 HTML5 与 CSS3 深度结合，支持动画、渐变、阴影、响应式设计

4、清除浮动有哪些方法

1、使用空的标签元素清除浮动：这种方法包括在浮动元素的结尾或包含浮动元素的容器末尾添加一个空的标签元素，并为其应用"clear: both;"样式。

优点：

简单易懂，无需额外的 CSS 样式。
兼容性较好。

缺点：

需要添加额外的 DOM 元素，增加 HTML 结构。
不够语义化。

2、直接给父元素设置高度

优点：简单粗暴，方便
缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块

3、通过在包含浮动元素的父元素上设置overflow属性，可以触发BFC（块格式化上下文），从而清除浮动。BFC会自动包含和清除其内部的浮动。overflow: hidden;或overflow: auto;

优点：

简单易懂，无需添加额外的 DOM 元素。

缺点：

可能会影响容器的滚动行为，特别是在应用了overflow: hidden;的情况下。
不适用于需要显示容器溢出内容的情况。

4、使用父容器的伪元素：可以在包含浮动元素的父容器上使用伪元素::after，并应用"clear: both;"样式。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
clear: left; 清除左浮动
clear: right; 清除右浮动
clear: both; 清除左右浮动

优点：

不会增加额外的 DOM 元素。

缺点：

需要额外的 CSS 样式。
兼容性较老版本的浏览器可能存在问题。

5、使用flexbox布局：将包含浮动元素的容器设置为display: flex;这将使浮动元素自动成为flex项，从而清除浮动。

优点：

代码简洁，易于理解。

缺点：

兼容性较差，可能不适用于一些较旧版本的浏览器。

5、说一下src 与href的区别?

在HTML中，src和href是两个用于引用外部资源的属性，它们有着不同的用途和适用范围。

1、src属性（用于<img>、<script>、<iframe>等元素）

src属性是用于指定外部资源的地址，如图像、脚本、框架等。
src属性会将资源作为页面的一部分加载，并且它会阻止解析完整的HTML文档，直到资源加载完成。
当浏览器解析到带有src属性的元素时，会发起对该资源的加载请求。

2、href属性（用于<a>、<link>等元素）：

href属性是用于指定链接的地址，如超链接、样式表等。
href属性定义的资源与当前页面之间是独立的，不会影响页面解析。
当浏览器解析到带有href属性的元素时，不会立即发起请求，而是在需要时才发起请求，例如点击超链接或者解析到时。

总结一下它们的区别：

src属性用于指定要嵌入到当前HTML文档的外部资源，影响页面的解析和渲染。
href属性用于指定与当前HTML文档相关的链接，如超链接、样式表等，不会影响页面的解析，而是根据需要进行加载。

因此，根据外部资源的类型和用途，我们选择使用src还是href属性。如果需要嵌入内容或加载资源作为页面的一部分，通常使用src属性。如果需要指定与当前页面相关的链接，例如跳转链接或引用外部样式表，通常使用href属性。

6、盒模型的理解

内容区域（Content）：内容区域指的是元素所包含的实际内容，如文本、图像等。其大小由元素的内容决定。
填充区域（Padding）：填充区域是内容区域与边框之间的空白区域。它可用于控制元素内容与边框之间的距离。
边框区域（Border）：边框区域是位于填充区域外部的边框线，用于包围元素的内容和填充。可以设置边框的样式、宽度和颜色。
外边距区域（Margin）：外边距区域是边框区域与周围元素之间的空白区域。它用于控制元素与其他元素之间的距离，增加元素的间距。

7、块级元素和行内元素

类型	特点	常见标签

块级元素 独占一行，可包含块级和行内元素 <div>, <p>, <h1> ~ <h6>, <section>, <article>

行内元素 只占自身大小，不换行，不能包含块级元素 <span>, <a>, <strong>, <i>, <img>, <input>

行内块元素 既不换行，又可设置宽高 <img>, <button>, <input>, <select>

想让某个行内元素换行，或者想让块级元素不占满整行，可以尝试用 display: inline-block; 或 display: flex; 进行调整！

8、当谈到CSS3时，以下是一些新特性:

新特性	作用
选择器	伪类选择器
盒模型	`box-sizing` 控制宽高计算方式
圆角	border-radius让边框更圆润
阴影	`box-shadow`、`text-shadow` 增强视觉效果
透明度	`rgba`、`hsla` 颜色控制透明度
渐变	`linear-gradient`、`radial-gradient` 实现渐变背景
变换	`transform` 旋转、缩放、移动
过渡	`transition` 让元素变化更平滑
动画	`@keyframes`、`animation` 实现复杂动效
弹性盒Flexbox	弹性布局，适配不同屏幕
网格布局grid	网格布局，精确控制页面结构
媒体查询media	可以根据设备的屏幕大小和方向来应用不同的样式。

9、css引入的方式有哪些，link和@import的区别是什么

对比项	`<link>`	`@import`
写法	`<link rel="stylesheet" href="style.css">`	`@import url("style.css");`
支持位置	只能在 `<head>` 里使用	可以在 `<style>` 里使用
加载方式	并行加载（更快）	顺序加载（更慢）
浏览器支持	所有浏览器	IE9+ 才支持
权重	`<link>` 引入的样式优先级更高	`@import` 权重较低
动态控制	`<link>` 可以通过 JS 操作（如动态切换主题）	`@import` 不能被 JS 操作

@import是CSS2.1提出的，老的浏览器不支持，当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时，开始会没有样式（就是闪烁），网速慢的时候还挺明显。

10、什么是高度塌陷?高度塌陷有哪些解决方法

高度塌陷（又称：父元素塌陷、外边距合并）指的是：

当父元素的高度仅由浮动子元素或绝对定位的子元素决定时，父元素的高度可能会变为 0，导致背景、边框等无法正常显示。
当相邻块级元素的 margin 发生重叠时，也可能导致高度异常。

解决方案：

使用overflow:hidden,让父元素成为BFC（块级格式化上下文），可以自动包裹子元素的高度
使用 display: flow-root;让父元素成为BFC（块级格式化上下文）,比 overflow: hidden; 更语义化，不会影响 overflow 相关的属性。
使用 clearfix 伪元素,使用 ::after 伪元素清除浮动，强制父元素包裹子元素。

.parent::after {
  content: "";
  display: block;
  clear: both;
}

给父元素设置min-height
避免 margin 合并：1、给父元素设置display: flex 或 display: grid.2、给父元素设置padding-top或者border-top

方法	优点	适用场景
overflow: hidden;	简单高效，兼容性好	适用于大部分情况
display: flow-root;	语义化更强，推荐使用	现代浏览器，替代 `overflow: hidden;`
`clearfix` 伪元素	传统方案，兼容性好	适用于浮动布局
min-height	避免高度塌陷	适用于固定高度需求
padding-top / border-top	解决 `margin` 合并问题	适用于 `margin` 合并

11、css权重

1、第一等：代表内联样式，如: style=””，权值为1000。

2、第二等：代表ID选择器，如：#content，权值为0100。

3、第三等：代表类，伪类和属性选择器，如.content，权值为0010。

4、第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。

5、通配符、*权值为0000。

6、继承的样式没有权重值。

important > 内联 > ID > 类| 伪类 | 属性选择|伪对象 > 标签 > 继承 > 通配符

12、移动端实现1px的问题

方案	适用场景	兼容性	备注
transform: scale(0.5)	`border` 细边框		适配高 DPR 设备
伪元素 + scale	伪元素模拟 `border`		灵活，适配各种元素
0.5px border	现代浏览器	差	低 DPR 设备可能不生效
`background-gradient`	适用于 `table`		用于非 `border` 结构
媒体查询	适配不同 `DPR`	一般	兼容性较好，但 `0.5px` 可能无效

13、BFC是什么以及他的作用

定义：BFC 是 CSS 中的一个布局概念，它决定了元素如何对其内容进行布局以及如何与其他元素进行交互。可以简单理解为一个独立的渲染区域，在这个区域内，元素的布局不会受到外部元素的影响，同时也不会影响外部元素。

作用:

1、解决浮动元素高度塌陷：

问题：当一个 div 内部全部是浮动元素时，该 div 的高度会塌陷（高度变为 0）。

解决：让 div 形成 BFC，从而包裹住浮动的子元素。BFC 内部的子元素（浮动的 div）不会影响 container，所以 container 能够正确计算高度。

<style>
.container {
  overflow: hidden; /* 触发 BFC */
}

</style>
<div class="container">
  <div class="float-box" style="float: left; width: 100px; height: 100px; background: red;"></div>
</div>

2、阻止元素被浮动元素覆盖：

问题：如果一个普通 div 紧随一个浮动元素，会发生 内容重叠，导致页面错乱。

解决：让 div 形成 BFC，避免受浮动影响。BFC 区域不会被浮动元素影响，所以 text 能正常显示。

<div class="float-box" style="float: left; width: 100px; height: 100px; background: red;"></div>
<div class="text">我是文本，我不会被浮动元素覆盖</div>


<style>
.text {
  overflow: hidden; /* 触发 BFC */
}
</style>

3、防止外边距折叠

问题：两个相邻 div 的 margin 会 重叠（合并），导致间距小于预期。

解决：让 div 形成 BFC，阻止 margin 合并。BFC 使 .box2 成为独立的布局区域，不与 .box1 共享 margin。

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

<style>
.box1, .box2 {
  margin: 20px;
}
.box2 {
  overflow: hidden; /* 触发 BFC */
}
</style>

4、实现两列自适应布局

问题：想要 左侧固定宽度，右侧自适应，但 float: left + margin-left 方案可能不够稳定。

解决：让右侧 div 形成 BFC，从而避免被左侧浮动元素影响。BFC 的 right 不会被 left 影响，因此能正确自适应。

<style>
.left {
  float: left;
  width: 200px;
  height: 100px;
  background: red;
}
.right {
  overflow: hidden; /* 触发 BFC */
  background: blue;
}
</style>


<div class="left">左侧固定宽度</div>
<div class="right">右侧自适应</div>

触发BFC的方式：

overflow: hidden; ✅ 最常用
display: flex;
position: absolute;
float: left;

`14、`w3c标准/规范是什么?

是万维网联盟为了确保web的长期发展和互操作性，制定统一的web技术标准和规范，通过遵循W3C的标准，开发者能够编写符合Web标准的网页和应用程序，提高互操作性、可访问性和用户体验。

一些著名的W3C标准包括：

1.HTML（超文本标记语言）：定义Web页面的结构和内容。
2.CSS（层叠样式表）：定义Web页面的样式和布局。
3.XML（可扩展标记语言）：一种用于描述数据的标记语言。
4.DOM（文档对象模型）：用于访问和处理HTML和XML文档的编程接口。
5.HTTP（超文本传输协议）：用于在Web浏览器和Web服务器之间传输数据的协议

15、css如何实现三角形

通过将元素的宽度和高度设置为 0，然后设置透明边框来创建三角形的两个边，最后使用有颜色的边框创建三角形的底边。

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
/* 可以调整颜色和高度 */
transform: rotate(45deg);//调整三角形方向

16、说一下表单中readonly和disabled 的区别

readonly属性用于表示表单元素是只读的，用户可以查看但不能修改，而disabled属性用于表示表单元素被禁用，用户既不能查看也不能修改。

17、如何实现左边宽度固定,右边宽度固定,中间自适应的两三栏布局?

1、两栏布局（左右两边固定宽度，中间自适应宽度）：

<div class="container">
  <div class="left">左侧固定宽度</div>
  <div class="middle">中间自适应宽度</div>
  <div class="right">右侧固定宽度</div>
</div>

<style>
.container {
  display: flex;
}
.left {
  width: 200px; /* 左侧固定宽度 */
}
.middle {
  flex-grow: 1; /* 中间自适应宽度 */
}
.right {
  width: 150px; /* 右侧固定宽度 */
}
</style>

2、三栏布局（左右两边固定宽度，中间自适应宽度）：

<div class="container">
  <div class="left">左侧固定宽度</div>
  <div class="middle">中间自适应宽度</div>
  <div class="right">右侧固定宽度</div>
</div>

<style>
.container {
  display: grid;
  grid-template-columns: 200px 1fr 150px; /* 左侧、中间、右侧的宽度设置 */
}

</style>

3、实现实现左边宽度固定,右边宽度自适应的两栏布局?

<div class="container">
  <div class="left">左侧固定宽度</div>
  <div class="right">右侧自适应宽度</div>
</div>
<style>
.container {
  overflow: hidden; /* 用于清除浮动 */
}
.left {
  width: 200px; /* 左侧固定宽度 */
  float: left;
}
.right {
  margin-left: 200px; /* 左侧宽度作为右侧的左边距 */
}
</style>

18、说明一下css精灵图好处?

CSS 精灵图（CSS Sprites）是一种将多个图像合并到一个单独的图像文件中，并通过背景位置来显示特定图像的技术。这种技术在前端开发中有以下的好处：

减少 HTTP 请求：将多个小图标或小图片合并成一个精灵图，可以减少页面加载时需要发起的 HTTP 请求次数，从而提高页面加载性能。比起单独加载多个图像，只需加载一个精灵图，减轻了服务器负担且能更快地显示图像。
提高性能：精灵图可以利用浏览器的缓存机制，一次加载后就可以在多个位置复用，减少了重复加载相同图像的情况，从而提升了页面的响应速度和性能。
减少图像大小：合并多个小图像到一个精灵图中，可以减少图像文件的总大小。这是因为每个图像文件都带有自己的文件头和元数据，合并后的精灵图只需要一个文件头和一份元数据，减少了不必要的开销。
灵活性：通过调整精灵图的背景位置，我们可以轻松地显示所需的图像。这提供了更大的灵活性，可以使用 CSS 来控制图像的大小、位置和样式，而无需修改图像文件本身。
可维护性：将相关的图像合并到一个精灵图中，可以更好地组织和管理图像资源。这样做可以减少文件数量，更容易进行版本控制和维护。

需要注意的是，使用精灵图也有一些潜在的缺点，例如创建和维护精灵图可能需要一些额外的工作量，而且如果图像变化较多，可能需要频繁地更新精灵图。因此，在使用精灵图时，需要权衡其优势和劣势，并根据具体情况决定是否使用。

19、css中如何解决图片模糊的问题?

1、使用image-rendering提高图片清晰度，适用于需要在放大图片时保持清晰（避免模糊或锯齿）。

img {
    image-rendering: -webkit-optimize-contrast; /* 适用于 WebKit（如 Chrome、Safari） */
    image-rendering: crisp-edges; /* 提高清晰度 */
    image-rendering: pixelated; /* 适用于像素风格的图片 */
}

2、避免浏览器默认缩放，适用于以图片原始比例展示

img {
    width: auto;
    height: auto;
    max-width: 100%; /* 确保图片不会超出容器 */
}

3、使用transform:scale()代替width/height放大，scale() 比 width 放大效果更好，不会导致像素拉伸模糊。

4、使用svg或者webp格式图片，适用于矢量图标、高清图片。

SVG（矢量图）：适用于 logo、图标，放大不会模糊。
WebP（新格式）：适用于网页图片，清晰度高，压缩率高。

20、如何实现浏览器的响应式布局

1、使用meta viewport适配移动端

🔹 width=device-width：设置网页宽度等于设备屏幕宽度。
🔹 initial-scale=1：初始缩放比例 1:1，防止手机端缩小网页。

<meta name="viewport" content="width=device-width, initial-scale=1">

2、使用css的媒体查询@media适配不同屏幕，根据屏幕大小，动态调整布局和样式

/* 适配小屏幕（手机） */
@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

/* 适配中等屏幕（平板） */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    body {
        background-color: lightgreen;
    }
}

/* 适配大屏幕（PC） */
@media screen and (min-width: 1025px) {
    body {
        background-color: lightcoral;
    }
}

3、使用rem、vw、vh代替px，让字体/元素自适应，与媒体查询一起使用在不同屏幕修改根元素大小

rem：基于根元素的字体大小，字体在不同屏幕上自适应缩放。
vw（视口宽度）和 vh（视口高度）：适配全屏布局。

html {
    font-size: 16px; /* 基础字体大小 */
}

p {
    font-size: 1.2rem; /* 1.2倍基础字体 */
}

.box {
    width: 50vw; /* 视口宽度的 50% */
    height: 30vh; /* 视口高度的 30% */
}

4、使用弹性盒flexbox弹性布局

flex-wrap: wrap; 让元素在小屏幕自动换行。
flex: 1; 让元素根据屏幕宽度自适应缩放。

.container {
    display: flex;
    flex-wrap: wrap; /* 自动换行 */
    justify-content: space-between; /* 两端对齐 */
}

.item {
    flex: 1; /* 自适应宽度 */
    min-width: 200px; /* 防止过小 */
    background-color: #f4f4f4;
    margin: 10px;
    padding: 20px;
    text-align: center;
}

5、使用网格布局

6、使用bootstrap(网格系统)或者tailwind css框架

7、对于图片可以加上max-width:100%;防止图片在小屏幕溢出