前端硬核面试专题之 CSS 55 问

时间 2019-11-05

标签前端硬核面试专题 css 栏目快乐工作繁體版

原文原文链接

前言

本文讲解 55 道前端面试的 CSS 的内容。css

复习前端面试的知识，是为了巩固前端的基础知识，最重要的仍是平时的积累！

注意：文章的题与题之间用下划线分隔开，答案仅供参考。html

笔者技术博客首发地址 GitHub，欢迎关注。前端

文章原文地址：前端硬核面试专题之 CSS 55 问。css3

前端硬核面试专题的完整版在此：前端硬核面试专题，包含：HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTTPS + 数据结构与算法 + Git 。git

CSS

盒子模型的理解 ?github

标准模式和混杂模式（IE）。
在标准模式下浏览器按照规范呈现页面；
在混杂模式下，页面以一种比较宽松的向后兼容的方式显示。
混杂模式一般模拟老式浏览器的行为以防止老站点没法工做。

CSS 盒子模型具备内容 (content)、填充 (padding)、边框 (border)、边界 (margin)这些属性。web

咱们所说的 width，height 指的是内容 (content) 的宽高。面试

一个盒子模型的中：算法

宽度 = width+ pdding(宽) + border(宽)。
高度 = height + padding(高) + border(高)。

如何在页面上实现一个圆形的可点击区域？chrome

一、map+area 或者 svg
二、border-radius
三、纯 js 实现，须要求一个点在不在圆上简单算法、获取鼠标坐标等等

实现不使用 border 画出 1px 高的线，在不一样浏览器的标准模式与怪异模式下都能保持一致的效果。

<div style="height:1px;overflow:hidden;background:red"></div>

CSS 中哪些属性能够同父元素继承 ?

继承：(X)HTML 元素能够从其父元素那里继承部分 CSS 属性，即便当前元素并无定义该属性，好比： color，font-size。

box-sizing 经常使用的属性有哪些？分别有什么做用？

经常使用的属性：content-box、 border-box 、inherit

做用

content-box(默认)：宽度和高度分别应用到元素的内容框。在宽度和高度以外绘制元素的内边距和边框(元素默认效果)。
border-box：元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。经过从已设定的宽度和高度分别减去边框和内边距才能获得内容的宽度和高度。

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

link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义 RSS(是一种描述和同步网站内容的格式，是使用最普遍的 XML 应用), 定义 rel 链接属性等做用；
而 @import 是 CSS 提供的，只能用于加载 CSS;
页面被加载的时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载;
import 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 link 是 XHTML 标签，无兼容问题。
总之，link 要优于 @import。

常见兼容性问题？

浏览器默认的 margin 和 padding 不一样。解决方案是加一个全局的 *{margin: 0; padding: 0;} 来统一。
IE下 event 对象有 event.x，event.y 属性，而 Firefox 下没有。Firefox 下有 event.pageX，event.PageY 属性，而 IE 下没有。

解决办法：var mx = event.x ? event.x : event.pageX;

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可经过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
超连接访问事后 hover 样式就不出现了，被点击访问过的超连接样式不在具备 hover 和 active 了，解决方法是改变 CSS 属性的排列顺序:

L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

清除浮动，何时须要清除浮动，清除浮动都有哪些方法？

一个块级元素若是没有设置 height，那么其高度就是由里面的子元素撑开，若是子元素使用浮动，脱离了标准的文档流，那么父元素的高度会将其忽略，若是不清除浮动，父元素会出现高度不够，那样若是设置 border 或者 background 都得不到正确的解析。

正是由于浮动的这种特性，致使本属于普通流中的元素浮动以后，包含框内部因为不存在其余普通流元素了，也就表现出高度为 0（高度塌陷）。在实际布局中，每每这并非咱们所但愿的，因此须要闭合浮动元素，使其包含框表现出正常的高度。

清除浮动的方式

父级 div 定义 height，原理：父级 div 手动定义 height，就解决了父级 div 没法自动获取到高度的问题。
结尾处加空 div 标签 clear: both，原理：添加一个空 div，利用 css 提升的 clear: both 清除浮动，让父级 div 能自动获取到高度。
父级 div 定义 overflow: hidden，原理：必须定义 width 或 zoom: 1，同时不能定义 height，使用 overflow: hidden 时，浏览器会自动检查浮动区域的高度
父级 div 也一块儿浮动。
父级 div 定义 display: table 。
父级 div 定义伪类 :after 和 zoom 。
结尾处加 br 标签 clear: both，原理：父级 div 定义 zoom: 1 来解决 IE 浮动问题，结尾处加 br 标签 clear: both。

总结：比较好的是倒数第 2 种方式，简洁方便。

如何保持浮层水平垂直居中？

1、水平居中

（1）行内元素解决方案

只须要把行内元素包裹在一个属性 display 为 block 的父层元素中，而且把父层元素添加以下属性便可。

.parent {
    text-align: center;
}

（2）块状元素解决方案

.item {
    /* 这里能够设置顶端外边距 */
    margin: 10px auto;
}

（3）多个块状元素解决方案将元素的 display 属性设置为 inline-block，而且把父元素的 text-align 属性设置为 center 便可:

