面试题 CSS 篇

1.不定宽高的盒子垂直水平居中的解决方案,body、html 相当于 box 的父盒子

<div class="box"></div>

第一种，利用 transform 和 translate 实现

body,
html {
	width: 100%;
	height: 100%;
}
.box {
	/* 1.设置定位 */
	position: absolute;
	/* 2.x,y轴走网页的一半 */
	left: 50%;
	top: 50%; /* 3.往回走自身x，y的一半 */
  transform：translate(-50%, -50%);
}

第二种，使用 flex 布局实现

body,
html {
  width: 100%;
  height: 100%;
  display: flex;
  /* 3.设置水平垂直居中*/
  justify-content: center;
  align-items: center;
}

第三种，使用定位和 margin 解决

body,
html {
  width: 100%;
  height: 100%;
  position: relative;
}
.box {
  width: 50%;
  height: 50%;
  background: pink;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

第四种，利用 display: table-cell 实现垂直水平居中

body,
html {
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.box {
  display: inline-block;
}

2.css 选择器有哪些

css 的选择器是还是比较富的，主要的 css 选择器如下：

标签选择器（如：body,div,p,ul,li）

类选择器（如：class="head",class="head_logo"）

ID 选择器（如：id="name",id="name_txt"）

全局选择器（如：*号）

组合选择器（如：.head .head_logo,注意两选择器用空格键分开）

继承选择器（如：div p,注意两选择器用空格键分开）

伪类选择器（如：就是链接样式,a 元素的伪类，4 种不同的状态：link、visited、active、hover。）

字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)

以上选择器在日常开发中最常用的就是标签选择器、类选择器和 id 选择器，下面是这三种选择器的基本用法：

3.position 三种属性的区别

absolute:此属性定义一个横向和纵向的属性就可以控制布置的文本或图片相对于浏览器整个页面的上方或者下方和左方或者右方的距离。

relative:此属性会相对于一个正常的标题，对其进行相对位置的移动，可用 left，right 等对其位置进行移动，也可为负值。

fixed:此属性和 absolute 有相似之处，也是相对于浏览器的各种方向对其进行布局，与之不同的是当页面向下或者向右移动的时候，它相对于浏览器的页面距离仍然保持不变。

static:没有定位，元素出现在正常的流中,适用于进行正常排版，不适用于对其进行定位的操作。

4.css 盒子模型理解

css 盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

标准盒模型（W3C 盒子模型），标准盒模型下盒子的大小 = content + border + padding + margin

怪异盒模型（IE 盒子模型），怪异盒模型下盒子的大小=width（content + border + padding） + margin

除此之外，我们还可以通过属性 box-sizing 来设置盒子模型的解析模式

可以为 box-sizing 赋三个值：

• content-box： 默认值，border 和 padding 不算到 width 范围内，可以理解为是 W3c 的标准模型(default)

• border-box：border 和 padding 划归到 width 范围内，可以理解为是 IE 的怪异盒模型

• padding-box：将 padding 算入 width 范围

• 当设置为 box-sizing:content-box 时，将采用标准模式解析计算（默认模式）；

• 当设置为 box-sizing:border-box 时，将采用怪异模式解析计算；

5.BFC 的理解和运用

介绍：BFC 全称为 Block Formatting Context，即“块级格式化上下文”，它是页面中相对独立的一块渲染区域，它决定了内部的子元素如何进行摆放和定位，以及区域内部元素和区域外部元素之间的相互作用关系。

BFC 的特点： 当一个元素容器创建 BFC 后，主要有以下表现特点：

• BFC 可以包含浮动元素（闭合浮动）

• BFC 所确定的区域不会与外部浮动元素发生重叠

• 位于同一 BFC 下的相邻块级子元素在垂直方向上会发生 margin 重叠

• 位于不同 BFC 下的相邻元素之间不会发生 margin 重叠

触发或者创建：若某个元素满足以下任一条件，则会对其创建 BFC：

• float 的值不为 none

• overflow 的值为 auto、scroll 或 hidden

• display 的值为 table-cell、table-caption 或 inline-block

• position 的值为 fixed 或 absolute

6.页面导入样式时，使用 link 和@import 有什么区别？

1.link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS，定义 rel 连接属性等作用；而@import 是 CSS 提供的，只能用于与加载 CSS。

2.页面被加载时，link 会同时被加载，而@import 引用的 CSS 会等到页面被加载完再加载。

3.import 是 CSS2.1 提出的，只有 IE5 以上才能被识别，而 link 是 XHTML 标签，无兼容性问题。

7.display 有哪些值？说明它们的作用。

• block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。

• none 缺省值。像行内元素类型一样显示。

• inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。

• inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。

• list-item 像块类型元素一样显示，并添加样式列表标记。

• table 此元素会作为块级表格来显示。

• inherit 规定应该从父元素继承 display 属性的值。

8.css 清除浮动的几种方法？

• clear 清除浮动（添加空 div 法）

• 给浮动元素父级设置高度

• 父级设置成 inline-block

• br 清浮动 br 标签自带 clear 属性，将它设置成 both 其实和添加空 div 原理是一样的

• 给父级添加 overflow:hidden 清浮动方法

• 万能清除法 after 伪类 清浮动（现在主流方法，推荐使用）

9.px、em、rem 的区别？

• px 像素。绝对单位，像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟单位。是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。

• em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。

• rem 是 CSS3 新增的一个相对单位(root em,根 em),使用 rem 为元素设定字体大小事，仍然是相对大小但相对的只是 HTML 根元素。

• 区别：IE 无法调用那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放，rem 相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器已支持 rem。

10.CSS3 新特性有哪些？

• 颜色：新增 RGBA、HSLA 模式

• 文字阴影(text-shadow)

• 边框：圆角（border-radius）边框阴影：box-shadow

• 盒子模型：box-sizing

• 背景：background-size 设置背景图片的尺寸，background-origin 设置背景图片的原点，background-clip 设置背景图片的裁剪区域，以“，”分隔可以设置多背景，用于自适应布局

• 渐变：linear-gradient、radial-gradient

• 过渡：transition 可实现动画

• 自定义动画

• 在 CSS3 中唯一引入的伪元素是::selection

• 多媒体查询、多栏布局

• border-image

• 2D 转换：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)

