HTML+CSS面试题总结（附答案+视频讲解）

HTML+CSS面试题总结如下红色标注为常见重点

对应的视频讲解在B站：可以点击免费观看

2023前端高频面试题详解/面试必刷HTML+CSS前端面试题_哔哩哔哩_bilibili

1. 块元素和行内元素有哪些

2. css3选择器（了解）

3. css优先级

4. 对web标准以及w3c的理解和认识

5. BFC

6. 隐藏元素有哪些方法和区别

7. 一个盒子在水平垂直居中方法

8. 圣杯布局与双飞翼布局

9. css盒子模型

10. 浏览器渲染机制

11. CSS3的新特性

12 flex常见属性

13. 精灵图(雪碧图)的原理及优缺点

14. Display：none和visibility：hidden的区别

15. link和@import

16. 说说你对语义化的理解

1. 块元素和行内元素有哪些

行内元素（span,a,img,input,strong,em,i,u,s,del,...）
块级元素（div,p,h1,h2,h3,h4,h5,h6,ol,ul,table,li,form,dl,dt,...）

2. css3选择器（了解）

Css3新增的选择器

结构伪类选择器

p:first-child p标签的父元素里面的第一个子元素，还得看看这个标签是不是p，是p才能被选中

p:first-of-type p标签的父元素里的第一个p

p:first-child 选择属于父元素的第一个子元素的每个

元素

p:nth-child(n) n 可以是数字也可是数学公式 odd奇数 even偶数

p:last-child 选择属于其父元素最后一个子元素每个

元素

p:nth-last-child(n) 从最后一个子元素开始计数

p:only-child 选择属于其父元素的唯一子元素的每个

元素

p:first-of-type 选择属于其父元素的首个

元素的每个

元素

:nth-of-type(n) n 可以是数字也可是数学公式 odd奇数 even偶数

p:last-of-type 指定父元素的最后一个 p 的元素

p:nth-last-of-type(n) 规定属于其父元素的第二个 p 元素的每个 p，从最后一个子元素开始计数

p:only-of-type 指定属于父元素的特定类型的唯一子元素的每个 p 元素

属性选择器

[attribute^=value] attribute 属性名 value属性值含有xx属性并且是以XX为开头的

[attribute$=value] 含有xx属性并且是以XX为结束的

[attribute*=value] 含有xx属性并且是只要属性值里含有xx就能选中

状态伪类选择器

:enabled 启用的表单元素

:disabled 禁用的表单元素

:checked 选中的表单元素（只用在单选框和复选框里的）

3. css优先级

!important > 行内样式 > ID 选择器 > 类选择器 > 标签选择器。

每个选择器都有权值，权值越大越优先
继承的样式优先级低于自身指定样式
权值相同时，靠近元素的样式优先级高顺序为内联样式表（标签内部）> 内部样式表（当前文件中）> 外部样式表（外部文件中）

4. 对web标准以及w3c的理解和认识

答:标签闭合，标签小写，不乱嵌套，提高搜索引擎搜索几率。使用外链css和js脚本，结构行为表现分离，内容能被更多广泛的设备所访问,

更少的代码和组件，容易维护，改版方便，不需要变动页面内容

5. BFC

BFC概念

也叫【块级格式化上下文】，简单来说，BFC 是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。

BFC是CSS布局的一个概念，是一个环境，里面的元素不会影响外面的元素。

BFC的布局规则

内部的Box会在垂直方向，一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC的区域不会与float box重叠。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

计算BFC的高度时，浮动元素也参与计算

如何创建BFC

1、float的值不是none。

2、position的值不是static或者relative。

3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

4、overflow的值不是visible

BFC作用（解决了什么问题）

阻止margin重叠
可以包含浮动元素 —— 清除内部浮动
自适应两栏布局
可以阻止元素被浮动元素覆盖

6. 隐藏元素有哪些方法和区别

visibility: hidden;这个属性只是简单的隐藏某个元素，但是元素占用的空间仍然存在
opacity: 0; CSS3属性，设置0可以使一个元素完全透明，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
display: none;元素会变得不可见，并且不会再占用元素位置。会改变页面布局。
transform: scale(0);将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留。

7. 一个盒子在水平垂直居中方法

四种方式：

利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。

.div { position: absolute; width: 200px;height: 200px; background: salmon; left: 50%;top: 50%; transform: translate(-50%, -50%); }

利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。该方法适用于盒子有宽高的情况。