.parent {
    text-align:center;
}

（4）多个块状元素解决方案

使用 flexbox 布局，只须要把待处理的块状元素的父元素添加属性 display: flex 及 justify-content: center 便可。

.parent {
    display: flex;
    justify-content: center;
}

2、垂直居中

（1）单行的行内元素解决方案

.parent {
    background: #222;
    height: 200px;
}

/* 如下代码中，将 a 元素的 height 和 line-height 设置的和父元素同样高度便可实现垂直居中 */
a {
    height: 200px;
    line-height:200px; 
    color: #FFF;
}

（2）多行的行内元素解决方案组合

使用 display: table-cell 和 vertical-align: middle 属性来定义须要居中的元素的父容器元素生成效果，以下：

.parent {
    background: #222;
    width: 300px;
    height: 300px;
    /* 如下属性垂直居中 */
    display: table-cell;
    vertical-align: middle;
}

（3）已知高度的块状元素解决方案

.item{
    position: absolute;
    top: 50%;
    margin-top: -50px;  /* margin-top值为自身高度的一半 */
    padding:0;
}

3、水平垂直居中

（1）已知高度和宽度的元素解决方案 1

这是一种不常见的居中方法，可自适应，比方案 2 更智能，以下：

.item{
    position: absolute;
    margin:auto;
    left:0;
    top:0;
    right:0;
    bottom:0;
}

（2）已知高度和宽度的元素解决方案 2

.item{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;  /* 设置margin-left / margin-top 为自身高度的一半 */
    margin-left: -75px;
}

（3）未知高度和宽度元素解决方案

.item{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* 使用 css3 的 transform 来实现 */
}

（4）使用 flex 布局实现

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
    /* 注意这里须要设置高度来查看垂直居中效果 */
    background: #AAA;
    height: 300px;
}

position 、float 和 display 的取值和各自的意思和用法

position

position 属性取值：static(默认)、relative、absolute、fixed、inherit、sticky。
postision：static；始终处于文档流给予的位置。看起来好像没有用，但它能够快速取消定位，让 top，right，bottom，left 的值失效。在切换的时候能够尝试这个方法。
除了 static 值，在其余三个值的设置下，z-index 才会起做用。确切地说 z-index 只在定位元素上有效。
position：relative 和 absolute 均可以用于定位，区别在于前者的 div 还属于正常的文档流，后者已是脱离了正常文档流，不占据空间位置，不会将父类撑开。

定位原点 relative 是相对于它在正常流中的默认位置偏移，它本来占据的空间任然保留；absolute 相对于第一个 position 属性值不为 static 的父类。因此设置了 position：absolute，其父类的该属性值要注意，并且 overflow：hidden 也不能乱设置，由于不属于正常文档流，不会占据父类的高度，也就不会有滚动条。

fixed 旧版本 IE 不支持，倒是颇有用，定位原点相对于浏览器窗口，并且不能变。

经常使用于 header，footer 或者一些固定的悬浮 div，随滚动条滚动又稳定又流畅，比 JS 好多了。fixed 能够有不少创造性的布局和做用，兼容性是问题。

position：inherit。

规定从父类继承 position 属性的值，因此这个属性也是有继承性的，但须要注意的是 IE8 以及往前的版本都不支持 inherit 属性。

sticky ：设置了sticky 的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是 top、left 等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成 fixed，根据设置的 left、top 等属性成固定位置的效果。

float

float：left (或 right)，向左（或右）浮动，直到它的边缘碰到包含框或另外一个浮动框为止。

且脱离普通的文档流，会被正常文档流内的块框忽略。不占据空间，没法将父类元素撑开。

任何元素均可以浮动，浮动元素会生成一个块级框，不论它自己是何种元素。所以，没有必要为浮动元素设置 display：block。
若是浮动非替换元素，则要指定一个明确的 width，不然它们会尽量的窄。

什么叫替换元素？根据元素自己的特色定义的， (X)HTML中的 img、input、textarea、select、object 都是替换元素，这些元素都没有实际的内容。 (X)HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。

display

display 属性取值：none、inline、inline-block、block、table 相关属性值、inherit。
display 属性规定元素应该生成的框的类型。文档内任何元素都是框，块框或行内框。
display：none 和 visiability：hidden 均可以隐藏 div，区别有点像 absolute 和 relative，前者不占据文档的空间，后者仍是占据文档的位置。
display：inline 和 block，又叫行内元素和块级元素。

表现出来的区别就是 block 独占一行，在浏览器中一般垂直布局，能够用 margin 来控制块级元素之间的间距（存在 margin 合并的问题，只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。）；
而 inline 以水平方式布局，垂直方向的 margin 和 padding 都是无效的，大小跟内容同样，且没法设置宽高。
inline 就像塑料袋，内容怎么样，就长得怎么样；block 就像盒子，有固定的宽和高。

inline-block 就介于二者之间。
table 相关的属性值能够用来垂直居中，效果通常。
flex

定位机制

上面三个属性都属于 CSS 定位属性。CSS 三种基本的定位机制：普通流、浮动、绝对定位。

css3 动画效果属性有哪些 ?

