【前端面试题】 HTML+CSS篇

给大家推荐一个实用面试题库

1、前端面试题库 （面试必备）            推荐：★★★★★

地址：web前端面试题库

如何理解 HTML 语义化？

根据内容来选择合适的标签

优点：

• 让人更容易读懂（增加代码可读性）。方便团队开发和维护。
• 方便浏览器爬虫更好的识别内容。（SEO）。
• 在没有 CSS 样式下，页面也能呈现出很好地内容结构、代码结构。

src和href的区别

src和href都可以用来引入外部的资源。两者区别如下：

• src 常用于img、video、audio、script元素，当浏览器解析到该元素时，会暂停其它资源下载，直到将该资源加载、编译、执行完毕。这也是为什么将js脚本放在底部而不是头部的原因。它会将资源内容嵌入到当前标签所在的位置
• href 常用于a、link元素，指向外部资源所在的位置，和当前元素位置建立链接，当浏览器解识别到它指向的位置，将其下载的时候不会阻止其他资源的加载解析。

DOCTYPE(⽂档类型) 的作⽤

HTML5中一种标准通用标记语言的文档类型声明，是用来告诉浏览器的解析器，该用什么样的方式去加载识别文档。

什么是严格模式与混杂模式？

• 严格模式：是以浏览器支持的最高标准运行
• 混杂模式：页面以宽松向下兼容的方式显示，模拟老式浏览器的行为

iframe的作用以及优缺点

嵌入式框架，可以把一个网页的框架和内容嵌入到现有的网页中。

优点

• 可以将网页原封不动的加载进来
• 增加代码的可用性
• 用来加载显示较慢的内容，如广告、视频等

缺点

• 加载的内容无法被浏览器引擎识别，对SEO不友好
• 会阻塞onload事件加载
• 会产生很多页面，不利于管理

script标签中defer和async的区别

他俩都是表示 **异步加载外部JS脚本 **

• script :会阻碍 HTML 解析，只有下载好并执行完脚本才会继续解析 HTML。
• async script ：解析 HTML 过程中进行脚本的异步下载，下载成功立马执行，有可能会阻断 HTML 的解析。
• defer script:完全不会阻碍 HTML 的解析，解析完成之后再按照顺序执行脚本。

SEO中的TDK

TDK就是title、description、keywords这三个标签，title表示标题标签，description是描述标签，keywords是关键词标签

HTML5新增特性

• 新增语义化标签，head、footer、nav、main、section等
• 新增表单类型属性，email、number、时间控件、color颜色拾取器、placeholder、autofocus自动获取焦点...
• 新增音视频标签，video、audio
• 新增canvas画布、websocket通信、拖拽等
• 新增本地存储localStorage、sessionStorage

从URL输入到页面展现到底发生什么

• 输入 URL 后解析出协议、主机、端口、路径等信息，并构造一个 HTTP 请求。
• DNS 解析:将域名解析成 IP 地址
• TCP 连接：TCP 三次握手
• 发送 HTTP 请求
• 服务器处理请求并返回 HTTP 报文
• 浏览器解析渲染页面
• 断开连接：TCP 四次挥手

CSS

盒模型

CSS3 中的盒模型有以下两种： 标准盒模型 、 IE盒模型 。

两种盒子模型都是由 content + padding + border + margin 构成，其大小都是由 content + padding + border 决定的，但是盒子内容宽/高度（即 width/height）的计算范围根据盒模型的不同会有所不同：

标准盒模型：

• 盒子总宽度 = width + padding + border + margin;
• 盒子总高度 = height + padding + border + margin

也就是，width/height 只是内容高度，不包含 padding 和 border值

IE盒模型：

• 盒子总宽度 = width + margin;
• 盒子总高度 = height + margin;

也就是，width/height 包含了 padding和 border值

可以通过 box-sizing 来改变元素的盒模型：

• box-sizing: content-box ：标准盒模型（默认值）。
• box-sizing: border-box ：IE（替代）盒模型。

CSS3新增特性

• 新增CSS选择器、伪类
• 特效：text-shadow、box-shadow
• 线性渐变: gradient
• 旋转过渡：transform、transtion
• 动画: animation
• 圆角: border-radius

CSS选择器和优先级

优先级：（递减）

• !important
• 内联样式
• ID选择器
• 类选择器/伪类选择器/属性选择器
• 标签选择器/伪元素选择器
• 关系选择器/通配符选择器

可继承属性和不可继承属性

继承是指的是给父元素设置一些属性，后代元素会自动拥有这些属性

可继承

• font-weight 字体系列属性
• caption-side 表格布局属性
• list-style 列表属性
• line-height 文本系列属性
• cursor 光标属性
• visibility 元素可见性
• ...

不可继承

• margin、padding、border
• display
• background
• overflow
• width、height
• position
• ...

