HTML/CSS 基础面试题

1. HTML5 语义化标签

问题：HTML5 有哪些语义化标签？为什么要使用语义化标签？

答案：

常用语义化标签：

html

<!-- 文档结构 -->
<header>页眉</header>
<nav>导航</nav>
<main>主要内容</main>
<aside>侧边栏</aside>
<footer>页脚</footer>

<!-- 内容区块 -->
<section>章节</section>
<article>文章</article>
<aside>侧边内容</aside>

<!-- 文本内容 -->
<h1>标题</h1>
<p>段落</p>
<blockquote>引用</blockquote>
<code>代码</code>
<pre>预格式化文本</pre>

<!-- 列表 -->
<ul>无序列表</ul>
<ol>有序列表</ol>
<dl>定义列表</dl>
<dt>定义术语</dt>
<dd>定义描述</dd>

<!-- 表格 -->
<table>表格</table>
<thead>表头</thead>
<tbody>表体</tbody>
<tfoot>表尾</tfoot>
<tr>行</tr>
<th>表头单元格</th>
<td>数据单元格</td>

<!-- 表单 -->
<form>表单</form>
<input>输入框</input>
<textarea>文本域</textarea>
<select>下拉选择</select>
<button>按钮</button>
<label>标签</label>

<!-- 多媒体 -->
<figure>媒体容器</figure>
<figcaption>媒体说明</figcaption>
<video>视频</video>
<audio>音频</audio>
<canvas>画布</canvas>
<svg>矢量图</svg>

使用语义化标签的好处：

SEO 优化：
- 搜索引擎更好地理解页面结构
- 提高搜索排名
可访问性：
- 屏幕阅读器更好地解析内容
- 改善视障用户体验
代码可读性：
- 代码结构清晰
- 便于团队协作
样式维护：
- 更容易选择和样式化元素

2. CSS 盒模型

问题：CSS 盒模型是什么？如何计算元素大小？

答案：

盒模型组成：

css

.box {
  /* 内容区域 */
  width: 200px;
  height: 100px;
  
  /* 内边距 */
  padding: 20px;
  
  /* 边框 */
  border: 5px solid #000;
  
  /* 外边距 */
  margin: 10px;
}

盒模型计算：

css

/* 标准盒模型（box-sizing: content-box） */
.box {
  width: 200px;
  padding: 20px;
  border: 5px;
  margin: 10px;
}

/* 实际占用宽度 = width + padding + border + margin */
/* 200 + 20*2 + 5*2 + 10*2 = 270px */

/* IE 盒模型（box-sizing: border-box） */
.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px;
  margin: 10px;
}

/* 实际占用宽度 = width + margin */
/* 200 + 10*2 = 220px */
/* 内容宽度 = width - padding - border */
/* 200 - 20*2 - 5*2 = 150px */

盒模型属性：

css

/* 外边距 */
margin: 10px;           /* 四边相同 */
margin: 10px 20px;      /* 上下10px，左右20px */
margin: 10px 20px 30px; /* 上10px，左右20px，下30px */
margin: 10px 20px 30px 40px; /* 上右下左 */

/* 内边距 */
padding: 10px;
padding: 10px 20px;
padding: 10px 20px 30px 40px;

/* 边框 */
border: 1px solid #000;
border-width: 1px;
border-style: solid;
border-color: #000;

/* 单独设置 */
border-top: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;

3. CSS 选择器

问题：CSS 有哪些选择器？优先级如何计算？

答案：

选择器类型：

css

/* 1. 元素选择器 */
div { color: red; }
p { color: blue; }

/* 2. 类选择器 */
.container { width: 100%; }
.active { color: green; }

/* 3. ID 选择器 */
#header { background: #fff; }