animation-name：规定须要绑定到选择器的 keyframe 名称。。
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function：规定动画的速度曲线。
animation-delay：规定在动画开始以前的延迟。
animation-iteration-count：规定动画应该播放的次数。
animation-direction：规定是否应该轮流反向播放动画。

canvas 与 svg 的区别？

Canvas 是基于像素的即时模式图形系统，最适合较小的表面或较大数量的对象，Canvas 不支持鼠标键盘等事件。
SVG 是基于形状的保留模式图形系统，更加适合较大的表面或较小数量的对象。
Canvas 和 SVG 在修改方式上还存在着不一样。绘制 Canvas 对象后，不能使用脚本和 CSS 对它进行修改。由于 SVG 对象是文档对象模型的一部分，因此能够随时使用脚本和 CSS 修改它们。

如今对两种技术作对比概括以下：

Canvas

1) 依赖分辨率
2) 不支持事件处理器
3) 弱的文本渲染能力
4) 可以以 .png 或 .jpg 格式保存结果图像
5) 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

1) 不依赖分辨率
2) 支持事件处理器
3) 最适合带有大型渲染区域的应用程序（好比谷歌地图）
4) 复杂度高会减慢渲染速度（任何过分使用 DOM 的应用都不快）
5) 不适合游戏应用

px 和 em 的区别？

px 像素（Pixel）。相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)
em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
任意浏览器的默认字体高都是 16px。全部未经调整的浏览器都符合：1em = 16px。

那么12px = 0.75em,10px = 0.625em。为了简化 font-size 的换算，须要在 css 中的 body 选择器中声明 Font-size = 62.5%，这就使 em 值变为 16px*62.5% = 10px, 这样 12px = 1.2em, 10px = 1em, 也就是说只须要将你的原来的 px 数值除以 10，而后换上 em 做为单位就好了。

会不会用 ps 扣图，png、jpg、gif 这些图片格式解释一下，分别何时用。如何优化图像、图像格式的区别 ?

JPG 的特性

支持摄影图像或写实图像的高级压缩，而且可利用压缩比例控制图像文件大小。
有损压缩会使图像数据质量降低，而且在编辑和从新保存 JPG 格式图像时，这种降低损失会累积。
JPG 不适用于所含颜色不多、具备大块颜色相近的区域或亮度差别十分明显的较简单的图片。

PNG 的特性

能在保证最不失真的状况下尽量压缩图像文件的大小。
PNG 用来存储灰度图像时，灰度图像的深度可多到 16 位，存储彩色图像时，彩色图像的深度可多到 48 位，而且还可存储多到 16 位的 α 通道数据。
对于须要高保真的较复杂的图像，PNG 虽然能无损压缩，但图片文件较大，不适合应用在 Web 页面上。
另外还有一个原则就是用于页面结构的基本视觉元素，如容器的背景、按钮、导航的背景等应该尽可能用 PNG 格式进行存储，这样才能更好的保证设计品质。而其余一些内容元素，如广告 Banner、商品图片等对质量要求不是特别苛刻的，则能够用 JPG 去进行存储从而下降文件大小。

GIF格式特色

透明性: Gif 是一种布尔透明类型，既它能够是全透明，也能够是全不透明，可是它并无半透明（alpha 透明）。
动画：Gif 这种格式支持动画。
无损耗性：Gif 是一种无损耗的图像格式，这也意味着你能够对 gif 图片作任何操做也不会使得图像质量产生损耗。
水平扫描：Gif 是使用了一种叫做 LZW 的算法进行压缩的，当压缩 gif 的过程当中，像素是由上到下水平压缩的，这也意味着同等条件下，横向的 gif 图片比竖向的 gif 图片更加小。

例如 50010 的图片比 10500 的图片更加小。
间隔渐进显示：Gif 支持可选择性的间隔渐进显示

由以上特色看出只有 256 种颜色的 gif 图片不适合做为照片，它适合作对颜色要求不高的图形。

咱们知道能够之外链的方式引入 CSS 文件，请谈谈外链引入 CSS 有哪些方式，这些方式的性能有区别吗？

CSS 的引入方式最经常使用的有三种

第一：外链式

这种方法能够说是如今占统治地位的引入方法。

如同 IE 与浏览器。这也是最能体现 CSS 特色的方法；

最能体现 DIV + CSS 中的内容离的思想，也最易改版维护，代码看起来也是最美观的一种。

第二：内部样式表

这种方法的使用状况要少的多，最长见得就是访问量大的门户网站。或者访问量较大的企业网站的首页。

与第一种方法比起来，优弊端也明显。

优势：速度快，全部的 CSS 控制都是针对本页面标签的，没有多余的 CSS 命令；再者不用外链 CSS 文件。直接在文档中读取样式。

缺点：就是改版麻烦些，单个页面显得臃肿，CSS 不能被其余 HTML 引用形成代码量相对较多，维护也麻烦些采用这种方法的公司大多有钱，对他们来讲用户量是关键，他们不缺人进行复杂的维护工做。

第三：行内样式

认为 HTML 里不能出现 CSS 命令。其实有时候没有什么大不了。好比通用性差，效果特殊，使用 CSS 命令较少，而且不常改动的地方，使用这种方法反而是很好的选择。