em/px/rem/vh/vw区别

• px 固定像素单位，不能随其它元素的变化而变化，页面按精确像素展示
• em是相对于父节点字体的大小，会随着父元素变化而变化，如果自身定义了font-size按自身来计算
• rem是相对于html根元素font-size的值，它会随着html元素变化而变化
• vh.vw主要用于页面视口大小布局，根据窗口的宽度，分成100等份,100vw就表示满宽

回流（reflow）和重绘（repaint）的理解

概念：

• 回流：无论通过什么方式影响了元素的几何信息(元素在视口内的位置和尺寸大小)，浏览器需要重新计算元素在视口内的几何属性，这个过程叫做回流。
• 重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制

触发时机：

• 当页面布局和几何信息发生变化的时候，就需要回流，如元素的位置发生变化等
• 触发回流一定会触发重绘，此外还有 颜色、文本方向、阴影的修改等

如何减少：

• 如果想设定元素的样式，通过改变元素的 class 类名 (尽可能在 DOM 树的最里层)
• 避免设置多项内联样式
• 避免使用 table 布局，table 中每个元素的大小以及内容的改动，都会导致整个 table 的重新计算
• 对于那些复杂的动画，对其设置 position: fixed/absolute，尽可能地使元素脱离文档流，从而减少对其他元素的影响
• 使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘

对BFC的理解

BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：

• 块级元素会在垂直方向一个接一个的排列，和文档流的排列方式一致。
• 在 BFC 中上下相邻的两个容器的 margin 会重叠，创建新的 BFC 可以避免外边距重叠。
• 计算 BFC 的高度时，需要计算浮动元素的高度。
• BFC 区域不会与浮动的容器发生重叠。
• BFC 是独立的容器，容器内部元素不会影响外部元素。
• 每个元素的左 margin 值和容器的左 border 相接触。

BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

创建BFC条件

