前端面试题（H5C3篇）

选择器	权重
！important	无穷大
行内样式	1,0,0,0
id选择器	0,1,0,0
类、伪类、属性选择器	0,0,1,0
元素、伪元素选择器	0,0,0,1
通配符选择器	0,0,0,0
继承的样式	没有权重

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：相对于浏览器视口高度。

CSS 长度单位详细总结_css长度单位-CSDN博客

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：元素的排列顺序。

Flex 布局语法教程 | 菜鸟教程

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;
}

清除浮动的4种方式_清浮动-CSDN博客

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）作用：避免外边距重叠、自适应两栏布局、清除浮动。

什么是BFC？看这一篇就够了-CSDN博客

13.定位

14.隐藏元素的方法

（1）display：none 元素在页面上消失，不占据页面空间，会导致浏览器的回流与重绘，不能响应交互类事件。

（2）visibility：hidden 元素在页面占据的空间不变，会导致浏览器重绘而不会回流，也不能响应交互类事件。

（3）opacity：0 元素在页面占据的空间不变，不会导致浏览器回流或重绘，可以响应交互类事件。

15.HTML5新增内容

html5新增了什么-H5教程-PHP中文网

16.CSS3新增内容

css3新增属性有哪些-前端问答-PHP中文网

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的大小，位置进行修改后，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排，也叫回流，就是重新生成布局，重新排列元素。

重绘和重排_元素的显隐和重绘重排-CSDN博客

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）

前端响应式布局原理与方案（详细版）-CSDN博客

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>