第4、@import 引入方式

<style type="text/css">
@import url(my.css);
</style>

CSS Sprite 是什么，谈谈这个技术的优缺点。

加速的关键，不是下降重量，而是减小个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无计算机统一都按 byte 计算。客户端每显示一张图片都会向服务器发送请求。因此，图片越多请求次数越多，形成延迟的可越大。

利用 CSS Sprites 能很好地减小了网页的 http 请求，从而大大的提升了页面的性能，这也是 CSS Sprites 的优势，也是其被普遍传播和应用的主要缘由；
CSS Sprites 能减小图片的字节，曾经比较过屡次 3 张图片合并成 1 张图片的字节老是小于这 3 张图片的和。
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就能够了，不须要对每个小元素名，从而提升了网页的制做效率。
更换风格方便，只须要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就能够改变。维护起方便。

诚然 CSS Sprites 是如此的强大，可是也存在一些不可忽视的缺点，以下：

在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内不没必要要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片若是不够宽，很容背景断裂；
CSS Sprites 在开发的时候比较麻烦，你要经过 photoshop 或其余工具测量计算每个背景单元的精确位是针线活，没什么难度，可是很繁琐；幸亏腾讯的鬼哥用 RIA 开发了一个 CSS Sprites 样式生成工具，虽然些使用上的不灵活，可是已经比 photoshop 测量来的方便多了，并且样式直接生成，复制，拷贝就 OK！
CSS Sprites 在维护的时候比较麻烦，若是页面背景有少量改动，通常就要改这张合并的图片，无需改的好不要动，这样避免改动更多的 css，若是在原来的地方放不下，又只能（最好）往下加图片，这样图片的字加了，还要改动 css。

CSS Sprites 很是值得学习和应用，特别是页面有一堆 ico（图标）。总之不少时候你们要权衡一下再决定是否是应用 CSS Sprites。

以 CSS3 标准定义一个 webkit 内核浏览器识别的圆角（尺寸随意）

-moz-border-radius: 10px; 
-webkit-border-radius: 10px;
 border-radius: 10px;。

优先级算法如何计算？内联和 important 哪一个优先级高？

优先级就近原则，样式定义最近者为准
载入样式以最后载入的定位为准
优先级为 !important > [ id > class > tag ]
Important 比内联优先级高

css 的基本语句构成是？

回答：选择器、属性和属性值。

若是让你来制做一个访问量很高的大型网站，你会如何来管理全部 CSS 文件、JS 与图片？

回答：涉及到人手、分工、同步；

先期团队必须肯定好全局样式（globe.css），编码模式 (utf-8) 等
编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；
标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；
页面进行标注（例如页面模块开始和结束）；
CSS 跟 HTML 分文件夹并行存放，命名都得统一（例如 style.css）
JS 分文件夹存放，命名以该 JS 功能为准
图片采用整合的 png8 格式文件使用，尽可能整合在一块儿使用，方便未来的管理。

CSS 选择符有哪些？哪些属性能够继承？优先级算法如何计算？新增伪类有那些？

CSS 选择符

id 选择器（ #myid）
类选择器（.myclassname）
标签选择器（div, h1, p）
相邻选择器（h1 + p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器（a[rel = "external"]）
伪类选择器（a: hover, li: nth - child）

可继承的样式

font-size，font-family，color，ul，li，dl，dd，dt；

不可继承的样式

border padding margin width height
事实上，宽度也不是继承的，而是若是你不指定宽度，那么它就是 100%。因为你子 DIV 并无指定宽度，那它就是 100%，也就是与父 DIV 同宽，但这与继承无关，高度天然也没有继承一说。

优先级算法

优先级就近原则，同权重状况下样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为: !important > id > class > tag , important 比内联优先级高

CSS3 新增伪类举例

:root 选择文档的根元素，等同于 html 元素
:empty 选择没有子元素的元素
:target 选取当前活动的目标元素
:not(selector) 选择除 selector 元素意外的元素
:enabled 选择可用的表单元素
:disabled 选择禁用的表单元素
:checked 选择被选中的表单元素
:after 选择器在被选元素的内容后面插入内容
:before 选择器在被选元素的内容前面插入内容
:nth-child(n) 匹配父元素下指定子元素，在全部子元素中排序第 n
:nth-last-child(n) 匹配父元素下指定子元素，在全部子元素中排序第 n，从后向前数
:nth-child(odd) 奇数
:nth-child(even) 偶数
:nth-child(3n+1)
:first-child
:last-child
:only-child
:nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第 n
:nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第 n，从后向前数
:nth-of-type(odd)
:nth-of-type(even)
:nth-of-type(3n+1)
:first-of-type
:last-of-type
:only-of-type
::selection 选择被用户选取的元素部分
:first-line 选择元素中的第一行
:first-letter 选择元素中的第一个字符

CSS3 有哪些新特性 ?

CSS3 实现圆角（border-radius:8px）
阴影（box-shadow:10px）
对文字加特效（text-shadow）
线性渐变（gradient）
旋转、缩放、定位、倾斜