• 3D 转换

11.CSS3 新增伪类有那些？

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

  元素的每个

  元素。

• p:last-of-type 选择属于其父元素的最后

  元素的每个

  元素。

• p:only-of-type 选择属于其父元素唯一的

  元素的每个

  元素。

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

  元素。

• p:nth-child(2) 选择属于其父元素的第二个子元素的每个

  元素。

• :enabled、:disabled 控制表单控件的禁用状态。

• :checked，单选框或复选框被选中。

12.描述 css reset 的作用和用途？

Reset 重置浏览器的 css 默认属性，浏览器的品种不同，样式不同，然后重置，让他们统一。

13.解释 css sprites,如何使用？

css 精灵图，把一堆小的图片整合到一张大的图片（png）上，减轻服务器对图片的请求数量。

14.为什么要使用 css sprites

• css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

• css sprites 其实就是把网页中一些背景图片整合到一张图片文件中，再利用 css 的"background-image","background-position"的组合进行背景定位，这样可以减少。

• 很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是如果请求太多会给服务器增加很大的压力。

15.display:none;与 visibility:hidden 的区别是什么？

• display:none;使用该属性后，HTML 元素（对象）的宽高，高度等各种属性值都将“丢失”；

• visibility:hidden;使用该属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍然具有高度，宽度等属性值。

16.实现布局中间自适应宽度，左右两栏固定宽度

绝对定位法

绝对定位法原理是将左右两边使用 absolute 定位，因为绝对定位使其脱离文档流，后面的 center 会自然流动到他们上面，然后使用 margin 属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。 代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>layout_box</title>
    <link rel="stylesheet" type="text/css" href="../css/layout_box.css" />
  </head>
  <body>
    <h3>实现三列宽度自适应布局</h3>
    <div id="left">我是左边</div>
    <div id="right">我是右边</div>
    <div id="center">我是中间</div>
  </body>
