前端面试题（H5C3篇）
目录
1.盒模型
概念：CSS把每个元素视为一个盒子，每个盒子包括content、padding、border、margin四个部分，盒模型是CSS布局的基本单元。
W3C标准盒模型（content-box）：只包含内容content，通过box-sizing设置。
IE盒模型/怪异盒模型（border-box）：包含content、border和padding，通过box-sizing设置。
弹性盒模型（flex model）：对移动端更加友好，会根据设备屏幕分辨率自动调整各个容器的大小，以保证显示在手机屏幕上。为父容器设置属性display：flex就可以声明该容器为一个弹性盒子，它里面的各种元素会自动布局。开启flex模式后，所有元素都会默认横着摆放，包括块级元素。
2.元素显示模式
（1）块级元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等。
- 独占一行，宽度默认是父级容器的100%，垂直方向排列。
- 宽高、行高、内外边距都可以控制。
- 能容纳其他块元素或者行内元素。
（2）行内元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等。
- 不独占一行，水平方向排列，宽高一般由内容决定。
- 不能直接设置宽度高度和内外边距，可以设置行高。
- 只能容纳文本或其他行内元素。
（3）行内块元素：<img/>、<input/>、<td/>、<textarea/>等。
- 可以在一行中放置多个行内块元素。
- 可以设置宽度、高度、内外边距和行高。
- 默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白间隙。
（4）元素显示模式转换
- 转换为块级元素：display：block
- 转换为行内元素：display：inline
- 转换为行内块元素 ：display：inline-block
3.HTML语义化
概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。
好处：
- 在没有CSS的情况下，页面也能呈现出很好的内容结构和代码结构。
- 用户体验：例如title、alt用于解释名词或解释图片信息，label标签的活用。
- 有利于SEO：和搜索引擎建立良好的沟通，有助于爬虫抓取更多有效信息。（爬虫依赖于标签来确定上下文和各个关键字的权重）
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义化的方式来渲染网页。
- 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
语义化标签：
- <header>：网页的头部
- <main>：网页的主体（只有一个main）
- <nav>：网页的导航
- <section>：独立的区块
- <aside>：网页侧边栏
- <article>：独立的文章
- <footer>：网页的底部
4.CSS选择器
（1）元素选择器：元素 {}
（2）id选择器：#id {}
（3）类选择器：.class {}
（4）复合选择器
- 交集选择器：选择器1选择器2...
- 并集选择器：选择器1，选择器2...
（5）关系选择器
- 子代选择器：父元素>子元素
- 后代选择器：祖先元素 后代元素
- 兄弟选择器：选择器1+选择器2（只选择一个）选择器1~选择器2（选择后面所有）
（6）属性选择器
（7）伪类选择器
（8）伪元素选择器
- ::before 元素的开始位置（必须结合content使用）
- ::after 元素的结束位置（必须结合content使用）
- ::first-leter 第一个字母
- ::first-line 第一行
- ::selection 选中的内容
5.伪类和伪元素的区别
伪类是一个以冒号作为前缀，被添加到一个选择器末尾的关键字，样式被呈现到指定的元素时。如:first-child，通过在元素选择器上加入伪类改变元素状态。
伪元素是以两个冒号作为前缀，用于创建一些不在文档树中的元素，并为其添加样式。通过对元素的操作进行对元素的改变。如::before可以在一个元素前添加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际不在文档树中。
6.选择器优先级
7.CSS实现水平垂直居中
（1）子绝父相，子元素top、bottom、left、right设为0，margin设为auto
（2）子绝父相，子元素top、left设为50%，transform设为translate（-50%，-50%）或负的margin值
（3）父元素设置display：flex，justify-content、align-items设为center
（4）父元素设置display：grid，子元素设置align-self：center、justify-self：center或者margin：auto
（5）父元素设置display：grid，align-items和justify-items设为center
（6）文本水平居中text-align：center，行高设置为父元素高度
（7）行内元素垂直居中vertical-align：middle（对图片、表格有效）
8.元素溢出
如果子元素超过了父元素的大小，则会溢出。使用overflow属性设置父元素如何处理溢出。
- overflow：visible 会溢出，在父元素外部显示（默认值）
- overflow：hidden 溢出的内容会被裁剪，不显示
- overflow：scroll 生成滚动条
- overflow：auto 根据需要生成滚动条
9.几种长度单位的区别
（1）px：相对长度单位，像素px是相对于显示器屏幕分辨率而言的。
（2）em：相对于父元素的font-size来计算的。
（3）rem：相对于根元素html的font-size来计算的。
（4）rpx：小程序独有的，论大小屏幕，规定屏幕宽为750rpx。
（5）vw：相对于浏览器视口宽度。
（6）vh：相对于浏览器视口高度。
10.flex布局
弹性容器属性
（1）display：元素显示模式。
- flex 块级弹性容器
- inline-flex 行内弹性容器
（2） flex-direction：设置主轴的方向。
- row 水平排列，主轴左→右（默认值）
- row-reverse 反向水平排列，主轴右→左
- column 垂直排列，主轴上→下
- column-reverse 反向垂直排列，主轴下→上
（3）flex-wrap：弹性元素是否自动换行。
- nowrap 不换行
- wrap换行
- wrap-reverse 反向换行，第一行在下方
（4）flex-flow：flex-direction和flex-wrap的简写，默认值为row nowrap。
（5）justify-content：定义元素在主轴上的对齐方式。
- flex-start 向主轴起点对齐
- flex-end 向主轴终点对齐
- center 元素在主轴居中
- space-between 均匀排列每个元素，首个元素放置于起点，末尾元素放置于终点
- space-around 均匀排列每个元素，每个元素周围分配相同的空间
- space-evenly 均匀排列每个元素，每个元素之间的间隔相等
（6）align-items：定义元素在交叉轴上的对齐方式。
- flex-start 向侧轴起点对齐
- flex-end 向侧轴终点对齐
- center 元素在侧轴居中
（7）align-content：定义侧轴空白空间的分布。
- flex-start 元素沿起点排列
- flex-end 元素沿终点排列
- center 元素居中排列
- space-between 均匀排列元素，第一项与起始点齐平，最后一项与终止点齐平
- space-around 均匀排列元素，元素在两端有一半大小的空间
- space-evenly 均匀排列元素，元素周围有相等的空间
弹性元素属性
（1）flex-grow：指定弹性元素的伸长系数，默认是0。
（2）flex-shrink：指定弹性元素的收缩系数，默认是1。
（3）align-self：对齐当前flex行的元素，并覆盖align-items的值。
（4）flex-basis：元素在主轴上的基础长度。
（5）flex：flex-grow、flex-shrink和flex-basis的简写。
- initial：0 1 auto
- auto：1 1 auto
- none：0 0 auto
（6）order：元素的排列顺序 。
11.清除浮动的方式
（1）浮动的特点
- 浮动元素会脱离标准流，不再保留原来的位置
- 浮动元素会一行内显示并顶部对齐，中间没有缝隙
- 浮动元素具有行内块元素的特性，宽度和高度默认为被内容撑开的范围
- 浮动元素只会影响其后面的标准流，不会影响前面的标准流
- 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围
（2）清除浮动
- 额外标签法（隔墙法）：在浮动元素末尾添加一个空标签，如<div style="clear:both"></div>，要求这个空标签必须是块级元素
- 父元素添加overflow属性：将父元素的overflow属性设为非visible值，可以为父元素开启BFC
- 父元素添加after伪元素：伪元素是一个行内元素，需要转换为块元素
.clearfix::after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}- 父元素添加双伪元素： 可以解决外边距重叠和高度塌陷问题
.clearfix::before,
.clearfix::after {
content: '';
display: table;
clear: both;
}12.BFC
（1）定义：BFC(Block Formatting Context)块级格式化环境。它是一个独立的渲染区域，并且与这个区域外部毫不相干。
（2）特点：不会被浮动元素覆盖、可以包含浮动元素、父子元素外边距不会重叠。
（3）开启：
- float的值不是none
- position的值不是static或者relative
- display的值是inline-block、table-cell、flex、table-caption或者inline-flex
- overflow的值不是visible
（4）作用：避免外边距重叠、自适应两栏布局、清除浮动。
13.定位
14.隐藏元素的方法
（1）display：none 元素在页面上消失，不占据页面空间，会导致浏览器的回流与重绘，不能响应交互类事件。
（2）visibility：hidden 元素在页面占据的空间不变，会导致浏览器重绘而不会回流，也不能响应交互类事件。
（3）opacity：0 元素在页面占据的空间不变，不会导致浏览器回流或重绘，可以响应交互类事件。
15.HTML5新增内容
16.CSS3新增内容
17.href和src的区别
（1）href标识超文本引用，是引用和页面关联，在当前元素和引用资源之间建立联系，用在link和a等元素上。
（2）src引用资源地址，表示替换当前元素，用在image、script、iframe上。
18.link和@import的区别
（1）从属关系：link是html的标签，不仅可以加载css文件，还可以定义RSS、rel连接属性等。@import是css的语法，只有导入样式表的作用。
（2）加载顺序：页面加载时，link会和html同时被加载。@import引入的css将在页面加载完毕后被加载。
（3）兼容性：link是html标签，不存在兼容性问题。@import是css2.1才有的语法，在IE5以上才能识别。
（4）JavaScript可以控制dom去改变link标签引入的样式。@import的样式不是dom可以控制的。
（5）link方式的样式权重高于@import的权重。
19.CSS三角
.box {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: skyblue;
}【CSS如何画简单的三角形或者梯形】_css画梯形_努力的小言恬恬的博客-CSDN博客
20.重绘和重排
重绘（repaint）：是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。
重排（reflow）：对DOM的大小，位置进行修改后，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排，也叫回流，就是重新生成布局，重新排列元素。
21.响应式布局
响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。
响应式设计与自适应设计的区别：
- 响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。
- 自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。
响应式布局的实现方案：
（1）媒体查询：CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
（2）百分比布局：通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果。Bootstrap里面的栅格系统就是利用百分比来定义元素的宽高，CSS3支持最大最小高，可以将百分比和max（min）一起结合使用来定义元素在不同设备下的宽高。
（3）rem布局：是CSS3新增的单位，并且移动端的支持度很高。rem单位都是相对于根元素html的font-size来决定大小的，根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。 因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可。
rem布局思想：
- 一般不要给元素设置具体的宽度，但是对于一些小图标可以设定具体宽度值。
- 高度值可以设置固定值，设计稿有多大，我们就严格有多大。
- 所有设置的固定值都用
rem做单位（首先在HTML总设置一个基准值：px和rem的对应比例，然后在效果图上获取px值，布局的时候转化为rem值)。 - js获取真实屏幕的宽度，让其除以设计稿的宽度，算出比例，把之前的基准值按照比例进行重新的设定，这样项目就可以在移动端自适应了。
rem布局的缺点：在响应式布局中，必须通过js来动态控制根元素font-size的大小，也就是说css样式和js代码有一定的耦合性，且必须将改变font-size的代码放在css样式之前。
（4）视口单位：CSS3中引入了一个新的单位vw/vh，与视图窗口有关。vw表示相对于视图窗口的宽度，vh表示相对于视图窗口的高度。除了vw和vh外，还有vmin和vmax两个相关单位。
（5）图片响应式：这里的图片响应式包括两个方面，一个是大小自适应，这样能够保证图片在不同的屏幕分辨率下出现压缩、拉伸的情况；一个是根据不同的屏幕分辨率和设备像素比来尽可能选择高分辨率的图片，也就是在小屏幕上不需要高清图或大图，这样我们用小图代替，就可以减少网络带宽了。
（6）成型方案：flex弹性布局、grid网格布局、Columns栅格系统（往往需要依赖某个UI库，如Bootstrap）
22.常见图片格式及应用场景
【前端】常见的图片格式及使用场景_无损压缩base64_程序媛小y的博客-CSDN博客
23.window.location
/* 获取完整 URL */
url = window.location.href;
/* http://127.0.0.1:8020/Test/index.html#test?name=test */
/* 获取文件路径（文件地址）*/
url = window.location.pathname;
/* /Test/index.html */
/* 获取协议 */
url = window.location.protocol;
/* http */
/* 获取主机地址和端口号 */
url = window.location.host;
/* http://127.0.0.1:8020/ */
/* 获取主机地址 */
url = window.location.hostname;
/* http://127.0.0.1/ */
/* 获取端口号 */
url = window.location.port;
/* 8020 */
/* 获取锚点（“#”后面的分段） */
url = window.location.hash;
/* #test?name=test */
/* 获取属性（“?”后面的分段） */
url = window.location.search;
/* 如果需要 URL 中的某一部分，可以自己进行处理 */
url = window.location.pathname;
url = url.substring(url.lastIndexOf('/') + 1, url.length);24.transition过渡
（1）transition：是transition-property、transition-duration、transition-timing-function和transition-delay的简写。
（2）transition-property：规定应用过渡的CSS属性的名称。
（3）transition-duration：定义过渡效果花费的时间，默认是0s。
（4）transition-timing-function：规定过渡效果的时间曲线，默认是ease。
（5）transition-delay：规定过渡效果何时开始，默认是0s。
25.animation动画
26.transform变形
27.meta标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>