/* 4. 属性选择器 */
input[type="text"] { border: 1px solid #ccc; }
a[href^="https"] { color: blue; }
img[src$=".png"] { border: 1px solid #000; }

/* 5. 后代选择器 */
.container p { margin: 10px; }

/* 6. 子元素选择器 */
.container > p { margin: 10px; }

/* 7. 相邻兄弟选择器 */
h1 + p { margin-top: 20px; }

/* 8. 通用兄弟选择器 */
h1 ~ p { color: gray; }

/* 9. 伪类选择器 */
a:hover { color: red; }
a:active { color: blue; }
a:visited { color: purple; }
input:focus { border: 2px solid blue; }
li:first-child { font-weight: bold; }
li:last-child { font-weight: bold; }
li:nth-child(odd) { background: #f0f0f0; }

/* 10. 伪元素选择器 */
::before { content: ""; }
::after { content: ""; }
::first-letter { font-size: 2em; }
::first-line { font-weight: bold; }

/* 11. 通用选择器 */
* { margin: 0; padding: 0; }

选择器优先级：

css

/* 优先级计算：内联 > ID > 类/伪类/属性 > 元素/伪元素 */

/* 元素选择器：1 */
div { color: red; }

/* 类选择器：10 */
.container { color: blue; }

/* ID 选择器：100 */
#header { color: green; }

/* 内联样式：1000 */
<div style="color: purple;">Text</div>

/* 组合选择器 */
/* div (1) + .container (10) = 11 */
div.container { color: orange; }

/* #header (100) + .active (10) = 110 */
#header.active { color: yellow; }

/* !important 最高优先级 */
div { color: red !important; }

4. Flexbox 布局

问题：Flexbox 如何使用？

答案：

基本用法：

css

.container {
  display: flex;
}

/* 方向 */
.container {
  flex-direction: row;        /* 水平（默认） */
  flex-direction: row-reverse; /* 水平反转 */
  flex-direction: column;      /* 垂直 */
  flex-direction: column-reverse; /* 垂直反转 */
}

/* 换行 */
.container {
  flex-wrap: nowrap;      /* 不换行（默认） */
  flex-wrap: wrap;        /* 换行 */
  flex-wrap: wrap-reverse; /* 换行反转 */
}

/* 主轴对齐 */
.container {
  justify-content: flex-start;    /* 起点（默认） */
  justify-content: flex-end;      /* 终点 */
  justify-content: center;        /* 居中 */
  justify-content: space-between;  /* 两端对齐 */
  justify-content: space-around;   /* 环绕对齐 */
  justify-content: space-evenly;  /* 均匀对齐 */
}

/* 交叉轴对齐 */
.container {
  align-items: flex-start;   /* 起点（默认） */
  align-items: flex-end;     /* 终点 */
  align-items: center;       /* 居中 */
  align-items: baseline;     /* 基线 */
  align-items: stretch;      /* 拉伸 */
}

/* 多行交叉轴对齐 */
.container {
  align-content: flex-start;
  align-content: flex-end;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
  align-content: stretch;
}

子元素属性：

css

.item {
  /* 放大比例 */
  flex-grow: 0;     /* 不放大（默认） */
  flex-grow: 1;     /* 放大 */
  
  /* 缩小比例 */
  flex-shrink: 1;   /* 缩小（默认） */
  flex-shrink: 0;   /* 不缩小 */
  
  /* 基础大小 */
  flex-basis: auto;  /* 自动（默认） */
  flex-basis: 200px; /* 固定大小 */
  
  /* 简写 */
  flex: 0 1 auto;     /* flex-grow flex-shrink flex-basis */
  flex: 1;           /* flex: 1 1 0% */
  flex: auto;         /* flex: 0 1 auto */
  
  /* 单独对齐 */
  align-self: flex-start;
  align-self: center;
  align-self: flex-end;
  align-self: stretch;
}

常用布局：

css

/* 水平居中 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 垂直居中 */
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 两端对齐 */
.container {
  display: flex;
  justify-content: space-between;
}

/* 等分布局 */
.container {
  display: flex;
}

.item {
  flex: 1;
}

/* 圣杯布局 */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  flex: 0 0 auto;
}

.main {
  flex: 1;
}

.footer {
  flex: 0 0 auto;
}

5. Grid 布局

问题：CSS Grid 如何使用？

答案：

基本用法：

css

.container {
  display: grid;
  
  /* 定义列 */
  grid-template-columns: 100px 100px 100px;
  grid-template-columns: repeat(3, 100px);
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-columns: auto 1fr auto;
  
  /* 定义行 */
  grid-template-rows: 100px 100px;
  grid-template-rows: repeat(2, 100px);
  grid-template-rows: 1fr 1fr;
  
  /* 间距 */
  grid-gap: 10px;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  
  /* 简写 */
  gap: 10px;
  gap: 10px 20px;
}

子元素定位：

css

.item {
  /* 列位置 */
  grid-column: 1;           /* 第1列 */
  grid-column: 1 / 3;       /* 第1列到第3列 */
  grid-column: 1 / span 2;  /* 第1列开始，跨越2列 */
  
  /* 行位置 */
  grid-row: 1;
  grid-row: 1 / 3;
  grid-row: 1 / span 2;
  
  /* 简写 */
  grid-area: 1 / 1 / 3 / 3;
  grid-area: row-start / col-start / row-end / col-end;
  
  /* 命名区域 */
  grid-area: header;
}

命名网格：

css

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

常用布局：

css

/* 两栏布局 */
.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
}

/* 三栏布局 */
.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 20px;
}

