面试题-HTML&CSS

望间2023/3/19大约 7 分钟

一、HTML 基础

1.1 HTML5 语义化

概念：合理正确地使用语义化标签来创建页面结构，让正确的标签做正确的事
语义化标签：header、nav、main、article、section、aside、footer
语义化优点：
1. 在无CSS样式时，页面仍呈现良好结构
2. 代码结构清晰，易于阅读和维护
3. 方便其他设备解析（如屏幕阅读器）
4. 有利于搜索引擎优化（SEO）

1.2 HTML5 新特性

语义化标签：如 header、nav、article 等
媒体API：audio、video 标签
图形绘制：canvas、webGL
交互能力：拖拽释放(Drag and drop) API
历史管理：history API
动画优化：requestAnimationFrame
位置服务：地理位置(Geolocation) API
实时通信：webSocket
本地存储：localStorage、SessionStorage
增强表单：calendar、date、time、email、url、search 等新控件

二、CSS 核心概念

2.1 CSS 选择器及优先级

常用选择器

ID选择器：#myid
类选择器：.myclass
属性选择器：a[rel="external"]
伪类选择器：a:hover, li:nth-child
标签选择器：div, h1, p
相邻选择器：h1 + p
子选择器：ul > li
后代选择器：li a
通配符选择器：*

优先级计算

优先级权重：
- !important：最高优先级
- 内联样式：1000
- ID选择器：0100
- 类/属性/伪类选择器：0010
- 元素/伪元素选择器：0001
- 关系/通配符选择器：0000
优先级规则：!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符 > 继承 > 浏览器默认属性

2.2 盒子模型

标准盒模型 vs IE盒模型

标准盒模型：width = content 宽度
- 元素总宽度 = width + margin(左右) + padding(左右) + border(左右)
IE盒模型：width = content + padding + border 宽度
- 元素总宽度 = width + margin(左右)

box-sizing 属性

content-box：默认值，标准盒模型
border-box：IE盒模型
inherit：继承父元素的 box-sizing 值

2.3 BFC（块级格式上下文）

概念

BFC是一个独立的渲染区域，内部元素的布局不会影响外部元素

BFC 布局规则

内部Box在垂直方向上一个接一个排列
同一BFC内相邻Box的margin会发生重叠
每个元素的margin box左边与包含块border box左边接触
BFC区域不会与float box重叠
BFC是独立容器，内部元素不影响外部元素
计算BFC高度时，浮动元素也参与计算

创建BFC的方法

根元素（HTML）
float值不为none
position为absolute或fixed
display为inline-block、table-cell、table-caption
overflow值不为visible

BFC的应用场景

解决margin重叠问题
清除浮动（包含浮动元素）
防止元素被浮动元素覆盖
多列布局中防止因宽度四舍五入而换行

三、CSS 布局技术

3.1 元素定位（position）

static：默认值，正常文档流定位
relative：相对定位，相对于自身原有位置偏移，不脱离文档流
absolute：绝对定位，相对于最近的已定位父元素，脱离文档流
fixed：固定定位，相对于浏览器窗口，脱离文档流
sticky：粘性定位，结合了relative和fixed的特性，在阈值内相对定位，超出后固定定位

3.2 Flex 弹性布局

容器属性

flex-direction：决定主轴方向（row | row-reverse | column | column-reverse）
flex-wrap：决定是否换行（nowrap | wrap | wrap-reverse）
flex-flow：flex-direction和flex-wrap的简写
justify-content：主轴对齐方式
align-items：交叉轴对齐方式
align-content：多根轴线的对齐方式

项目属性

order：项目排列顺序，数值越小越靠前
flex-grow：项目放大比例
flex-shrink：项目缩小比例
flex-basis：项目占据的主轴空间
flex：flex-grow、flex-shrink和flex-basis的简写
align-self：单个项目的对齐方式，可覆盖容器的align-items

3.3 其他布局方式

Rem 布局

原理：基于根元素(html)的font-size计算，实现等比缩放
优点：可快速适配移动端布局、字体和图片高度
缺点：px值转换rem复杂，需JS动态控制根元素font-size

百分比布局

原理：使用百分比单位实现响应式效果
特点：大部分属性（包括padding、margin等）相对于父元素宽度计算
缺点：计算复杂，不同属性的相对基准不一致

浮动布局

原理：元素脱离正常文档流，向左/右移动直到碰到包含框或其他浮动元素
优点：适合图文混排，可实现横向排列
缺点：元素脱离文档流会导致父元素高度塌陷

四、CSS 高级特性

4.1 CSS3 新特性

过渡（transition）：
```
transition: all 0.5s ease;
```
动画（animation）：
```
animation: logo2-line 2s linear;
```

变换（transform）：

transform: translate(30px, 30px) rotate(30deg) scale(0.8);

选择器：:nth-of-type()
文字阴影：text-shadow: 2px 2px 2px #000;
盒子阴影：box-shadow: 10px 10px 5px #999;
边框图像：border-image: url(border.png);
渐变：线性渐变、径向渐变
滤镜（Filter）
弹性布局、栅格布局、多列布局
媒体查询

4.2 水平垂直居中

水平居中

行内元素：text-align: center;
定宽块级元素：margin: 0 auto;
不定宽块级元素：
- display: table; margin: 0 auto;
- display: inline-block; text-align: center;
- 绝对定位 + transform: translateX(-50%);
- Flex布局：justify-content: center;

垂直居中

单行文本：line-height 等于父元素高度
多行文本：display: table-cell; vertical-align: middle;
块级元素：
- 绝对定位 + 负margin
- 绝对定位 + transform: translateY(-50%);
- Flex布局：align-items: center; 或 margin: auto;

4.3 隐藏元素的方法

opacity: 0：元素不可见，但不改变布局，可触发事件
visibility: hidden：元素不可见，不改变布局，不可触发事件（重绘）
display: none：元素不可见，改变布局，不可触发事件（回流+重绘）

4.4 绘制三角形

div:after {
  position: absolute;
  width: 0;
  height: 0;
  content: "";
  border: 100px solid transparent;
  border-top-color: #ff0;
}

4.5 清除浮动的方法

添加额外标签：在浮动元素后添加 clear: both; 的空标签
父元素设置overflow：overflow: hidden; 或 overflow: auto;

使用伪元素：

.parent:after {
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}

五、浏览器兼容性与优化

5.1 渐进增强与优雅降级

渐进增强：先构建基本功能，再针对高级浏览器增强体验
优雅降级：先构建完整功能，再针对低版本浏览器进行兼容处理

代码示例：

/* 渐进增强写法 */
.transition {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

/* 优雅降级写法 */
.transition {
  transition: all 0.5s;
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
}