• 设置浮动：float有值并不为空
• 设置绝对定位： position（absolute、fixed）
• overfilow值为：hidden、auto、`scroll
• display值为：inline-block、table-cell、table-caption、flex等

BFC作用：

• 解决margin重叠问题：由于BFC是一个独立的区域，内部元素和外部元素互不影响，将两个元素变为BFC，就解决了margin重叠问题
• 创建自适应两栏布局：可以用来创建自适应两栏布局，左边宽高固定，右边宽度自适应。
• 解决高度塌陷问题：在子元素设置浮动后，父元素会发生高度的塌陷，也就是父元素的高度为0解决这个问题，只需要将父元素变成一个BFC。

水平垂直居中

• 利用绝对定位，子元素所有方向都为 0 ，将 margin 设置为 auto ，由于宽高固定，对应方向实现平分，该方法必须盒子有宽高。

.father {
  position: relative;
}
.son {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  height: 100px;
  width: 100px;
}

• 利用绝对定位，设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置，然后再通过 translate 来调整子元素的中心点到父元素的中心。该方法可以不定宽高。

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

• 利用绝对定位，设置 left: 50% 和 top: 50% 现将子元素左上角移到父元素中心位置，然后再通过 margin-left 和 margin-top 以子元素自己的一半宽高进行负值赋值。该方法必须定宽高。

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
}

• flex布局，该方法可以不定宽高。

.father {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        background: skyblue;
    }
    .son {
        width: 100px;
        height: 100px;
        background: red;
    }

• table布局，设置父元素为display:table-cell，子元素设置 display: inline-block。利用vertical和text-align可以让所有的行内块级元素水平垂直居中

.father {
        display: table-cell;
        width: 200px;
        height: 200px;
        background: skyblue;
        vertical-align: middle;
        text-align: center;
    }
    .son {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: red;
    }

两栏布局

两栏布局非常常见，往往是以一个定宽栏和一个自适应的栏并排展示存在

实现思路：

• 使用 float 左浮左边栏
• 右边模块使用 margin-left 撑出内容块做内容展示
• 为父级元素添加BFC，防止下方元素飞到上方内容

<style>
    .box{
        overflow: hidden; 添加BFC
    }
    .left {
        float: left;
        width: 200px;
        background-color: gray;
        height: 400px;
    }
    .right {
        margin-left: 210px;
        background-color: lightgray;
        height: 200px;
    }
</style>
<div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

• flex弹性布局， 为了让两个盒子高度自动，需要设置: align-items: flex-start

   .box{
        display: flex;
    }
    .left {
        width: 100px;
    }
    .right {
        flex: 1;
    }

flex弹性布局

flex布局是CSS3新增的一种布局方式，能够根据不同屏幕尺寸的变化来自适应大小。

常用的容器属性：

• flex-direction属性决定主轴的方向（即项目的排列方向）。
• flex-wrap属性定义，如果一条轴线排不下，如何换行。
• flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
• justify-content属性定义了项目在主轴上的对齐方式。
• align-items属性定义项目在交叉轴上如何对齐。
• align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

容器成员属性如下：

• order：定义项目的排列顺序。数值越小，排列越靠前，默认为0
• flex-grow：定义项目发大比例，默认为0，即存在剩余空间，也不放大。
• flex-shrink：定义项目收缩比例，默认为1，即空间不足，也会进行缩小。
• flex-basis：定义项目给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小。
• flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，flex：1也表示flex： 1 1 auto。
• align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

grid网格布局

Grid 布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列。

擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系

容器属性：

• display：创建一个块级行内网格容器
• grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高
• grid-row-gap 属性、grid-column-gap 属性分别设置行间距列间距。grid-gap 属性是两者的简写形式
• grid-template-areas：用于定义区域，一个区域由一个或者多个单元格组成
• grid-auto-flow：排列方式，默认为行
• justify-items 属性设置单元格内容的水平位置（左中右），align-items 属性设置单元格的垂直位置（上中下，place-items属性是align-items属性和justify-items属性的合并简写形式
• justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）
• grid-auto-rows与grid-auto-columns就是专门用于指定隐式网格的宽高

项目属性：

• grid-column-start 属性：左边框所在的垂直网格线
• grid-column-end 属性：右边框所在的垂直网格线
• grid-row-start 属性：上边框所在的水平网格线
• grid-row-end 属性：下边框所在的水平网格线
• grid-area 属性指定项目放在哪一个区域

link和@import的区别

• link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS、rel连接属性等，标签引入的CSS被同时加载
• @import是CSS提供等语法规则，只有导入样式表带作用。引入的CSS将在页面加载完毕后被加载

隐藏元素方法

• display：none：元素在文档中不存在，不会占据位置。
• visibility： hidden：元素在文档中的位置还保留，仍然占据空间。
• opacity：0：将透明度设置为0。
• z-index：负值：直接将元素放置在最下层，利用其他元素来遮盖。
• position：absolute：将元素定位到可视区域以外。
• 设置height、width模型属性为0

CSS3动画有哪些

transition 实现渐变动画

属性如下：

• property:填写需要变化的css属性
• duration:完成过渡效果需要的时间单位(s或者ms)
• timing-function:完成效果的速度曲线
• delay: 动画效果的延迟触发时间

transform 转变动画

包含四个常用的功能：

• translate：位移
• scale：缩放
• rotate：旋转
• skew：倾斜

animation 实现自定义动画

响应式设计

响应式网站设计是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

属性对应如下：

• width=device-width: 是自适应手机屏幕的尺寸宽度
• maximum-scale:是缩放比例的最大值
• inital-scale:是缩放的初始化
• user-scalable:是用户的可以缩放的操作

实现响应式布局的方式有如下：

• 媒体查询
• 百分比
• vw/vh
• rem

CSS提高性能的方法

css实现性能的方式可以从选择器嵌套、属性特性、减少http这三面考虑，同时还要注意css代码的加载顺序

• 内联首屏关键CSS：内联css关键代码能够使浏览器在下载完html后就能立刻渲染
• 异步加载CSS
• 资源压缩：利用webpack、gulp/grunt、rollup等模块化工具，将css代码进行压缩
• 合理使用选择器：不要嵌套使用过多复杂选择器，使用id选择器就没必要再进行嵌套
• 减少使用昂贵的属性：发生重绘的时候，昂贵属性如box-shadow会降低浏览器的渲染性能
• 不要使用@import：@import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟

文本溢出的省略样式

单行

overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
whtie-space: nowrap; //规定段落中的文本不进行换行

多行

• 基于行数截断

overflow:hidden
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数

• 基于高度截断

.demo {
        position: relative;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
    }
    .demo::after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 0 10px;
    }

CSS预处理器

扩充了 Css 语言，增加了诸如变量、混合（mixin）、函数等功能，让 Css 更易维护、方便

本质上，预处理是Css的超集

包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 Css 文件

三大优秀的预编处理器：

• sass
• less
• stylus

区别：

• 三者的嵌套语法都是一致的，甚至连引用父级选择器的标记 & 也相同，区别只是 Sass 和 Stylus 可以用没有大括号的方式书写

.a {
  &.b {
    color: red;
  }
}

• less声明的变量必须以@开头，sass 声明的变量名前面使用$开头,stylus声明的变量没有任何的限定，但变量与变量值之间需要使用=

@red: #c00;
strong {
  color: @red;
}
//----------
$red: #c00;
strong {
  color: $red;
}
//----------
red = #c00
strong
  color: red

• sass中不存在全局变量，less与stylus的作用域跟javascript十分的相似，首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止

给大家推荐一个实用面试题库

1、前端面试题库 （面试必备）            推荐：★★★★★

地址：web前端面试题库