</html>

html,
body {
  margin: 0px;
  width: 100%;
}
h3 {
  height: 100px;
  margin: 20px 0 0;
}
#left,
#right {
  width: 200px;
  height: 200px;
  background-color: #ffe6b8;
  position: absolute;
  top: 120px;
}
#left {
  left: 0px;
}
#right {
  right: 0px;
}
#center {
  margin: 2px 210px;
  background-color: #eee;
  height: 200px;
}

该法布局的好处，三个 div 顺序可以任意改变。不足是 因为绝对定位，所以如果页面上还有其他内容，top 的值需要小心处理，最好能够对 css 样式进行一个初始化，就像在上面例子中加了一个标题，如果不对样式进行初始化，则两边和中间的值会对不齐。 另外，随着浏览器窗口缩小，小于 200px 的时候，会发生压缩。

使用自身浮动法

自身浮动法的原理就是使用对左右使用分别使用 float:left 和 float:right，float 使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用 margin 指定左右外边距对其进行一个定位。 代码如下：

<h3>使用自身浮动法定位</h3>
<div id="left_self">我是左边</div>
<div id="right_self">我是右边</div>
<div id="center_self">我是中间</div>

#left_self,
#right_self {
  width: 200px;
  height: 200px;
  background-color: #ffe6b8;
}
#left_self {
  float: left;
}
#right_self {
  float: right;
}
#center_self {
  margin: 0 210px;
  height: 200px;
  background-color: #a0b3d6;
}

该布局法的好处是受外界影响小，但是不足是 三个元素的顺序，center 一定要放在最后，这是和绝对定位不一样的地方，center 占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系。当浏览器窗口很小的时候，右边元素会被击倒下一行。

圣杯布局

圣杯布局的原理是 margin 负值法。使用圣杯布局首先需要在 center 元素外部包含一个 div，包含 div 需要设置 float 属性使其形成一个 BFC，并设置宽度，并且这个宽度要和 left 块的 margin 负值进行配合，具体原理参考这里。这里对圣杯布局解释特别详细。 实现代码：

<h3>使用margin负值法进行布局</h3>
<div id="wrap">
  <div id="center"></div>
</div>
<div id="left_margin"></div>
<div id="right_margin"></div>

#wrap {
  width: 100%;
  height: 100px;
  background-color: #fff;
  float: left;
}
#wrap #center {
  margin: 0 210px;
  height: 100px;
  background-color: #ffe6b8;
}
#left_margin,
#right_margin {
  float: left;
  width: 200px;
  height: 100px;
  background-color: darkorange;
}
#left_margin {
  margin-left: -100%;
  background-color: lightpink;
}
#right_margin {
  margin-left: -200px;
}

双飞翼布局

实现代码：

<h3>使用双飞翼布局</h3>
<div class="main">
  <div class="middle">
    <div class="content">
      中间
    </div>
  </div>
  <div class="left">
    左边
  </div>
  <div class="right">
    右边
  </div>
</div>

* {
  margin: 0;
  padding: 0;
}
.main > div {
  float: left;
}
.left {
  width: 200px;
  background: red;
  margin-left: -100%;
}
.right {
  width: 200px;
  background: blue;
  margin-left: -200px;
}
.middle {
  width: 100%;
  background: yellow;
}
.content {
  margin-left: 200px;
  margin-right: 200px;
}

flex 布局

实现代码：

<h3>使用flex布局</h3>
<article>
  <div class="left">左</div>
  <div class="center">中</div>
  <div class="right">右</div>
</article>

article {
  display: -webkit-flex; /* Safari */
  display: flex;
}
article div {
  height: 200px;
}
.left {
  width: 200px;
  background: red;
}
.center {
  flex: 1;
  background: yellow;
}
.right {
  width: 200px;
  background: blue;
}

网格 grid 布局

兼容性不太好，IE11 以下不支持。

实现代码：

<h3>使用网格grid布局</h3>
<article>
  <div class="left">左</div>
  <div class="center">中</div>
  <div class="right">右</div>
</article>