/* 网格布局 */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

/* 响应式网格 */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

6. BFC（块级格式化上下文）

问题：什么是 BFC？如何创建 BFC？

答案：

BFC 定义： BFC（Block Formatting Context）是一个独立的渲染区域，内部元素的布局不会影响外部元素。

创建 BFC 的方法：

css

/* 1. float 不为 none */
.element {
  float: left;
  float: right;
}

/* 2. position 不为 static/relative */
.element {
  position: absolute;
  position: fixed;
}

/* 3. overflow 不为 visible */
.element {
  overflow: hidden;
  overflow: auto;
  overflow: scroll;
}

/* 4. display 为 table-cell/table-caption/inline-block */
.element {
  display: table-cell;
  display: table-caption;
  display: inline-block;
}

/* 5. display 为 flow-root */
.element {
  display: flow-root;
}

BFC 应用场景：

css

/* 1. 清除浮动 */
.container {
  overflow: hidden; /* 创建 BFC */
}

.float {
  float: left;
}

/* 2. 防止 margin 重叠 */
.parent {
  overflow: hidden; /* 创建 BFC */
}

.child {
  margin: 20px;
}

/* 3. 两栏布局 */
.left {
  float: left;
  width: 200px;
}

.right {
  overflow: hidden; /* 创建 BFC */
  margin-left: 200px;
}

7. CSS 动画和过渡

问题：CSS 动画和过渡如何使用？

答案：

过渡（Transition）：

css

.element {
  /* 过渡属性 */
  transition-property: all;
  transition-property: width, height, background-color;
  
  /* 过渡时间 */
  transition-duration: 0.3s;
  transition-duration: 0.3s, 0.5s;
  
  /* 过渡函数 */
  transition-timing-function: ease;
  transition-timing-function: linear;
  transition-timing-function: ease-in;
  transition-timing-function: ease-out;
  transition-timing-function: ease-in-out;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
  
  /* 延迟 */
  transition-delay: 0s;
  transition-delay: 0.5s;
  
  /* 简写 */
  transition: all 0.3s ease;
  transition: width 0.3s ease, height 0.5s ease-in 0.2s;
}

/* 使用 */
.element:hover {
  width: 200px;
  background-color: red;
}

动画（Animation）：

css

@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.element {
  /* 动画名称 */
  animation-name: slideIn;
  
  /* 动画时间 */
  animation-duration: 1s;
  
  /* 动画函数 */
  animation-timing-function: ease-in-out;
  
  /* 动画延迟 */
  animation-delay: 0s;
  
  /* 动画次数 */
  animation-iteration-count: 1;
  animation-iteration-count: infinite;
  
  /* 动画方向 */
  animation-direction: normal;
  animation-direction: reverse;
  animation-direction: alternate;
  animation-direction: alternate-reverse;
  
  /* 动画填充模式 */
  animation-fill-mode: none;
  animation-fill-mode: forwards;
  animation-fill-mode: backwards;
  animation-fill-mode: both;
  
  /* 动画播放状态 */
  animation-play-state: running;
  animation-play-state: paused;
  
  /* 简写 */
  animation: slideIn 1s ease-in-out 0s 1 forwards;
}

/* 使用 */
.element {
  animation: slideIn 1s ease-in-out;
}

常用动画：

css

/* 淡入淡出 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* 旋转 */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 缩放 */
@keyframes scale {
  from { transform: scale(1); }
  to { transform: scale(1.5); }
}

/* 移动 */
@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

/* 弹跳 */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

8. 响应式设计

问题：如何实现响应式设计？

答案：

媒体查询：

css

/* 基本语法 */
@media screen and (min-width: 768px) {
  .container {
    width: 750px;
  }
}

/* 常用断点 */
/* 手机 */
@media screen and (max-width: 576px) {
  /* 手机样式 */
}

/* 平板 */
@media screen and (min-width: 577px) and (max-width: 992px) {
  /* 平板样式 */
}

/* 桌面 */
@media screen and (min-width: 993px) {
  /* 桌面样式 */
}

/* 横屏 */
@media screen and (orientation: landscape) {
  /* 横屏样式 */
}

/* 竖屏 */
@media screen and (orientation: portrait) {
  /* 竖屏样式 */
}

/* 高分辨率 */
@media screen and (min-resolution: 2dppx) {
  /* 高分辨率样式 */
}

弹性布局：

css