.div { position: absolute;width: 200px;height: 200px; left: 0;right: 0;top: 0;bottom: 0;margin: auto;}

利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。该方法适用于盒子宽高已知的情况。

.div { position: absolute; width: 200px;height: 200px; left: 50%; top: 50%; margin-left: calc(-200px / 2); margin-top: calc(-200px / 2); }

使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。

.div { width: 100%; height: 100%; display: flex; justify-content: center; align-items:center; }

8. 圣杯布局与双飞翼布局

区别：圣杯布局给中间div分别设置左右内边距后，将左右两个div进行定位并设置right和left属性，以便不遮挡中间div；双飞翼布局直接在中间div内部创建子div用于放置内容，在该子div里分别设置左右外边距为左右两栏div留出位置。

圣杯布局：左右两边固定，中间自适应的布局方式，效果图如下：

作用：

圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

区别：

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。

不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：

圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。

双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

圣杯布局代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>圣杯布局</title>
    <style>
        #bd {
            padding: 0 200px 0 180px;
            height: 100px;
        }
        #middle {
            float: left;
            width: 100%;
            height: 500px;
            background: blue;
        }
        #left {
            float: left;
            width: 180px;
            height: 500px;
            margin-left: -100%;
            background: #0c9;
            position: relative;
            left: -180px;
        }
        #right {
            float: left;
            width: 200px;
            height: 500px;
            margin-left: -200px;
            background: #0c9;
            position: relative;
            left: 200px;
        }
    </style>
</head>
<body>
<div id="bd">
        <div id="middle">middle</div>
        <div id="left">left</div>
        <div id="right">right</div>
    </div>
</body>
</html>

双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style>
        .out,.left,.right{
            float: left;
            height: 200px;
        }
        .out{
            width: 100%;
            background-color: #eee;
        }   
        .main {
            background-color: pink;
            margin: 0 200px;
            height: 200px;
        }
        .left {
            width: 200px;
            background-color: skyblue;
            margin-left: -100%;
        }
        .right {
            width: 200px;
            background-color: skyblue;
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <div class="out">
        <div class="main">main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>
</html>

后我们来总结一下，双飞翼布局其实和圣杯布局的精髓是一样的，都是通过设置负margin来实现元素的排布。

不同的就是html结构，双飞翼是在middle元素内部又设置了一个milddle-inner并设置它的左右margin，而圣杯布局的padding，来排除两边元素的覆盖。
双飞翼布局可以多了一个html结构，但是可以不用设置left,right元素的定位。

9. css盒子模型

CSS 盒模型本质上是一个盒子，盒子包裹着HTML 元素，盒子由四个属性组成，从内到外分别是：content 内容、padding 内填充、border 边框、外边距 margin

两种盒模型的区别

标准盒模型：

width = content-width

height = content-height

怪异盒模型:

width = content-width + padding-width + border-width

如何在CSS 设置这两个模型

标准盒模型：

box-sizing: content-box

怪异盒模型：

box-sizing: border-box

介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

CSS盒子模型：由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height);

标准的CSS盒子模型和低端IE CSS盒子模型不同：宽高不一样

标准的css盒子模型宽高就是内容区宽高；

IE css盒子模型宽高内边距﹢边界﹢内容区；

10. 浏览器渲染机制

一、网页生成过程：

网页的生成过程，大致可以分成五步

HTML 代码转化成 DOM
CSS 代码转化成 CSSOM（CSS Object Model）
结合 DOM 和 CSSOM，生成一棵渲染树（包含每个节点的视觉信息）
生成布局（layout），即将所有渲染树的所有节点进行平面合成
将布局绘制（paint）在屏幕上

　　这五步里面，第一步到第三步都非常快，耗时的是第四步和第五步。

　　"生成布局"（flow）和"绘制"（paint）这两步，合称为"渲染"（render）

11. CSS3的新特性

css3新特性	描述
box-shadow	盒子阴影
border-radius	圆角
box-sizing	盒子模型
linear-gradient, radial-gradient	渐变
transition	过渡
animate	动画
transform	2D 转换/3D 转换
iconfont	字体图标
flex	弹性布局

12 flex常见属性

flex常见属性	描述
* flex-direction	设置容器主轴的方向
* flex-wrap	用于设置容器盛不下，是否换行（不 / 向上 / 向下）
* justify-content	用于设置容器中的内容对齐方式
* align-items	用于设置容器整体对齐方式
align-content	定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
flex-flow	是flex-deriction和flex-wrap属性的简写，默认值为[row nowrap]