article {
  width: 100%;
  display: grid;
  grid-template-rows: 200px;
  grid-template-columns: 200px auto 200px;
}
.left {
  background: red;
}
.center {
  background: yellow;
}
.right {
  background: blue;
}

17.sessionStorage 、localStorage 和 cookie 之间的区别

共同点：用于浏览器端存储的缓存数据

不同点：

• 存储内容是否发送到服务器端：当设置了 Cookie 后，数据会发送到服务器端，造成一定的宽带浪费；

• 数据存储大小不同：Cookie 数据不能超过 4K,适用于会话标识；web storage 数据存储可以达到 5M;

• web storage,会将数据保存到本地，不会造成宽带浪费；

• 数据存储的有效期限不同：cookie 只在设置了 Cookid 过期时间之前一直有效，即使关闭窗口或者浏览器；

• sessionStorage,仅在关闭浏览器之前有效；localStorage,数据存储永久有效；

• 作用域不同：cookie 和 localStorage 是在同源同窗口中都是共享的；sessionStorage 不在不同的浏览器窗口中共享，即使是同一个页面；

18.web 前端开发，如何提高页面性能优化？

内容方面：

• 减少 HTTP 请求 (Make Fewer HTTP Requests)

• 减少 DOM 元素数量 (Reduce the Number of DOM Elements)

• 使得 Ajax 可缓存 (Make Ajax Cacheable)

针对 CSS：

• 把 CSS 放到代码页上端 (Put Stylesheets at the Top)

• 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

• 精简 JavaScript 与 CSS (Minify JavaScript and CSS)

• 避免 CSS 表达式 (Avoid CSS Expressions)

针对 JavaScript ：

• 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)

• 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)

• 精简 JavaScript 与 CSS (Minify JavaScript and CSS)

• 移除重复脚本 (Remove Duplicate Scripts)

面向图片(Image)：

• 不要在 HTML 中使用缩放图片

• 使用恰当的图片格式

• 使用 CSS Sprites 技巧对图片优化

19.重绘（redraw 或 repaint）,重排（reflow）

重绘（repaint 或 redraw）：当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

• 触发重绘的条件：改变元素外观属性。如：color，background-color 等。

重排（重构/回流/reflow）：当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。重绘和重排的关系：在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。所以，重排必定会引发重绘，但重绘不一定会引发重排。

触发重排的条件：任何页面布局和几何属性的改变都会触发重排，比如：

• 页面渲染初始化；(无法避免)

• 添加或删除可见的 DOM 元素；

• 元素位置的改变，或者使用动画；

• 元素尺寸的改变——大小，外边距，边框；

• 浏览器窗口尺寸的变化（resize 事件发生时）；

• 填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变；

• 读取某些元素属性：（offsetLeft/Top/Height/Width,　 clientTop/Left/Width/Height,　 scrollTop/Left/Width/Height,　 width/height,　 getComputedStyle(),　 currentStyle(IE)　)

20.网页布局有哪几种，有什么区别

• 静态、自适应、流式、响应式四种网页布局

• 静态布局：意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置；

• 自适应布局：就是说你看到的页面，里面元素的位置会变化而大小不会变化；

• 流式布局：你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

• 自适应布局：每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。

21.WebSocket

HTML5 带来的新协议，通过类似 HTTP 的请求建立连接。主要目的是可以获取服务端的推送。

原来的方式可能是使用 long poll（即不中断连接一直等待数据），或者是 ajax 轮询的方式（每隔一段时间发送请求，建立连接，询问是否有新的数据）。这两种方式的缺点在于 long poll 的阻塞，以及 ajax 轮询的冗余连接。

WebSocket 的设计思想有点类似于回调，在发送请求升级服务端的协议并收到确认信息后，服务端一有新的信息/数据就会主动推送给客户端，至于要一次 HTTP 握手便可以建立持久连接

22.常量与变量有哪些区别

• 常量

常量中字面常量可以直接应用，而符号常量必须先声明。在程序执行过程中常量保持不变，任何尝试修改常量的操作都会使程序报错

• 变量

变量必须先定义（声明）后引用。变量可以通过赋值来改变值。