transform: rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);

增长了更多的 CSS 选择器
多背景 rgba

一个满屏品字布局如何设计？

第一种方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>满屏品字布局</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;/*此设置很是关键，由于默认的body，HTML高度为0，因此后面设置的div的高度没法用百分比显示*/
        }       
        .header{
            height:50%; /*此步结合html,body高度为100%，解决元素相对窗口的定位问题*/
            width: 50%;     
            background: #ccc;           
            margin:0 auto;
        }
        .main{
            width: 100%;
            height: 50%;
            background: #ddd;
        }
        .main .left,.main .right{
            float: left;/*采用float方式，对元素进行左右定位*/
            width:50%;/*此步解决元素相对窗口的定位问题*/
            height:100%;/*此步解决元素相对窗口的定位问题*/
            background: yellow;
        }
        .main .right{
            background: green;
        }
    </style>
</head>
<body>
<div class="header"></div>
<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

效果以下：

为何要初始化 CSS 样式 ?

由于浏览器的兼容问题，不一样浏览器对有些标签的默认值是不一样的，若是没对 CSS 初始化每每会出现浏览器之间的页面显示差别。
初始化样式会对 SEO 有必定的影响，但鱼和熊掌不可兼得，但力求影响最小的状况下初始化。

初始化 CSS 样式例子

html,
body {
  padding: 0; 
  margin: 0;
} 
...

collapse、overflow、float 这些特性相互叠加后会怎么样？

margin collapse 我以为这里的意思应该是 Collapsing margins，即外边距折叠，指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距。

其中所说的 margin 毗邻，能够归结为如下两点：

这两个或多个外边距没有被非空内容、padding、border 或 clear 分隔开。
这些 margin 都处于普通流中。

两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠。
浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其余元素的 margin 折叠.
建立了块级格式化上下文的元素，不和它的子元素发生 margin 折叠

请解释一下CSS3 的 Flexbox（弹性盒布局模型），以及适用场景？

http://www.ruanyifeng.com/blo...

任何一个容器均可以指定为 Flex 布局，行内元素也可使用 Flex 布局。

注意：设为 Flex 布局之后，子元素的 float、clear 和 vertical-align 属性将失效。

flex 布局最经常使用的是什么场景？

通常实现垂直居中是一件很麻烦的事，但 flex 布局轻松解决。

.demo {
  display: flex;            
  justify-content: center;                    
  align-items: center;
}

用纯 CSS 建立一个三角形的原理是什么？

把上、左、右三条边隐藏掉（颜色设为 transparent）

#demo {
 width: 0;
 height: 0;
 border-width: 20px;
 border-style: solid;
 border-color: transparent transparent red transparent;
}

absolute 的 containing block(容器块) 计算方式跟正常流有什么不一样？

不管属于哪一种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，而后再判断：

若此元素为 inline 元素，则 containing block 为可以包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin，border 外的区域) 的最小矩形；
不然，则由这个祖先元素的 padding box 构成。
若是都找不到，则为 initial containing block。

补充：

static / relative：简单说就是它的父元素的内容框（即去掉 padding 的部分）
absolute: 向上找最近的定位为 absolute / relative 的元素
fixed: 它的 containing block 一概为根元素(html / body)，根元素也是 initial containing block

对 BFC 规范(块级格式化上下文：blockformatting context)的理解？

W3C CSS 2.1 规范中的一个概念，它是一个独立容器，决定了元素如何对其内容进行定位，以及与其余元素的关系和相互做用。

一个页面是由不少个 Box 组成的，元素的类型和 display 属性，决定了这个 Box 的类型。
不一样类型的 Box，会参与不一样的 Formatting Context（决定如何渲染文档的容器），所以 Box 内的元素会以不一样的方式渲染，也就是说 BFC 内部的元素和外部的元素不会互相影响。

用 position: absolute 跟用 float 有什么区别吗？

都是脱离标准流，只是 position: absolute 定位用的时候，位置能够给的更精确(想放哪就放哪)，而 float 用的更简洁，向右，左，两个方向浮动，用起来就一句代码。
还有就是 position: absolute 无论在哪一个标签里，均可以定位到任意位置，毕竟 top，left，bottom，right 均可以给正值或负值；
float 只是向左或向右浮动，不如 position: absolute 灵活，浮动后再想改变位置就要加各类 margin，padding 之类的经过间距的改变来改变位置，我自身以为这样的话用起来不方便，也不太好。
但在菜单栏，或者一些图标的横向排列时，用起来特别方便，一个 float 就解决了，并且每一个元素之间不会有任何间距(因此能够用 float 消除元素间的距离)；

svg 与 convas 的区别？

svg 绘制出来的每个图形的元素都是独立的 DOM 节点，可以方便的绑定事件或用来修改，而 canvas 输出的是一整幅画布；
svg 输出的图形是矢量图形，后期能够修改参数来自由放大缩小，不会是真和锯齿。而 canvas 输出标量画布，就像一张图片同样，放大会失真或者锯齿。

什么时候应当时用 padding 和 margin ？

什么时候应当使用 margin

须要在 border 外侧添加空白时。
空白处不须要背景（色）时。
上下相连的两个盒子之间的空白，须要相互抵消时。