.container {
  /* 相对单位 */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  
  /* 弹性单位 */
  font-size: 16px;
  padding: 1em;      /* 相对于字体大小 */
  width: 50vw;       /* 视口宽度的50% */
  height: 100vh;      /* 视口高度的100% */
  font-size: 1rem;     /* 根元素字体大小 */
}

/* Flexbox 响应式 */
.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 300px;  /* 最小宽度300px，自动换行 */
}

/* Grid 响应式 */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

图片响应式：

css

/* 响应式图片 */
img {
  max-width: 100%;
  height: auto;
}

/* 背景图片响应式 */
.container {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
}

/* 使用 srcset */
<img 
  src="small.jpg"
  srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
  sizes="(max-width: 500px) 500px, (max-width: 1000px) 1000px, 1500px"
  alt="Responsive image"
>

9. CSS 预处理器

问题：CSS 预处理器有哪些？如何使用？

答案：

Sass/SCSS：

scss

// 变量
$primary-color: #3498db;
$font-size: 16px;

// 嵌套
.container {
  width: 100%;
  
  .header {
    background: $primary-color;
    
    .title {
      font-size: $font-size;
    }
  }
}

// 混合
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.button {
  @include border-radius(5px);
}

// 继承
%message {
  padding: 10px;
  border: 1px solid #ccc;
}

.success {
  @extend %message;
  background: #2ecc71;
}

.error {
  @extend %message;
  background: #e74c3c;
}

// 函数
@function calculate-width($columns, $gap) {
  @return ($columns * 100%) - (($columns - 1) * $gap);
}

.container {
  width: calculate-width(3, 20px);
}

Less：

less

// 变量
@primary-color: #3498db;
@font-size: 16px;

// 嵌套
.container {
  width: 100%;
  
  .header {
    background: @primary-color;
    
    .title {
      font-size: @font-size;
    }
  }
}

// 混合
.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.button {
  .border-radius(5px);
}

// 继承
.message {
  padding: 10px;
  border: 1px solid #ccc;
}

.success {
  .message();
  background: #2ecc71;
}

PostCSS：

javascript

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')
  ]
};

// 使用 CSS 变量
:root {
  --primary-color: #3498db;
  --font-size: 16px;
}

.container {
  color: var(--primary-color);
  font-size: var(--font-size);
}

10. CSS 性能优化

问题：如何优化 CSS 性能？

答案：

优化策略：

css

/* 1. 减少选择器复杂度 */
/* 不好 */
.container .header .nav .menu .item .link {
  color: blue;
}

/* 好 */
.nav-link {
  color: blue;
}

/* 2. 避免通配符选择器 */
/* 不好 */
* {
  margin: 0;
  padding: 0;
}

/* 好 */
body {
  margin: 0;
  padding: 0;
}

/* 3. 使用简写属性 */
/* 不好 */
.element {
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

/* 好 */
.element {
  margin: 10px;
}

/* 4. 避免重复代码 */
/* 不好 */
.button {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.submit-button {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* 好 */
.button {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.submit-button {
  @extend .button;
}

/* 5. 使用 CSS 变量 */
:root {
  --primary-color: #3498db;
  --font-size: 16px;
  --spacing: 10px;
}

.element {
  color: var(--primary-color);
  font-size: var(--font-size);
  padding: var(--spacing);
}

/* 6. 使用 transform 和 opacity 代替动画 */
/* 不好 */
.element {
  left: 0;
  transition: left 0.3s;
}

.element:hover {
  left: 100px;
}

/* 好 */
.element {
  transform: translateX(0);
  transition: transform 0.3s;
}

.element:hover {
  transform: translateX(100px);
}

/* 7. 使用 will-change 提示浏览器 */
.animated {
  will-change: transform, opacity;
}

/* 8. 避免重排重绘 */
/* 不好 */
.element {
  width: 100px;
  height: 100px;
  margin-left: 10px;
}

/* 好 */
.element {
  width: 100px;
  height: 100px;
  transform: translateX(10px);
}

/* 9. 压缩 CSS */
/* 使用工具：cssnano, clean-css, csso */

/* 10. 按需加载 CSS */
/* 使用 Webpack 的代码分割 */

HTML/CSS 基础面试题 ​

1. HTML5 语义化标签 ​

2. CSS 盒模型 ​

3. CSS 选择器 ​

4. Flexbox 布局 ​

5. Grid 布局 ​

6. BFC（块级格式化上下文） ​

7. CSS 动画和过渡 ​

8. 响应式设计 ​

9. CSS 预处理器 ​

10. CSS 性能优化 ​