如 15px + 20px 的 margin，将获得 20px 的空白。

什么时候应当时用 padding

须要在 border 内测添加空白时。
空白处须要背景（色）时。
上下相连的两个盒子之间的空白，但愿等于二者之和时。

如 15px + 20px 的 padding，将获得 35px 的空白。

我的认为：margin 是用来隔开元素与元素的间距；padding 是用来隔开元素与内容的间隔，让内容（文字）与（包裹）元素之间有一段呼吸距离。

文字在超出长度时，如何实现用省略号代替 ? 超长长度的文字在省略显示后，如何在鼠标悬停时，以悬浮框的形式显示出所有信息 ?

注意：设置 width，overflow: hidden, white-space: nowrap (规定段落中的文本不进行换行), text-overflow: ellipsis，四个属性缺一不可。这种写法在全部的浏览器中都能正常显示。

CSS 里的 visibility 属性有个 collapse 属性值？在不一样浏览器下有什么区别？

Collapse

当在表格元素中使用时，此值可删除一行或一列，可是它不会影响表格的布局，被行或列占据的空间会留给其余内容使用。
若是此值被用在其余的元素上，会呈现为 hidden。
当一个元素的 visibility 属性被设置成 collapse 值后，对于通常的元素，它的表现跟 hidden 是同样的。
chrome中，使用 collapse 值和使用 hidden 没有区别。
firefox，opera 和 IE，使用 collapse 值和使用 display：none 没有什么区别。

position 跟 display、overflow、float 这些特性相互叠加后会怎么样？

display 属性规定元素应该生成的框的类型；
position 属性规定元素的定位类型；
float 属性是一种布局方式，定义元素在哪一个方向浮动。
相似于优先级机制：position：absolute / fixed 优先级最高，有他们在时，float 不起做用，display 值须要调整。float 或者 absolute 定位的元素，只能是块元素或表格。

对 BFC 规范(块级格式化上下文：block formatting context) 的理解？

BFC 规定了内部的 Block Box 如何布局。

定位方案：

内部的 Box 会在垂直方向上一个接一个放置。
Box 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
每一个元素的 margin box 的左边，与包含块 border box 的左边相接触。
BFC 的区域不会与 float box 重叠。
BFC 是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

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

知足下列条件之一就可触发 BFC：

一、根元素，即 html
二、float 的值不为 none（默认）
三、overflow 的值不为 visible（默认）
四、display 的值为 inline-block、table-cell、table-caption
五、position 的值为 absolute 或 fixed

浏览器是怎样解析 CSS 选择器的？

CSS 选择器的解析是从右向左解析的。
若从左向右的匹配，发现不符合规则，须要进行回溯，会损失不少性能。
若从右向左匹配，先找到全部的最右节点，对于每个节点，向上寻找其父节点直到找到根元素或知足条件的匹配规则，则结束这个分支的遍历。
两种匹配规则的性能差异很大，是由于从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS 解析完毕后，须要将解析的结果与 DOM Tree 的内容一块儿进行分析创建一棵 Render Tree，最终用来进行绘图。
在创建 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每一个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来肯定生成怎样的 Render Tree。

元素竖向的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的。

全屏滚动的原理是什么？用到了 CSS 的哪些属性？

原理

有点相似于轮播，总体的元素一直排列下去，假设有 5 个须要展现的全屏页面，那么高度是 500%，只是展现 100%，剩下的能够经过 transform 进行 y 轴定位，也能够经过
margin-top 实现。
overflow：hidden；transition：all 1000ms ease；

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE ？

响应式网站设计( Responsive Web design ) 是一个网站可以兼容多个终端，而不是为每个终端作一个特定的版本。
基本原理是经过媒体查询检测不一样的设备屏幕尺寸作处理。
页面头部必须有 meta 声明的 viewport。

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

视差滚动效果？

视差滚动（Parallax Scrolling）经过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢 来建立出使人惊叹的 3D 效果。

CSS3 实现。

优势：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器

jQuery 实现。

经过控制不一样层滚动速度，计算每一层的时间，控制滚动效果。优势：能兼容到各个版本的，效果可控性好。缺点：开发起来对制做者要求高。

插件实现方式。

例如：parallax-scrolling，兼容性十分好。

::before 和 :after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的做用

单冒号 (:) 用于 CSS3 伪类，双冒号 (::) 用于 CSS3 伪元素。
::before 就是以一个子元素的存在，定义在元素主体内容以前的一个伪元素。并不存在于 dom 之中，只存在在页面之中。

:before 和 :after 这两个伪元素，是在 CSS2.1 里新出现的。
起初，伪元素的前缀使用的是单冒号语法，但随着 Web 的进化，在 CSS3 的规范里，伪元素的语法被修改为使用双冒号，成为 ::before、 ::after 。

怎么让 Chrome 支持小于 12px 的文字？

p {
  font-size: 10px;
  -webkit-transform: scale(0.8);  // 0.8 是缩放比例
}

让页面里的字体变清晰，变细用 CSS 怎么作？

-webkit-font-smoothing 在 window 系统下没有起做用，可是在 IOS 设备上起做用 -webkit-font-smoothing：antialiased 是最佳的，灰度平滑。

若是须要手动写动画，你认为最小时间间隔是多久，为何？

多数显示器默认频率是 60Hz，即 1 秒刷新 60 次，因此理论上最小间隔为：1/60＊1000ms ＝ 16.7ms。

有一个高度自适应的 div，里面有两个 div，一个高度 100px，如何让另外一个填满剩下的高度？

外层 div 使用 position：relative；
高度要求自适应的 div 使用 position: absolute; top: 100px; bottom: 0; left: 0

png、jpg、gif 这些图片格式解释一下，分别何时用。有没有了解过webp ？

png 是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式。

优势是：压缩比高，色彩好。大多数地方均可以用。

jpg 是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化作的不错。在 www 上，被用来储存和传输照片的格式。
gif 是一种位图文件格式，以 8 位色重现真色彩的图像。能够实现动画效果。
webp 格式是谷歌在 2010 年推出的图片格式，压缩率只有 jpg 的 2/3，大小比 png 小了 45%。缺点是压缩的时间更久了，兼容性很差，目前谷歌和 opera 支持。

style 标签写在 body 后与 body 前有什么区别？

页面加载自上而下，固然是先加载样式。

写在 body 标签后，因为浏览器以逐行方式对 HTML 文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会致使浏览器中止以前的渲染，等待加载且解析样式表完成以后从新渲染，在 windows 的 IE 下可能会出现 FOUC 现象（即样式失效致使的页面闪烁问题）

阐述一下CSS Sprites

将一个页面涉及到的全部图片都包含到一张大图中去，而后利用 CSS 的 background-image，background-repeat，background-position 的组合进行背景定位。

利用 CSS Sprites 能很好地减小网页的 http 请求，从而大大的提升页面的性能；
CSS Sprites 能减小图片的字节。

用 css 实现左侧宽度自适应，右侧固定宽度？

一、标准浏览器的方法

固然，以不折腾人为标准的 w3c 标准早就为咱们提供了制做这种自适应宽度的标准方法。

把 container 设为 display: table 并指定宽度 100%；
而后把 main + sidebar 设为 display: table-cell;
而后只给 sidebar 指定一个宽度，那么 main 的宽度就变成自适应了。

代码不多，并且不会有额外标签。不过这是 IE7 及如下都无效的方法。

.container {
    display: table;
    width: 100%;
}
.main {
    display: table-cell;
}
.sidebar {
    display: table-cell;
    width: 300px;
}

二、固定区域浮动，自适应区域不设置宽度但设置 margin

.container {
    overflow: hidden;
    *zoom: 1;
}
.sidebar {
    float: right;
    width: 300px;
    background: #333;
}
.main {
    margin-right: 320px;
    background: #666;
}
.footer {
    margin-top: 20px;
    background: #ccc;
}

其中，sidebar 让它浮动，并设置了一个宽度；而 main 没有设置宽度。

你们要注意 html 中必须使用 div 标签，不要妄图使用什么 p 标签来达到目的。由于 div 有个默认属性，即若是不设置宽度，那它会自动填满它的父标签的宽度。这里的 main 就是例子。

固然咱们不能让它填满了，填满了它就不能和 sidebar 保持同一行了。咱们给它设置一个 margin。因为 sidebar 在右边，因此咱们设置 main 的 margin-right 值，值比 sidebar 的宽度大一点点——以便区分它们的范围，例子中是 320。

假设 main 的默认宽度是 100%，那么它设置了 margin 后，它的宽度就变成了 100% - 320，此时 main 发现本身的宽度能够与 sidebar 挤在同一行了，因而它就上来了。
而宽度 100% 是相对于它的父标签来的，若是咱们改变了它父标签的宽度，那 main 的宽度也就会变——好比咱们把浏览器窗口缩小，那 container 的宽度就会变小，而 main 的宽度也就变小，但它的实际宽度 100% - 320 始终是不会变的。

这个方法看起来很完美，只要咱们记得清除浮动(这里我用了最简单的方法)，那 footer 也不会错位。并且不管 main 和 sidebar 谁更长，都不会对布局形成影响。

但实际上这个方法有个很老火的限制——html 中 sidebar 必须在 main 以前！
但我须要 sidebar 在 main 以后！由于个人 main 里面才是网页的主要内容，我不想主要内容反而排在次要内容后面。
但若是 sidebar 在 main 以后，那上面的一切都会化为泡影。

三、固定区域使用定位，自适应区域不设置宽度，但设置 margin

.container {
    position: relative;
}
.sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    background: #333;
}
.main {
    margin-right: 320px;
    background: #666;
}

咦，好像不对，footer 怎么仍是在那儿呢？怎么没有自动往下走呢？footer 说——我不给绝对主义者让位！
其实这与 footer 无关，而是由于 container 对 sidebar 的无视形成的——你再长，我仍是没感受。
看来这种定位方式只能知足 sidebar 本身，但对它的兄弟们却毫无益处。

四、左边浮动，右边 overflow: hidden;

*{ margin:0; padding: 0; }
html,body{
   height: 100%;/*高度百分百显示*/
}
#left {
    width: 300px;
    height: 100%;
    background-color: #ccc;
    float: left;
}
#right {
    height: 100%;
    overflow: hidden;
    background-color: #eee;
}

第二种方法，我利用的是建立一个新的 BFC（块级格式化上下文）来防止文字环绕的原理来实现的。

BFC 就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响。
它能够经过如下任何一种方式来建立：

float 的值不为 none
position 的值不为 static 或者 relative
display 的值为 table-cell , table-caption , inline-block , flex , 或者 inline-flex 中的其中一个 overflow 的值不为 visible

关于 BFC，在 w3c 里是这样描述的：在 BFC 中，每一个盒子的左外边框紧挨着包含块的左边框（从右到左的格式化时，则为右边框紧挨）。
即便在浮动里也是这样的（尽管一个包含块的边框会由于浮动而萎缩），除非这个包含块的内部建立了一个新的 BFC。
这样，当咱们给右侧的元素单首创建一个 BFC 时，它将不会紧贴在包含块的左边框，而是紧贴在左元素的右边框。

问：浮动的原理和工做方式，会产生什么影响呢，要怎么处理？

工做方式：浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

影响

浮动会致使父元素没法被撑开，影响与父元素同级的元素。
与该浮动元素同级的非浮动元素，若是是块级元素，会移动到该元素下方，而块级元素内部的行内元素会环绕浮动元素；而若是是内联元素则会环绕该浮动元素。
与该元素同级的浮动元素，对于同一方向的浮动元素(同级)，两个元素将会跟在碰到的浮动元素后面；而对于不一样方向的浮动元素，在宽度足够时，将分别浮动向不一样方向，在宽度不一样是将致使一方换行(换行与 HTML 书写顺序有关，后边的将会浮动到下一行)。
浮动元素将被视做为块元素。
而浮动元素对于其父元素以外的元素，若是是非浮动元素，则至关于忽视该浮动元素，若是是浮动元素，则至关于同级的浮动元素。
而经常使用的清除浮动的方法，则如使用空标签，overflow，伪元素等。

在使用基于浮动设计的 CSS 框架时，自会提供清除的方法，我的并不习惯使用浮动进行布局。

对 CSS Grid 布局的使用

5 分钟学会 CSS Grid 布局

rem、em、px、vh 与 vw 的区别？

1、 rem 的特色

rem 的大小是根据 html 根目录下的字体大小进行计算的。
当咱们改变根目录下的字体大小的时候，下面字体都改变。
rem 不只能够设置字体的大小，也能够设置元素宽、高等属性。
rem 是 CSS3 新增的一个相对单位（root em，根em），这个单位与 em 区别在于使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。

这个单位可谓集相对大小和绝对大小的优势于一身，经过它既能够作到只修改根元素就成比例地调整全部字体大小，又能够避免字体大小逐层复合的连锁反应。
目前，除了 IE8 及更早版本外，全部浏览器均已支持 rem。
对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用 rem 设定的字体大小。

2、px 特色

px 像素（Pixel）。相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。

3、em 特色

em 的值并非固定的；
em 会继承父级元素的字体大小。
em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
任意浏览器的默认字体高都是 16px。

全部未经调整的浏览器通常都符合: 1em = 16px。那么 12px = 0.75em，10px = 0.625em。
为了简化 font-size 的换算，须要在 css 中的 body 选择器中声明 Fontsize = 62.5%，这就使 em 值变为 16px*62.5% = 10px, 这样 12px = 1.2em, 10px = 1em, 也就是说只须要将你的原来的 px 数值除以 10，而后换上 em 做为单位就好了。

4、vh 与 vw

视口

在桌面端，指的是浏览器的可视区域；
在移动端，它涉及 3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。
视口单位中的 “视口”，桌面端指的是浏览器的可视区域；移动端指的就是 Viewport 中的 Layout Viewport。

vh / vw 与 %

单位：解释

vw ：1vw = 视口宽度的 1%
vh ：1vh = 视口高度的 1%
vmin ：选取 vw 和 vh 中最小的那个
vmax ：选取 vw 和 vh 中最大的那个

好比：浏览器视口尺寸为 370px，那么 1vw = 370px * 1% = 6.5px (浏览器会四舍五入向下取 7)

vh / vw 与 % 区别

单位：解释

% ：元素的祖先元素
vh / vw ：视口的尺寸

不过因为 vw 和 vh 是 css3 才支持的长度单位，因此在不支持 css3 的浏览器中是无效的。

什么叫优雅降级和渐进加强？

渐进加强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，而后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，而后再针对低版本浏览器进行兼容。

区别

优雅降级是从复杂的现状开始，并试图减小用户体验的供给；
渐进加强则是从一个很是基础的，可以起做用的版本开始，并不断扩充，以适应将来环境的须要；
降级（功能衰减）意味着往回看；而渐进加强则意味着朝前看，同时保证其根基处于安全地带。

最后

前端硬核面试专题的完整版在此：前端硬核面试专题，包含：HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTTPS + 数据结构与算法 + Git 。

若是以为本文还不错，记得给个 star ，你的 star 是我持续更新的动力！。