关于css:104道-CSS-面试题助你查漏补缺

最近在整顿 CSS 的时候发现遇到了很多面试中常见的面试题，本局部次要原作者在 Github 等各大论坛收录的 CSS 相干常识和一些相干面试题时所做的笔记，分享这份总结给大家，对大家对 CSS 的能够来一次全方位的检漏和排查，感激原作者 CavsZhouyou 的付出，如果呈现谬误，心愿大家独特指出！喜爱的能够给我点赞激励，附笔记链接：https://github.com/Wscats/articles

相干知识点：

（1）有两种盒子模型：IE 盒模型（border-box）、W3C 规范盒模型（content-box）（2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个局部

IE 盒模型和 W3C 规范盒模型的区别：（1）W3C 规范盒模型：属性 width，height 只蕴含内容 content，不蕴含 border 和 padding（2）IE 盒模型：属性 width，height 蕴含 content、border 和 padding，指的是 content
+padding+border。在 ie8+ 浏览器中应用哪个盒模型能够由 box-sizing（CSS 新增的属性）管制，默认值为 content-box，即规范盒模型；如果将 box-sizing 设为 border-box 则用的是 IE 盒模型。如果在 ie6，7，8 中 DOCTYPE 缺失会将盒子模型解释为 IE
盒子模型。若在页面中申明了 DOCTYPE 类型，所有的浏览器都会把盒模型解释为 W3C 盒模型。

答复：

 盒模型都是由四个局部组成的，别离是 margin、border、padding 和 content。规范盒模型和 IE 盒模型的区别在于设置 width 和 height 时，所对应的范畴不同。规范盒模型的 width 和 height 属性的
范畴只蕴含了 content，而 IE 盒模型的 width 和 height 属性的范畴蕴含了 border、padding 和 content。一般来说，咱们能够通过批改元素的 box-sizing 属性来扭转元素的盒模型。

具体的材料能够参考：
《CSS 盒模型详解》

（1）id 选择器（#myid）（2）类选择器（.myclassname）（3）标签选择器（div,h1,p）（4）后辈选择器（h1p）（5）相邻后辈选择器（子）选择器（ul>li）（6）兄弟选择器（li~a）（7）相邻兄弟选择器（li+a）（8）属性选择器（a[rel="external"]）（9）伪类选择器（a:hover,li:nth-child）（10）伪元素选择器（::before、::after）（11）通配符选择器（*）

相干知识点：

 单冒号（:）用于 CSS3 伪类，双冒号（::）用于 CSS3 伪元素。（伪元素由双冒号和伪元素名称组成）双冒号是在以后标准中引入的，用于辨别伪类和伪元素。不过浏览器须要同时反对旧的曾经存在的伪元素写法，比方:first-line、:first-letter、:before、:after 等，而新的在 CSS3 中引入的伪元素则不容许再反对旧的单冒号的写法。想让插入的内容呈现在其它内容前，应用::before，否者，应用::after；在代码程序上，::after 生成的内容也比::before 生成的内容靠后。如果按堆栈视角，::after 生成的内容会在::before 生成的内容之上。

答复：

 在 css3 中应用单冒号来示意伪类，用双冒号来示意伪元素。然而为了兼容已有的伪元素的写法，在一些浏览器中也能够应用单冒号
来示意伪元素。伪类个别匹配的是元素的一些非凡状态，如 hover、link 等，而伪元素个别匹配的非凡的地位，比方 after、before 等。

css 引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来润饰不在文档树中的局部，比方，一句
话中的第一个字母，或者是列表中的第一个元素。伪类用于当已有的元素处于某个状态时，为其增加对应的款式，这个状态是依据用户行为而动态变化的。比如说，当用户悬停在指定的
元素时，咱们能够通过:hover 来形容这个元素的状态。伪元素用于创立一些不在文档树中的元素，并为其增加款式。它们容许咱们为元素的某些局部设置款式。比如说，咱们能够通过::be
fore 来在一个元素前减少一些文本，并为这些文本增加款式。尽管用户能够看到这些文本，然而这些文本实际上不在文档树中。有时你会发现伪元素应用了两个冒号（::）而不是一个冒号（:）。这是 CSS3 的一部分，并尝试辨别伪类和伪元素。大多数浏览
器都反对这两个值。依照规定应该应用（::）而不是（:），从而辨别伪类和伪元素。然而，因为在旧版本的 W3C 标准并未对此进行
特地辨别，因而目前绝大多数的浏览器都反对应用这两种形式示意伪元素。

详细资料能够参考：
《总结伪类与伪元素》

相干材料：

 每个 CSS 属性定义的概述都指出了这个属性是默认继承的，还是默认不继承的。这决定了当你没有为元素的属性指定值时该如何计算
值。当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值。只有文档根元素取该属性的概述中给定的初始值（这里的意思应
该是在该属性自身的定义中的默认值）。当元素的一个非继承属性（在 Mozillacode 里有时称之为 resetproperty）没有指定值时，则取属性的初始值 initialv
alue（该值在该属性的概述里被指定）。有继承性的属性：（1）字体系列属性
font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust（2）文本系列属性
text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、text-transform、direction、color（3）表格布局属性
caption-sideborder-collapseempty-cells（4）列表属性
list-style-type、list-style-image、list-style-position、list-style（5）光标属性
cursor（6）元素可见性
visibility（7）还有一些不罕用的；speak，page，设置嵌套援用的引号类型 quotes 等属性


留神：当一个属性不是继承属性时，能够应用 inherit 关键字指定一个属性应从父元素继承它的值，inherit 关键字用于显式地
指定继承性，可用于任何继承性 / 非继承性属性。

答复：

 每一个属性在定义中都给出了这个属性是否具备继承性，一个具备继承性的属性会在没有指定值的时候，会应用父元素的同属性的值
来作为本人的值。个别具备继承性的属性有，字体相干的属性，font-size 和 font-weight 等。文本相干的属性，color 和 text-align 等。表格的一些布局属性、列表属性如 list-style 等。还有光标属性 cursor、元素可见性 visibility。当一个属性不是继承属性的时候，咱们也能够通过将它的值设置为 inherit 来使它从父元素那获取同名的属性值来继承。

具体的材料能够参考：
《继承属性》
《CSS 有哪些属性能够继承？》

相干知识点：

CSS 的优先级是依据款式申明的特殊性值来判断的。选择器的特殊性值分为四个等级，如下：（1）标签内选择符 x,0,0,0（2）ID 选择符 0,x,0,0（3）class 选择符 / 属性选择符 / 伪类选择符    0,0,x,0（4）元素和伪元素选择符 0,0,0,x

计算方法：（1）每个等级的初始值为 0（2）每个等级的叠加为选择器呈现的次数相加（3）不可进位，比方 0,99,99,99（4）顺次示意为：0,0,0,0（5）每个等级计数之间没关联（6）等级判断从左向右，如果某一位数值雷同，则判断下一位数值（7）如果两个优先级雷同，则最初呈现的优先级高，!important 也实用（8）通配符选择器的特殊性值为：0,0,0,0（9）继承款式优先级最低，通配符款式优先级高于继承款式（10）!important（权重），它没有特殊性值，但它的优先级是最高的，为了不便记忆，能够认为它的特殊性值为 1,0,0,0,0。计算实例：（1）#demoa{color:orange;}/* 特殊性值：0,1,0,1*/（2）div#demoa{color:red;}/* 特殊性值：0,1,0,2*/


留神：（1）款式利用时，css 会先查看规定的权重（!important），加了权重的优先级最高，当权重雷同的时候，会比拟规定的特殊性。（2）特殊性值越大的申明优先级越高。（3）雷同特殊性值的申明，依据款式引入的程序，后申明的规定优先级高（间隔元素呈现最近的）

答复：

 判断优先级时，首先咱们会判断一条属性申明是否有权重，也就是是否在申明前面加上了!important。一条申明如果加上了权重，那么它的优先级就是最高的，前提是它之后不再呈现雷同权重的申明。如果权重雷同，咱们则须要去比拟匹配规定的特殊性。一条匹配规定个别由多个选择器组成，一条规定的特殊性由组成它的选择器的特殊性累加而成。选择器的特殊性能够分为四个等级，第一个等级是行内款式，为 1000，第二个等级是 id 选择器，为 0100，第三个等级是类选择器、伪类选择器和属性选择器，为 0010，第四个等级是元素选择器和伪元素选择器，为 0001。规定中每呈现一个选择器，就将它的特殊性进行叠加，这个叠加只限于对应的等
级的叠加，不会产生进位。选择器特殊性值的比拟是从左向右排序的，也就是说以 1 结尾的特殊性值比所有以 0 结尾的特殊性值要大。比如说特殊性值为 1000 的的规定优先级就要比特殊性值为 0999 的规定高。如果两个规定的特殊性值相等的时候，那么就会依据它们引
入的程序，后呈现的规定的优先级最高。

对于组合申明的特殊性值计算能够参考：
《CSS 优先级计算及利用》
《CSS 优先级计算规定》

 a 标签有四种状态：链接拜访前、链接拜访后、鼠标滑过、激活，别离对应四种伪类:link、:visited、:hover、:active；当链接未拜访过期：（1）当鼠标滑过 a 链接时，满足:link 和:hover 两种状态，要扭转 a 标签的色彩，就必须将:hover 伪类在:link 伪
类前面申明；（2）当鼠标点击激活 a 链接时，同时满足:link、:hover、:active 三种状态，要显示 a 标签激活时的款式（:active），必须将:active 申明放到:link 和:hover 之后。因而得出 LVHA 这个程序。当链接拜访过期，状况根本同上，只不过须要将:link 换成:visited。这个程序能不能变？能够，但也只有:link 和:visited 能够替换地位，因为一个链接要么拜访过要么没拜访过，不可能同时满足，也就不存在笼罩的问题。

（1）elem:nth-child(n) 选中父元素下的第 n 个子元素，并且这个子元素的标签名为 elem，n 能够承受具体的数
值，也能够承受函数。（2）elem:nth-last-child(n) 作用同上，不过是从后开始查找。（3）elem:last-child 选中最初一个子元素。（4）elem:only-child 如果 elem 是父元素下惟一的子元素，则选中之。（5）elem:nth-of-type(n) 选中父元素下第 n 个 elem 类型元素，n 能够承受具体的数值，也能够承受函数。（6）elem:first-of-type 选中父元素下第一个 elem 类型元素。（7）elem:last-of-type 选中父元素下最初一个 elem 类型元素。（8）elem:only-of-type 如果父元素下的子元素只有一个 elem 类型元素，则选中该元素。（9）elem:empty 选中不蕴含子元素和内容的 elem 类型元素。（10）elem:target 抉择以后流动的 elem 元素。（11）:not(elem) 抉择非 elem 元素的每个元素。（12）:enabled    管制表单控件的禁用状态。（13）:disabled        管制表单控件的禁用状态。(14):checked 单选框或复选框被选中。

具体的材料能够参考：
《CSS3 新个性总结 (伪类)》
《浅谈 CSS 伪类和伪元素及 CSS3 新增伪类》

- 程度居中：给 div 设置一个宽度，而后增加 margin:0auto 属性

div {
  width: 200px;
  margin: 0auto;
}

- 程度居中，利用 text-align:center 实现

.container {background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 0;
}

.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
}

- 让相对定位的 div 居中

div {
  position: absolute;
  width: 300px;
  height: 300px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: pink; /* 不便看成果 */
}

- 程度垂直居中一

/* 确定容器的宽高宽 500 高 300 的层设置层的外边距 div{*/
position:absolute;/* 相对定位 */
width:500px;
height:300px;
top:50%;
left:50%;
margin:-150px00-250px;/* 外边距为本身宽高的一半 */
background-color:pink;/* 不便看成果 */
}

- 程度垂直居中二

/* 未知容器的宽高，利用 `transform` 属性 */
div {
  position: absolute; /* 绝对定位或相对定位均可 */
  width: 500px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: pink; /* 不便看成果 */
}

- 程度垂直居中三

/* 利用 flex 布局理论应用时应思考兼容性 */
.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 程度居中 */
}
.containerdiv {
  width: 100px;
  height: 100px;
  background-color: pink; /* 不便看成果 */
}

- 程度垂直居中四

/* 利用 text-align:center 和 vertical-align:middle 属性 */
.container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 0;
  white-space: nowrap;
  overflow: auto;
}

.container::after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
  white-space: normal;
  vertical-align: middle;
}

答复：

 个别常见的几种居中的办法有：对于宽高固定的元素（1）咱们能够利用 margin:0auto 来实现元素的程度居中。（2）利用相对定位，设置四个方向的值都为 0，并将 margin 设置为 auto，因为宽高固定，因而对应方向实现平分，能够实现水
温和垂直方向上的居中。（3）利用相对定位，先将元素的左上角通过 top:50% 和 left:50% 定位到页面的核心，而后再通过 margin 负值来调整元素
的中心点到页面的核心。（4）利用相对定位，先将元素的左上角通过 top:50% 和 left:50% 定位到页面的核心，而后再通过 translate 来调整元素
的中心点到页面的核心。（5）应用 flex 布局，通过 align-items:center 和 justify-content:center 设置容器的垂直和程度方向上为居中对
齐，而后它的子元素也能够实现垂直和程度的居中。对于宽高不定的元素，下面的前面两种办法，能够实现元素的垂直和程度的居中。

block    块类型。默认宽度为父元素宽度，可设置宽高，换行显示。none    元素不显示，并从文档流中移除。inline    行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。inline-block 默认宽度为内容宽度，能够设置宽高，同行显示。list-item    像块类型元素一样显示，并增加款式列表标记。table    此元素会作为块级表格来显示。inherit    规定应该从父元素继承 display 属性的值。

详细资料能够参考：
《CSSdisplay 属性》

相干知识点：

absolute
生成相对定位的元素，绝对于值不为 static 的第一个父元素的 paddingbox 进行定位，也能够了解为离本人这一级元素最近的
一级 position 设置为 absolute 或者 relative 的父元素的 paddingbox 的左上角为原点的。fixed（老 IE 不反对）生成相对定位的元素，绝对于浏览器窗口进行定位。relative
生成绝对定位的元素，绝对于其元素自身所在失常地位进行定位。static
默认值。没有定位，元素呈现在失常的流中（疏忽 top,bottom,left,right,z-index 申明）。inherit
规定从父元素继承 position 属性的值。

答复：

relative 定位的元素，是绝对于元素自身的失常地位来进行定位的。absolute 定位的元素，是绝对于它的第一个 position 值不为 static 的先人元素的 paddingbox 来进行定位的。这句话
咱们能够这样来了解，咱们首先须要找到相对定位元素的一个 position 的值不为 static 的先人元素，而后绝对于这个先人元
素的 paddingbox 来定位，也就是说在计算定位间隔的时候，padding 的值也要算进去。

 新增各种 CSS 选择器（:not(.input)：所有 class 不是“input”的节点）圆角（border-radius:8px）多列布局（multi-columnlayout）暗影和反射（Shadow\Reflect）文字特效（text-shadow）文字渲染（Text-decoration）线性突变（gradient）旋转（transform）缩放，定位，歪斜，动画，多背景
例如：transform:\scale(0.85,0.90)\translate(0px,-30px)\skew(-9deg,0deg)\Animation:

相干知识点：

Flex 是 FlexibleBox 的缩写，意为 "弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都能够指定为 Flex 布局。行内元素也能够应用 Flex 布局。留神，设为 Flex 布局当前，子元素的 float、cl
ear 和 vertical-align 属性将生效。采纳 Flex 布局的元素，称为 Flex 容器（flexcontainer），简称 "容器"。它的所有子元素主动成为容器成员，称为 Flex
我的项目（flexitem），简称 "我的项目"。容器默认存在两根轴：程度的主轴（mainaxis）和垂直的穿插轴（crossaxis），我的项目默认沿主轴排列。以下 6 个属性设置在容器上。flex-direction 属性决定主轴的方向（即我的项目的排列方向）。flex-wrap 属性定义，如果一条轴线排不下，如何换行。flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写模式，默认值为 rownowrap。justify-content 属性定义了我的项目在主轴上的对齐形式。align-items 属性定义我的项目在穿插轴上如何对齐。align-content 属性定义了多根轴线的对齐形式。如果我的项目只有一根轴线，该属性不起作用。以下 6 个属性设置在我的项目上。order 属性定义我的项目的排列程序。数值越小，排列越靠前，默认为 0。flex-grow 属性定义我的项目的放大比例，默认为 0，即如果存在残余空间，也不放大。flex-shrink 属性定义了我的项目的放大比例，默认为 1，即如果空间有余，该我的项目将放大。flex-basis 属性定义了在调配多余空间之前，我的项目占据的主轴空间。浏览器依据这个属性，计算主轴是否有多余空间。它的默认
值为 auto，即我的项目的原本大小。flex 属性是 flex-grow，flex-shrink 和 flex-basis 的简写，默认值为 01auto。align-self 属性容许单个我的项目有与其余我的项目不一样的对齐形式，可笼罩 align-items 属性。默认值为 auto，示意继承父
元素的 align-items 属性，如果没有父元素，则等同于 stretch。

答复：

flex 布局是 CSS3 新增的一种布局形式，咱们能够通过将一个元素的 display 属性值设置为 flex 从而使它成为一个 flex
容器，它的所有子元素都会成为它的我的项目。一个容器默认有两条轴，一个是程度的主轴，一个是与主轴垂直的穿插轴。咱们能够应用 flex-direction 来指定主轴的方向。咱们能够应用 justify-content 来指定元素在主轴上的排列形式，应用 align-items 来指定元素在穿插轴上的排列形式。还
能够应用 flex-wrap 来规定当一行排列不下时的换行形式。对于容器中的我的项目，咱们能够应用 order 属性来指定我的项目的排列程序，还能够应用 flex-grow 来指定当排列空间有残余的时候，我的项目的放大比例。还能够应用 flex-shrink 来指定当排列空间有余时，我的项目的放大比例。

详细资料能够参考：
《Flex 布局教程：语法篇》
《Flex 布局教程：实例篇》

 采纳的是相邻边框连接处的均分原理。将元素的宽高设为 0，只设置
  border，把任意三条边暗藏掉（色彩设为
  transparent），剩下的就是一个三角形。#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparenttransparentredtransparent;
}

 简略的形式：下面的 div 宽 100%，上面的两个 div 别离宽 50%，而后用 float 或者 inline 使其不换行即可

（1）利用 padding-bottom|margin-bottom 正负值相抵，不会影响页面布局的特点。设置父容器设置超出暗藏（overflow:
hidden），这样父容器的高度就还是它外面的列没有设定 padding-bottom 时的高度，当它外面的任一列高度减少了，则
父容器的高度被撑到外面最高那列的高度，其余比这列矮的列会用它们的 padding-bottom 弥补这部分高度差。（2）利用 table-cell 所有单元格高度都相等的个性，来实现多列等高。（3）利用 flex 布局中我的项目 align-items 属性默认为 stretch，如果我的项目未设置高度或设为 auto，将占满整个容器的高度
的个性，来实现多列等高。

详细资料能够参考：
《前端应该把握的 CSS 实现多列等高布局》
《CSS：多列等高布局》

（1）png24 位的图片在 iE6 浏览器上呈现背景
解决方案：做成 PNG8，也能够援用一段脚本解决。（2）浏览器默认的 margin 和 padding 不同
解决方案：加一个全局的 *{margin:0;padding:0;} 来对立。（3）IE6 双边距 bug：在 IE6 下，如果对元素设置了浮动，同时又设置了 margin-left 或
margin-right，margin 值会加倍。#box{float:left;width:10px;margin:00010px;}

这种状况之下 IE 会产生 20px 的间隔
解决方案：在 float 的标签款式管制中退出_display:inline; 将其转化为行内属性。(_这个符号只有 ie6 会辨认)（4）渐进辨认的形式，从总体中逐步排除部分。首先，奇妙的应用 "\9" 这一标记，将 IE 游览器从所有状况中分离出来。接着，再次应用 "+" 将 IE8 和 IE7、IE6 拆散开来，这样 IE8 曾经独立辨认。.bb{
background-color:#f1ee18;/* 所有辨认 */
.background-color:#00deff\9;/*IE6、7、8 辨认 */
+background-color:#a200ff;/*IE6、7 辨认 */
_background-color:#1e0bd1;/*IE6 辨认 */
}（5）IE 下，能够应用获取惯例属性的办法来获取自定义属性，也能够应用 getAttribute() 获取自定义
属性；Firefox 下，只能应用 getAttribute() 获取自定义属性
解决办法：对立通过 getAttribute() 获取自定义属性。（6）IE 下，event 对象有 x、y 属性，然而没有 pageX、pageY 属性;Firefox 下，event 对象有
pageX、pageY 属性，然而没有 x、y 属性。解决办法：（条件正文）毛病是在 IE 浏览器下可能会减少额定的 HTTP 申请数。（7）Chrome 中文界面下默认会将小于 12px 的文本强制依照 12px 显示
解决办法：1. 可通过退出 CSS 属性 -webkit-text-size-adjust:none; 解决。然而，在 chrome
更新到 27 版本之后就不能够用了。2. 还能够应用 -webkit-transform:scale(0.5); 留神 -webkit-transform:scale(0.75);
膨胀的是整个 span 的大小，这时候，必须要将 span 转换成块元素，能够应用 display：block/inline-block/...；（8）超链接拜访过后 hover 款式就不呈现了，被点击拜访过的超链接款式不再具备 hover 和 active 了
解决办法：扭转 CSS 属性的排列程序 L -V-H-A（9）怪异模式问题：漏写 DTD 申明，Firefox 依然会依照规范模式来解析网页，但在 IE 中会触发怪异模
式。为防止怪异模式给咱们带来不必要的麻烦，最好养成书写 DTD 申明的好习惯。

 浏览器会把 inline 元素间的空白字符（空格、换行、Tab 等）渲染成一个空格。而为了好看。咱们通常是一个 <li> 放在一行，这导致 <li> 换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。解决办法：（1）为 <li> 设置 float:left。有余：有些容器是不能设置浮动，如左右切换的焦点图等。（2）将所有 <li> 写在同一行。有余：代码不美观。（3）将 <ul> 内的字符尺寸间接设为 0，即 font-size:0。有余：<ul> 中的其余字符尺寸也被设为 0，须要额定从新设定其余
字符尺寸，且在 Safari 浏览器仍然会呈现空白距离。（4）打消 <ul> 的字符距离 letter-spacing:-8px，有余：这也设置了 <li> 内的字符距离，因而须要将 <li> 内的字符
距离设为默认 letter-spacing:normal。

详细资料能够参考：
《li 与 li 之间有看不见的空白距离是什么起因引起的？》

- 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会呈现浏览器之间的页面显示差别。- 当然，初始化款式会对 SEO 有肯定的影响，但鱼和熊掌不可兼得，但力求影响最小的状况下初始化。最简略的初始化办法：*{padding:0;margin:0;}（强烈不倡议）淘宝的款式初始化代码：body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend
,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5tahoma,arial,\5b8b\4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:couriernew,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}

 蕴含块（containingblock）就是元素用来计算和定位的一个框。（1）根元素（很多场景下能够看成是 <html>）被称为“初始蕴含块”，其尺寸等同于浏览器可视窗口的大小。（2）对于其余元素，如果该元素的 position 是 relative 或者 static，则“蕴含块”由其最近的块容器先人盒的 contentbox
边界造成。（3）如果元素 position:fixed，则“蕴含块”是“初始蕴含块”。（4）如果元素 position:absolute，则“蕴含块”由最近的 position 不为 static 的先人元素建设，具体形式如下：如果该先人元素是纯 inline 元素，则规定略简单：•假如给内联元素的前后各生成一个宽度为 0 的内联盒子（inlinebox），则这两个内联盒子的 paddingbox 里面的包
围盒就是内联元素的“蕴含块”；•如果该内联元素被跨行宰割了，那么“蕴含块”是未定义的，也就是 CSS2.1 标准并没有明确定义，浏览器自行施展
否则，“蕴含块”由该先人的 paddingbox 边界造成。如果没有符合条件的先人元素，则“蕴含块”是“初始蕴含块”。

（1）对于个别的元素，它的体现跟 visibility：hidden; 是一样的。元素是不可见的，但此时仍占用页面空间。（2）但例外的是，如果这个元素是 table 相干的元素，例如 table 行，tablegroup，table 列，tablecolumngroup，它的
体现却跟 display:none 一样，也就是说，它们占用的空间也会开释。在不同浏览器下的区别：在谷歌浏览器里，应用 collapse 值和应用 hidden 值没有什么区别。在火狐浏览器、Opera 和 IE11 里，应用 collapse 值的成果就如它的字面意思：table 的行会隐没，它的上面一行会补充它的位
置。

详细资料能够参考：
《CSS 里的 visibility 属性有个鲜为人知的属性值：collapse》

 一般而言

width:100% 会使元素 box 的宽度等于父元素的 contentbox 的宽度。width:auto 会使元素撑满整个父元素，margin、border、padding、content 区域会主动分配水平空间。

 相对定位元素的宽高百分比是绝对于邻近的 position 不为 static 的先人元素的 paddingbox 来计算的。非相对定位元素的宽高百分比则是绝对于父元素的 contentbox 来计算的。

base64 编码是一种图片解决格局，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，能够用该字符串来代替图片的
url 属性。应用 base64 的长处是：（1）缩小一个图片的 HTTP 申请

应用 base64 的毛病是：（1）依据 base64 的编码原理，编码后的大小会比原文件大小大 1 /3，如果把大图片编码到 html/css 中，不仅会造成文件体
积的减少，影响文件的加载速度，还会减少浏览器对 html 或 css 文件解析渲染的工夫。（2）应用 base64 无奈间接缓存，要缓存只能缓存蕴含 base64 的文件，比方 HTML 或者 CSS，这相比域间接缓存图片的成果要
差很多。（3）兼容性的问题，ie8 以前的浏览器不反对。个别一些网站的小图标能够应用 base64 图片来引入。

详细资料能够参考：
《玩转图片 base64 编码》
《前端开发中，应用 base64 图片的弊病是什么？》
《小 tip:base64:URL 背景图片与 web 页面性能优化》

（1）首先咱们判断 display 属性是否为 none，如果为 none，则 position 和 float 属性的值不影响元素最初的体现。（2）而后判断 position 的值是否为 absolute 或者 fixed，如果是，则 float 属性生效，并且 display 的值应该被
设置为 table 或者 block，具体转换须要看初始转换值。（3）如果 position 的值不为 absolute 或者 fixed，则判断 float 属性的值是否为 none，如果不是，则 display
的值则按下面的规定转换。留神，如果 position 的值为 relative 并且 float 属性的值存在，则 relative 绝对
于浮动后的最终地位定位。（4）如果 float 的值为 none，则判断元素是否为根元素，如果是根元素则 display 属性依照下面的规定转换，如果不是，则放弃指定的 display 属性值不变。总的来说，能够把它看作是一个相似优先级的机制，"position:absolute" 和 "position:fixed" 优先级最高，有它存在
的时候，浮动不起作用，'display' 的值也须要调整；其次，元素的 'float' 个性的值不是 "none" 的时候或者它是根元素
的时候，调整 'display' 的值；最初，非根元素，并且非浮动元素，并且非相对定位的元素，'display' 个性值同设置值。

详细资料能够参考：
《position 跟 display、margincollapse、overflow、float 这些个性互相叠加后会怎么样？》

相干知识点：

 块级元素的上外边距（margin-top）与下外边距（margin-bottom）有时会合并为单个外边距，这样的景象称为“margin 合
并”。产生折叠的必备条件：margin 必须是邻接的!

而依据 w3c 标准，两个 margin 是邻接的必须满足以下条件：•必须是处于惯例文档流（非 float 和相对定位）的块级盒子，并且处于同一个 BFC 当中。•没有线盒，没有空隙，没有 padding 和 border 将他们分隔开
•都属于垂直方向上相邻的外边距，能够是上面任意一种状况
•元素的 margin-top 与其第一个惯例文档流的子元素的 margin-top
•元素的 margin-bottom 与其下一个惯例文档流的兄弟元素的 margin-top
•height 为 auto 的元素的 margin-bottom 与其最初一个惯例文档流的子元素的 margin-bottom
•高度为 0 并且最小高度也为 0，不蕴含惯例文档流的子元素，并且本身没有建设新的 BFC 的元素的 margin-top
和 margin-bottom


margin 合并的 3 种场景：（1）相邻兄弟元素 margin 合并。解决办法：•设置块状格式化上下文元素（BFC）（2）父级和第一个 / 最初一个子元素的 margin 合并。解决办法：对于 margin-top 合并，能够进行如下操作（满足一个条件即可）：•父元素设置为块状格式化上下文元素；•父元素设置 border-top 值；•父元素设置 padding-top 值；•父元素和第一个子元素之间增加内联元素进行分隔。对于 margin-bottom 合并，能够进行如下操作（满足一个条件即可）：•父元素设置为块状格式化上下文元素；•父元素设置 border-bottom 值；•父元素设置 padding-bottom 值；•父元素和最初一个子元素之间增加内联元素进行分隔；•父元素设置 height、min-height 或 max-height。（3）空块级元素的 margin 合并。解决办法：•设置垂直方向的 border；•设置垂直方向的 padding；•外面增加内联元素（间接 Space 键空格是没用的）；•设置 height 或者 min-height。

答复：

margin 重叠指的是在垂直方向上，两个相邻元素的 margin 产生重叠的状况。一般来说能够分为四种情景：第一种是相邻兄弟元素的 marin-bottom 和 margin-top 的值产生重叠。这种状况下咱们能够通过设置其中一个元素为 BFC
来解决。第二种是父元素的 margin-top 和子元素的 margin-top 产生重叠。它们产生重叠是因为它们是相邻的，所以咱们能够通过这
一点来解决这个问题。咱们能够为父元素设置 border-top、padding-top 值来分隔它们，当然咱们也能够将父元素设置为 BFC
来解决。第三种是高度为 auto 的父元素的 margin-bottom 和子元素的 margin-bottom 产生重叠。它们产生重叠一个是因为它们相
邻，一个是因为父元素的高度不固定。因而咱们能够为父元素设置 border-bottom、padding-bottom 来分隔它们，也能够为
父元素设置一个高度，max-height 和 min-height 也能解决这个问题。当然将父元素设置为 BFC 是最简略的办法。第四种状况，是没有内容的元素，本身的 margin-top 和 margin-bottom 产生的重叠。咱们能够通过为其设置 border、pa
dding 或者高度来解决这个问题。

相干知识点：

 块格式化上下文（BlockFormattingContext，BFC）是 Web 页面的可视化 CSS 渲染的一部分，是布局过程中生成块级盒
子的区域，也是浮动元素与其余元素的交互限定区域。艰深来讲

•BFC 是一个独立的布局环境，能够了解为一个容器，在这个容器中依照肯定规定进行物品摆放，并且不会影响其它环境中的物品。•如果一个元素合乎触发 BFC 的条件，则 BFC 中的元素布局不受内部影响。创立 BFC（1）根元素或蕴含根元素的元素（2）浮动元素 float=left|right 或 inherit（≠none）（3）相对定位元素 position=absolute 或 fixed（4）display=inline-block|flex|inline-flex|table-cell 或 table-caption（5）overflow=hidden|auto 或 scroll(≠visible)

答复：

BFC 指的是块级格式化上下文，一个元素造成了 BFC 之后，那么它外部元素产生的布局不会影响到内部元素，内部元素的布局也
不会影响到 BFC 中的外部元素。一个 BFC 就像是一个隔离区域，和其余区域互不影响。一般来说根元素是一个 BFC 区域，浮动和相对定位的元素也会造成 BFC，display 属性的值为 inline-block、flex 这些
属性时也会创立 BFC。还有就是元素的 overflow 的值不为 visible 时都会创立 BFC。

详细资料能够参考：
《深刻了解 BFC 和 MarginCollapse》
《前端面试题 -BFC（块格式化上下文）》

IFC 指的是行级格式化上下文，它有这样的一些布局规定：（1）行级上下文外部的盒子会在程度方向，一个接一个地搁置。（2）当一行不够的时候会主动切换到下一行。（3）行级上下文的高度由外部最高的内联盒子的高度决定。

详细资料能够参考：

《BFC 和 IFC 的了解（布局）》

 浮动元素能够左右挪动，直到遇到另一个浮动元素或者遇到它外边缘的蕴含框。浮动框不属于文档流中的一般流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的一般流就会体现得该浮动框不存在一样的布局模式。当蕴含框
的高度小于浮动框的时候，此时就会呈现“高度塌陷”。革除浮动是为了革除应用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使咱们页面前面的布局不能失常显示。革除浮动的形式（1）应用 clear 属性革除浮动。参考 28。（2）应用 BFC 块级格式化上下文来革除浮动。参考 26。因为 BFC 元素不会影响内部元素的特点，所以 BFC 元素也能够用来革除浮动的影响，因为如果不革除，子元素浮动则父元
素高度塌陷，必然会影响前面元素布局和定位，这显然有违 BFC 元素的子元素不会影响内部元素的设定。

 应用 clear 属性革除浮动，其语法如下：clear:none|left|right|both

如果单看字面意思，clear:left 应该是“革除左浮动”，clear:right 应该是“革除右浮动”的意思，实际上，这种解释是有问
题的，因为浮动始终还在，并没有革除。官网对 clear 属性的解释是：“元素盒子的边不能和后面的浮动元素相邻。”，咱们对元素设置 clear 属性是为了防止浮动元素
对该元素的影响，而不是革除掉浮动。还须要留神的一点是 clear 属性指的是元素盒子的边不能和后面的浮动元素相邻，留神这里“后面的”3 个字，也就是 clear 属
性对“前面的”浮动元素是充耳不闻的。思考到 float 属性要么是 left，要么是 right，不可能同时存在，同时因为 clear
属性对“前面的”浮动元素充耳不闻，因而，当 clear:left 无效的时候，clear:right 必然有效，也就是此时 clear:left
等同于设置 clear:both；同样地，clear:right 如果无效也是等同于设置 clear:both。由此可见，clear:left 和 cle
ar:right 这两个申明就没有任何应用的价值，至多在 CSS 世界中是如此，间接应用 clear:both 吧。个别应用伪元素的形式革除浮动

.clear::after{
content:'';
display:table;// 也能够是 'block'，或者是 'list-item'
clear:both;
}

clear 属性只有块级元素才无效的，而::after 等伪元素默认都是内联程度，这就是借助伪元素革除浮动影响时须要设置 disp
lay 属性值的起因。

 革除浮动，触发 hasLayout；zoom 属性是 IE 浏览器的专有属性，它能够设置或检索对象的缩放比例。解决 ie 下比拟奇葩的 bug。譬如外边距（margin）的重叠，浮动革除，触发 ie 的 haslayout 属性等。前因后果大略如下：当设置了 zoom 的值之后，所设置的元素就会就会扩充或者放大，高度宽度就会从新计算了，这里一旦扭转 zoom 值时其实也会发
生从新渲染，使用这个原理，也就解决了 ie 下子元素浮动时候父元素不随着主动扩充的问题。zoom 属性是 IE 浏览器的专有属性，火狐和老版本的 webkit 外围的浏览器都不反对这个属性。然而，zoom 当初曾经被逐渐标
准化，呈现在 CSS3.0 标准草案中。目前非 ie 因为不反对这个属性，它们又是通过什么属性来实现元素的缩放呢？能够通过 css3 外面的动画属性 scale 进行缩放。

 假如你当初正用一台显示设施来浏览这篇文章，同时你也想把它投影到屏幕上，或者打印进去，而显示设施、屏幕投影和打印等这些
媒介都有本人的特点，CSS 就是为文档提供在不同媒介上展现的适配办法

当媒体查问为真时，相干的样式表或款式规定会依照失常的级联规被利用。当媒体查问返回假，标签上带有媒体查问的样式表仍将被
下载（只不过不会被利用）。蕴含了一个媒体类型和至多一个应用宽度、高度和色彩等媒体属性来限度样式表范畴的表达式。CSS3 退出的媒体查问使得无需批改
内容便能够使款式利用于某些特定的设施范畴。

详细资料能够参考：
《CSS3@media 查问》
《响应式布局和自适应布局详解》

SASS（SASS、LESS 没有本质区别，只因为团队前端都是用的 SASS）

 加载性能：（1）css 压缩：将写好的 css 进行打包压缩，能够缩小很多的体积。（2）css 繁多款式：当须要下边距和右边距的时候，很多时候抉择:margin:top0bottom0; 但 margin-bottom:bot
tom;margin-left:left; 执行的效率更高。（3）缩小应用 @import, 而倡议应用 link，因为后者在页面加载时一起加载，前者是期待页面加载实现之后再进行加载。选择器性能：（1）要害选择器（keyselector）。选择器的最初面的局部为要害选择器（即用来匹配指标元素的局部）。CSS 选择符是从右到
左进行匹配的。当应用后辈选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；（2）如果规定领有 ID 选择器作为其要害选择器，则不要为规定减少标签。过滤掉无关的规定（这样款式零碎就不会浪费时间去匹
配它们了）。（3）防止应用通配规定，如 *{} 计算次数惊人！只对须要用到的元素进行抉择。（4）尽量少的去对标签进行抉择，而是用 class。（5）尽量少的去应用后辈选择器，升高选择器的权重值。后辈选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过
三层，更多的应用类来关联每一个标签元素。（6）理解哪些属性是能够通过继承而来的，而后防止对这些属性反复指定规定。渲染性能：（1）谨慎应用高性能属性：浮动、定位。（2）尽量减少页面重排、重绘。（3）去除空规定：{}。空规定的产生起因一般来说是为了预留款式。去除这些空规定无疑能缩小 css 文档体积。（4）属性值为 0 时，不加单位。（5）属性值为浮动小数 0.**，能够省略小数点之前的 0。（6）标准化各种浏览器前缀：带浏览器前缀的在前。规范属性在后。（7）不应用 @import 前缀，它会影响 css 的加载速度。（8）选择器优化嵌套，尽量避免层级过深。（9）css 雪碧图，同一页面相近局部的小图标，方便使用，缩小页面的申请次数，然而同时图片自身会变大，应用时，优劣思考清
楚，再应用。（10）正确应用 display 的属性，因为 display 的作用，某些款式组合会有效，徒增款式体积的同时也影响解析性能。（11）不滥用 web 字体。对于中文网站来说 WebFonts 可能很生疏，国外却很风行。webfonts 通常体积宏大，而且一些浏
览器在下载 webfonts 时会阻塞页面渲染伤害性能。可维护性、健壮性：（1）将具备雷同属性的款式抽离进去，整合并通过 class 在页面中进行应用，进步 css 的可维护性。（2）款式与内容拆散：将 css 代码定义到内部 css 中。

详细资料能够参考：
《CSS 优化、进步性能的办法有哪些？》
《CSS 优化，进步性能的办法》

 款式零碎从要害选择器开始匹配，而后左移查找规定选择器的先人元素。只有选择器的子树始终在工作，款式零碎就会继续左移，直
到和规定匹配，或者是因为不匹配而放弃该规定。试想一下，如果采纳从左至右的形式读取 CSS 规定，那么大多数规定读到最初（最右）才会发现是不匹配的，这样做会费时耗能，最初有很多都是无用的；而如果采取从右向左的形式，那么只有发现最左边选择器不匹配，就能够间接舍弃了，防止了许多有效匹配。

详细资料能够参考：
《探索 CSS 解析原理》

（1）偶数字号绝对更容易和 web 设计的其余局部形成比例关系。比方：当我用了 14px 的注释字号，我可能会在一些中央用 14
×0.5=7px 的 margin，在另一些中央用 14×1.5=21px 的题目字号。（2）浏览器缘故，低版本的浏览器 ie6 会把奇数字体强制转化为偶数，即 13px 渲染为 14px。（3）零碎差异，晚期的 Windows 里，中易宋体点阵只有 12 和 14、15、16px，唯独短少 13px。

详细资料能够参考：
《谈谈网页中应用奇数字体和偶数字体》
《当初网页设计中的为什么少有人用 11px、13px、15px 等奇数的字体？》

margin 是用来隔开元素与元素的间距；padding 是用来隔开元素与内容的距离。margin 用于布局离开元素使元素与元素互不相干。padding 用于元素与内容之间的距离，让内容（文字）与（包裹）元素之间有一段距离。何时该当应用 margin：•须要在 border 外侧增加空白时。•空白处不须要背景（色）时。•高低相连的两个盒子之间的空白，须要互相对消时。如 15px+20px 的 margin，将失去 20px 的空白。何时该当时用 padding：•须要在 border 内测增加空白时。•空白处须要背景（色）时。•高低相连的两个盒子之间的空白，心愿等于两者之和时。如 15px+20px 的 padding，将失去 35px 的空白。

 我的了解是把罕用的 css 款式独自做成 css 文件……通用的和业务相干的分离出来，通用的做成款式模块儿共享，业务相干的，放
进业务相干的库外面做成对应性能的模块儿。

详细资料能够参考：
《CSS 标准 - 分类办法》

all 属性实际上是所有 CSS 属性的缩写，示意，所有的 CSS 属性都怎么怎么，然而，不包含 unicode-bidi 和 direction
这两个 CSS 属性。反对三个 CSS 通用属性值，initial,inherit,unset。initial 是初始值的意思，也就是该元素元素都除了 unicode-bidi 和 direction 以外的 CSS 属性都应用属性的默认初始
值。inherit 是继承的意思，也就是该元素除了 unicode-bidi 和 direction 以外的 CSS 属性都继承父元素的属性值。unset 是勾销设置的意思，也就是以后元素浏览器或用户设置的 CSS 疏忽，而后如果是具备继承个性的 CSS，如 color，则
应用继承值；如果是没有继承个性的 CSS 属性，如 background-color，则应用初始值。

详细资料能够参考：
《简略理解 CSS3 的 all 属性》

 采纳 *{pading:0;margin:0;} 这样的写法益处是写起来很简略，然而是通配符，须要把所有的标签都遍历一遍，当网站较大时，款式比拟多，这样写就大大的增强了网站运行的负载，会使网站加载的时候须要很长一段时间，因而个别大型的网站都有分档次的一
套初始化款式。出于性能的思考，并不是所有标签都会有 padding 和 margin，因而对常见的具备默认 padding 和 margin 的元素初始化即
可，并不需应用通配符 * 来初始化。

（1）内联元素也能够作为“蕴含块”所在的元素；（2）“蕴含块”所在的元素不是父块级元素，而是最近的 position 不为 static 的先人元素或根元素；（3）边界是 paddingbox 而不是 contentbox。

hasLayout 是 IE 特有的一个属性。很多的 IE 下的 cssbug 都与其非亲非故。在 IE 中，一个元素要么本人对本身的内容进
行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的 hasLayout 属性值为 true 时，它负责对本人和可
能的子孙元素进行尺寸计算和定位。尽管这意味着这个元素须要花更多的代价来保护本身和外面的内容，而不是依赖于先人元素来完
成这些工作。

详细资料能够参考：
《CSS 根底篇 –CSS 中 IE 浏览器的 hasLayout，IE 低版本的 bug 本源》
《CSS 魔法堂：hasLayout 原来是这样的！》

 如果是 height 的话，是绝对于蕴含块的高度。如果是 padding 或者 margin 竖直方向的属性则是绝对于蕴含块的宽度。

 原理：有点相似于轮播，整体的元素始终排列上来，假如有 5 个须要展现的全屏页面，那么高度是 500%，只是展现 100%，容器及容
器内的页面取以后可视区高度，同时容器的父级元素 overflow 属性值设为 hidden，通过更改容器可视区的地位来实现全
屏滚动成果。次要是响应鼠标事件，页面通过 CSS 的动画成果，进行挪动。overflow：hidden；transition：all1000msease；

详细资料能够参考：
《js 实现网页全屏切换（平滑过渡），鼠标滚动切换》
《用 ES6 写全屏滚动插件》

 响应式网站设计是一个网站可能兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查问检测不同的设施屏
幕尺寸做解决。页面头部必须有 meta 申明的 viewport。

详细资料能够参考：
《响应式布局原理》
《响应式布局的实现办法和原理》

 视差滚动是指多层背景以不同的速度挪动，造成平面的静止成果，带来十分杰出的视觉体验。

详细资料能够参考：
《如何实现视差滚动成果的网页？》

chrome 表单主动填充后，input 文本框的背景会变成黄色的，通过审查元素能够看到这是因为 chrome 会默认给主动填充的 in
put 表单加上 input:-webkit-autofill 公有属性，而后对其赋予以下款式：{background-color:rgb(250,255,189)!important;
background-image:none!important;
color:rgb(0,0,0)!important;
}

对 chrome 默认定义的 background-color，background-image，color 应用 important 是不能进步其优先级的，然而
其余属性可应用。应用足够大的纯色内暗影来笼罩 input 输入框的黄色背景，解决如下

input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{
-webkit-box-shadow:000px1000pxwhiteinset;
border:1pxsolid#CCC!important;
}

详细资料能够参考：
《去掉 chrome 记住明码后的默认填充款式》
《批改谷歌浏览器 chrome 记住明码后主动填充表单的黄色背景》

 在谷歌下 css 设置字体大小为 12px 及以下时，显示都是一样大小，都是默认 12px。解决办法：（1）能够应用 Webkit 的内核的 -webkit-text-size-adjust 的公有 CSS 属性来解决，只有加了 -webkit-text-size
-adjust:none; 字体大小就不受限制了。然而 chrome 更新到 27 版本之后就不能够用了。所以高版本 chrome 谷歌浏览器
曾经不再反对 -webkit-text-size-adjust 款式，所以要应用时候慎用。（2）还能够应用 css3 的 transform 缩放属性 -webkit-transform:scale(0.5); 留神 -webkit-transform:scale(0.
75); 膨胀的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素，能够应用 display：block/
inline-block/...；（3）应用图片：如果是内容固定不变状况下，应用将小于 12px 文字内容切出做图片，这样不影响兼容也不影响好看。

详细资料能够参考：
《谷歌浏览器不反对 CSS 设置小于 12px 的文字怎么办？》

webkit 内核的公有属性：-webkit-font-smoothing，用于字体抗锯齿，应用后字体看起来会更清晰难受。在 MacOS 测试环境上面设置 -webkit-font-smoothing:antialiased; 然而这个属性仅仅是面向 MacOS，其余操作系统设
置后有效。

详细资料能够参考：
《让字体变的更清晰 CSS 中 -webkit-font-smoothing》

italic 和 oblique 这两个关键字都示意“斜体”的意思。它们的区别在于，italic 是应用以后字体的斜体字体，而 oblique 只是单纯地让文字歪斜。如果以后字体没有对应的斜体字体，则退而求其次，解析为 oblique，也就是单纯形态歪斜。

 设施像素指的是物理像素，个别手机的分辨率指的就是设施像素，一个设施的设施像素是不可变的。css 像素和设施独立像素是等价的，不论在何种分辨率的设施上，css 像素的大小应该是统一的，css 像素是一个绝对单位，它是相
对于设施像素的，一个 css 像素的大小取决于页面缩放水平和 dpr 的大小。dpr 指的是设施像素和设施独立像素的比值，个别的 pc 屏幕，dpr=1。在 iphone4 时，苹果推出了 retina 屏幕，它的 dpr
为 2。屏幕的缩放会扭转 dpr 的值。ppi 指的是每英寸的物理像素的密度，ppi 越大，屏幕的分辨率越大。

详细资料能够参考：
《什么是物理像素、虚构像素、逻辑像素、设施像素，什么又是 PPI,DPI,DPR 和 DIP》
《前端工程师须要明确的「像素」》
《CSS 像素、物理像素、逻辑像素、设施像素比、PPI、Viewport》
《前端开发中像素的概念》

相干知识点：

 如果把挪动设施上浏览器的可视区域设为 viewport 的话，某些网站就会因为 viewport 太窄而显示错乱，所以这些浏览器就决定
默认状况下把 viewport 设为一个较宽的值，比方 980px，这样的话即便是那些为桌面设计的网站也能在挪动浏览器上失常显示了。ppk 把这个浏览器默认的 viewport 叫做 layoutviewport。layoutviewport 的宽度是大于浏览器可视区域的宽度的，所以咱们还须要一个 viewport 来代表浏览器可视区域的大小，ppk 把
这个 viewport 叫做 visualviewport。idealviewport 是最适宜挪动设施的 viewport，idealviewport 的宽度等于挪动设施的屏幕宽度，只有在 css 中把某一元
素的宽度设为 idealviewport 的宽度（单位用 px），那么这个元素的宽度就是设施屏幕的宽度了，也就是宽度为 100% 的成果。i
dealviewport 的意义在于，无论在何种分辨率的屏幕下，那些针对 idealviewport 而设计的网站，不须要用户手动缩放，也
不须要呈现横向滚动条，都能够完满的出现给用户。

答复：

 挪动端一共须要了解三个 viewport 的概念的了解。第一个视口是布局视口，在挪动端显示网页时，因为挪动端的屏幕尺寸比拟小，如果网页应用挪动端的屏幕尺寸进行布局的话，那么整
个页面的布局都会显示错乱。所以挪动端浏览器提供了一个 layoutviewport 布局视口的概念，应用这个视口来对页面进行布局展
示，个别 layoutviewport 的大小为 980px，因而页面布局不会有太大的变动，咱们能够通过拖动和缩放来查看到这个页面。第二个视口指的是视觉视口，visualviewport 指的是挪动设施上咱们可见的区域的视口大小，个别为屏幕的分辨率的大小。visu
alviewport 和 layoutviewport 的关系，就像是咱们通过窗户看里面的风光，视觉视口就是窗户，而里面的风光就是布局视口
中的网页内容。第三个视口是现实视口，因为 layoutviewport 个别比 visualviewport 要大，所以想要看到整个页面必须通过拖动和缩放才
能实现。所以又提出了 idealviewport 的概念，idealviewport 下用户不必缩放和滚动条就可能查看到整个页面，并且页面在
不同分辨率下显示的内容大小雷同。idealviewport 其实就是通过批改 layoutviewport 的大小，让它等于设施的宽度，这个
宽度能够了解为是设施独立像素，因而依据 idealviewport 设计的页面，在不同分辨率的屏幕下，显示应该雷同。

详细资料能够参考：
《挪动前端开发之 viewport 的深刻了解》
《说说挪动前端中 viewport（视口）》
《挪动端适配常识你到底知多少》

 因为挪动端浏览器默认的 viewport 叫做 layoutviewport。在挪动端显示时，因为 layoutviewport 的宽度大于挪动端屏幕
的宽度，所以页面会呈现滚动条左右挪动，fixed 的元素是绝对 layoutviewport 来固定地位的，而不是挪动端屏幕来固定地位的，所以会呈现感觉 fixed 有效的状况。如果想实现 fixed 绝对于屏幕的固定成果，咱们须要扭转的是 viewport 的大小为 idealviewport，能够如下设置：<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sca
le=1.0,user-scalable=no"/>

 少数显示器默认频率是 60Hz，即 1 秒刷新 60 次，所以实践上最小距离为 1 /60*1000ms=16.7ms

 移除空格、应用 margin 负值、应用 font-size:0、letter-spacing、word-spacing

详细资料能够参考：
《去除 inline-block 元素间间距的 N 种办法》

 以下代码可解决这种卡顿的问题：-webkit-overflow-scrolling:touch; 是因为这行代码启用了硬件加速个性，所以滑动很流
畅。

详细资料能够参考：
《解决页面应用 overflow:scroll 在 iOS 上滑动卡顿的问题》

（1）外层 div 应用 position：relative；高度要求自适应的 div 应用 position:absolute;top:100px;bottom:0;
left:0;right:0;（2）应用 flex 布局，设置主轴为竖轴，第二个 div 的 flex-grow 为 1。

详细资料能够参考：
《有一个高度自适应的 div，外面有两个 div，一个高度 100px，心愿另一个填满剩下的高度 (三种计划)》

相干知识点：

（1）BMP，是无损的、既反对索引色也反对间接色的、点阵图。这种图片格式简直没有对数据进行压缩，所以 BMP 格局的图片通常
具备较大的文件大小。（2）GIF 是无损的、采纳索引色的、点阵图。采纳 LZW 压缩算法进行编码。文件小，是 GIF 格局的长处，同时，GIF 格局还具
有反对动画以及通明的长处。但，GIF 格局仅反对 8bit 的索引色，所以 GIF 格局实用于对色调要求不高同时须要文件体积
较小的场景。（3）JPEG 是有损的、采纳间接色的、点阵图。JPEG 的图片的长处，是采纳了间接色，得益于更丰盛的色调，JPEG 非常适合用来
存储照片，与 GIF 相比，JPEG 不适宜用来存储企业 Logo、线框类的图。因为有损压缩会导致图片含糊，而间接色的选用，又会导致图片文件较 GIF 更大。（4）PNG- 8 是无损的、应用索引色的、点阵图。PNG 是一种比拟新的图片格式，PNG- 8 是十分好的 GIF 格局替代者，在可能的
状况下，应该尽可能的应用 PNG- 8 而不是 GIF，因为在雷同的图片成果下，PNG- 8 具备更小的文件体积。除此之外，PNG-8
还反对透明度的调节，而 GIF 并不反对。当初，除非须要动画的反对，否则咱们没有理由应用 GIF 而不是 PNG-8。（5）PNG-24 是无损的、应用间接色的、点阵图。PNG-24 的长处在于，它压缩了图片的数据，使得同样成果的图片，PNG-24 格
式的文件大小要比 BMP 小得多。当然，PNG24 的图片还是要比 JPEG、GIF、PNG- 8 大得多。（6）SVG 是无损的、矢量图。SVG 是矢量图。这意味着 SVG 图片由直线和曲线以及绘制它们的办法组成。当你放大一个 SVG 图
片的时候，你看到的还是线和曲线，而不会呈现像素点。这意味着 SVG 图片在放大时，不会失真，所以它非常适合用来绘制企
业 Logo、Icon 等。（7）WebP 是谷歌开发的一种新图片格式，WebP 是同时反对有损和无损压缩的、应用间接色的、点阵图。从名字就可以看进去它是
为 Web 而生的，什么叫为 Web 而生呢？就是说雷同品质的图片，WebP 具备更小的文件体积。当初网站上充斥了大量的图片，如果可能升高每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而升高拜访提早，晋升拜访体验。•在无损压缩的状况下，雷同品质的 WebP 图片，文件大小要比 PNG 小 26%；•在有损压缩的状况下，具备雷同图片精度的 WebP 图片，文件大小要比 JPEG 小 25%~34%；•WebP 图片格式反对图片透明度，一个无损压缩的 WebP 图片，如果要反对透明度只须要 22% 的分外文件大小。然而目前只有 Chrome 浏览器和 Opera 浏览器反对 WebP 格局，兼容性不太好。

答复：

 我理解到的一共有七种常见的图片的格局。（1）第一种是 BMP 格局，它是无损压缩的，反对索引色和间接色的点阵图。因为它基本上没有进行压缩，因而它的文件体积个别比
较大。（2）第二种是 GIF 格局，它是无损压缩的应用索引色的点阵图。因为应用了 LZW 压缩办法，因而文件的体积很小。并且 GIF 还
反对动画和透明度。但因为它应用的是索引色，所以它实用于一些对色彩要求不高且须要文件体积小的场景。（3）第三种是 JPEG 格局，它是有损压缩的应用间接色的点阵图。因为应用了间接色，色调较为丰盛，个别实用于来存储照片。但
因为应用的是间接色，可能文件的体积绝对于 GIF 格局来说更大。（4）第四种是 PNG- 8 格局，它是无损压缩的应用索引色的点阵图。它是 GIF 的一种很好的代替格局，它也反对透明度的调整，并
且文件的体积绝对于 GIF 格局更小。一般来说如果不是须要动画的状况，咱们都能够应用 PNG- 8 格局代替 GIF 格局。（5）第五种是 PNG-24 格局，它是无损压缩的应用间接色的点阵图。PNG-24 的长处是它应用了压缩算法，所以它的体积比 BMP
格局的文件要小得多，然而绝对于其余的几种格局，还是要大一些。（6）第六种格局是 svg 格局，它是矢量图，它记录的图片的绘制形式，因而对矢量图进行放大和放大不会产生锯齿和失真。它个别
适宜于用来制作一些网站 logo 或者图标之类的图片。（7）第七种格局是 webp 格局，它是反对有损和无损两种压缩形式的应用间接色的点阵图。应用 webp 格局的最大的长处是，在相
同品质的文件下，它领有更小的文件体积。因而它非常适合于网络图片的传输，因为图片体积的缩小，意味着申请工夫的减小，这样会进步用户的体验。这是谷歌开发的一种新的图片格式，目前在兼容性上还不是太好。

详细资料能够参考：
《图片格式那么多，哪种更适宜你？》

（1）宽高判断法。通过创立 image 对象，将其 src 属性设置为 webp 格局的图片，而后在 onload 事件中获取图片的宽高，如
果可能获取，则阐明浏览器反对 webp 格局图片。如果不能获取或者触发了 onerror 函数，那么就阐明浏览器不反对 webp 格
式的图片。（2）canvas 判断办法。咱们能够动静的创立一个 canvas 对象，通过 canvas 的 toDataURL 将设置为 webp 格局，而后判断
返回值中是否含有 image/webp 字段，如果蕴含则阐明反对 WebP，反之则不反对。

详细资料能够参考：
《判断浏览器是否反对 WebP 图片》
《toDataURL()》

 网站向服务器申请的时候，会主动带上 cookie 这样减少表头信息量，使申请变慢。如果动态文件都放在主域名下，那动态文件申请的时候都带有的 cookie 的数据提交给 server 的，十分节约流量，所以不如隔离开，动态资源放 CDN。因为 cookie 有域的限度，因而不能跨域提交申请，故应用非次要域名的时候，申请头中就不会带有 cookie 数据，这样能够升高请
求头的大小，升高申请工夫，从而达到升高整体申请延时的目标。同时这种形式不会将 cookie 传入 WebServer，也缩小了 WebServer 对 cookie 的解决剖析环节，进步了 webserver 的
http 申请的解析速度。

详细资料能够参考：
《CDN 是什么？应用 CDN 有什么劣势？》

 页面加载自上而下当然是先加载款式。写在 body 标签后因为浏览器以逐行形式对 HTML 文档进行解析，当解析到写在尾部的款式
表（外联或写在 style 标签）会导致浏览器进行之前的渲染，期待加载且解析样式表实现之后从新渲染，在 windows 的 IE 下可
能会呈现 FOUC 景象（即款式生效导致的页面闪动问题）

CSS 预处理器定义了一种新的语言，其根本思维是，用一种专门的编程语言，为 CSS 减少了一些编程的个性，将 CSS 作为指标生成
文件，而后开发者就只有应用这种语言进行编码工作。艰深的说，CSS 预处理器用一种专门的编程语言，进行 Web 页面款式设计，然
后再编译成失常的 CSS 文件。预处理器例如：LESS、Sass、Stylus，用来预编译 Sass 或 lesscsssprite，加强了 css 代码的复用性，还有层级、mixin、变量、循环、函数等，具备很不便的 UI 组件模块化开发能力，极大的进步工作效率。CSS 后处理器是对 CSS 进行解决，并最终生成 CSS 的预处理器，它属于狭义上的 CSS 预处理器。咱们很久以前就在用 CSS 后
处理器了，最典型的例子是 CSS 压缩工具（如 clean-css），只不过以前没独自拿出来说过。还有最近比拟火的 Autoprefixer，以 CanIUse 上的浏览器反对数据为根底，主动解决兼容性问题。后处理器例如：PostCSS，通常被视为在实现的样式表中依据 CSS 标准解决 CSS，让其更无效；目前最常做的是给 CSS 属性增加浏
览器公有前缀，实现跨浏览器兼容性的问题。

详细资料能够参考：
《CSS 预处理器和后处理器》

 将一个页面波及到的所有图片都蕴含到一张大图中去，而后利用 CSS 的 background-image，background-repeat，background
-position 的组合进行背景定位。利用 CSSSprites 能很好地缩小网页的 http 申请，从而很好的进步页面的性能；CSSSprites
能缩小图片的字节。长处：缩小 HTTP 申请数，极大地提高页面加载速度
减少图片信息反复度，进步压缩比，缩小图片大小
更换格调不便，只需在一张或几张图片上批改色彩或款式即可实现

毛病：图片合并麻烦
保护麻烦，批改一个图片可能须要从新布局整个图片，款式

 长处：在屏幕分辨率千差万别的时代，只有将 rem 与屏幕分辨率关联起来就能够实现页面的整体缩放，使得在设施上的展示都对立起来了。而且当初浏览器根本都曾经反对 rem 了，兼容性也十分的好。毛病：（1）在奇葩的 dpr 设施上体现成果不太好，比方一些华为的高端机型用 rem 布局会呈现错乱。（2）应用 iframe 援用也会呈现问题。（3）rem 在多屏幕尺寸适配上与以后两大平台的设计哲学不统一。即大屏的呈现到底是为了看得又大又分明，还是为了看的更多的问
题。

详细资料能够参考：
《css3 的字体大小单位 rem 到底好在哪？》
《VW: 是时候放弃 REM 布局了》
《为什么设计稿是 750px》
《应用 Flexible 实现手淘 H5 页面的终端适配》

具体的材料能够参考：
《几种常见的 CSS 布局》

 采纳 metaviewport 的形式

采纳 border-image 的形式

采纳 transform:scale() 的形式

详细资料能够参考：
《怎么画一条 0.5px 的边（更新）》

transition 关注的是 CSSproperty 的变动，property 值和工夫的关系是一个三次贝塞尔曲线。animation 作用于元素自身而不是款式属性，能够应用关键帧的概念，应该说能够实现更自在的动画成果。

详细资料能够参考：
《CSSanimation 与 CSStransition 有何区别？》
《CSS3Transition 和 Animation 区别及比拟》
《CSS 动画简介》
《CSS 动画：animation、transition、transform、translate》

“首选最小宽度”，指的是元素最适宜的最小宽度。东亚文字（如中文）最小宽度为每个汉字的宽度。东方文字最小宽度由特定的间断的英文字符单元决定。并不是所有的英文字符都会组成间断单元，个别会终止于空格（一般空格）、短
横线、问号以及其余非英文字符等。如果想让英文字符和中文一样，每一个字符都用最小宽度单元，能够试试应用 CSS 中的 word-break:break-all。

 对于一般文档流中的元素，百分比高度值要想起作用，其父级必须有一个能够失效的高度值。起因是如果蕴含块的高度没有显式指定（即高度由内容决定），并且该元素不是相对定位，则计算值为 auto，因为解释成了 auto，所以无奈参加计算。应用相对定位的元素会有计算值，即便先人元素的 height 计算为 auto 也是如此。

（1）max-width 会笼罩 width，即便 width 是行类款式或者设置了!important。（2）min-width 会笼罩 max-width，此规定产生在 min-width 和 max-width 抵触的时候。

（1）内容区域（contentarea）。内容区域指一种围绕文字看不见的盒子，其大小仅受字符自身个性管制，实质上是一个字符盒子（characterbox）；然而有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，因而，对于这些
元素，内容区域能够看成元素本身。（2）内联盒子（inlinebox）。“内联盒子”不会让内容成块显示，而是排成一行，这里的“内联盒子”理论指的就是元素的“外在盒
子”，用来决定元素是内联还是块级。该盒子又能够细分为“内联盒子”和“匿名内联盒子”两类。（3）行框盒子（linebox），每一行就是一个“行框盒子”（实线框标注），每个“行框盒子”又是由一个一个“内联盒子”组成的。（4）蕴含块（containingbox），由一行一行的“行框盒子”组成。

“幽灵空白节点”是内联盒模型中十分重要的一个概念，具体指的是：在 HTML5 文档申明中，内联元素的所有解析和渲染体现就如同
每个行框盒子的后面有一个“空白节点”一样。这个“空白节点”永远通明，不占据任何宽度，看不见也无奈通过脚本获取，就如同幽灵
一样，但又确确实实地存在，体现如同文本节点一样，因而，我称之为“幽灵空白节点”。

 通过批改某个属性值出现的内容就能够被替换的元素就称为“替换元素”。因而，<img>、<object>、<video>、<iframe> 或者表
单元素 <textarea> 和 <input> 和 <select> 都是典型的替换元素。替换元素除了内容可替换这一个性以外，还有以下一些个性。（1）内容的外观不受页面上的 CSS 的影响。用业余的话讲就是在款式体现在 CSS 作用域之外。如何更改替换元素自身的外观须要
相似 appearance 属性，或者浏览器本身裸露的一些款式接口，（2）有本人的尺寸。在 Web 中，很多替换元素在没有明确尺寸设定的状况下，其默认的尺寸（不包含边框）是 300 像素×150 像
素，如 <video>、<iframe> 或者 <canvas> 等，也有少部分替换元素为 0 像素，如 <img> 图片，而表单元素的替换元素
的尺寸则和浏览器无关，没有显著的法则。（3）在很多 CSS 属性上有本人的一套体现规定。比拟具备代表性的就是 vertical-align 属性，对于替换元素和非替换元素，ve
rtical-align 属性值的解释是不一样的。比方说 vertical-align 的默认值的 baseline，很简略的属性值，基线之意，被定义为字符 x 的下边缘，而替换元素的基线却被硬生生定义成了元素的下边缘。（4）所有的替换元素都是内联程度元素，也就是替换元素和替换元素、替换元素和文字都是能够在一行显示的。然而，替换元素默认
的 display 值却是不一样的，有的是 inline，有的是 inline-block。

 替换元素的尺寸从内而外分为 3 类：固有尺寸、HTML 尺寸和 CSS 尺寸。（1）固有尺寸指的是替换内容本来的尺寸。例如，图片、视频作为一个独立文件存在的时候，都是有着本人的宽度和高度的。（2）HTML 尺寸只能通过 HTML 原生属性扭转，这些 HTML 原生属性包含 <img> 的 width 和 height 属性、<input> 的 s
ize 属性、<textarea> 的 cols 和 rows 属性等。（3）CSS 尺寸特指能够通过 CSS 的 width 和 height 或者 max-width/min-width 和 max-height/min-height 设置的
尺寸，对应盒尺寸中的 contentbox。这 3 层构造的计算规定具体如下（1）如果没有 CSS 尺寸和 HTML 尺寸，则应用固有尺寸作为最终的宽高。（2）如果没有 CSS 尺寸，则应用 HTML 尺寸作为最终的宽高。（3）如果有 CSS 尺寸，则最终尺寸由 CSS 属性决定。（4）如果“固有尺寸”含有固有的宽高比例，同时仅设置了宽度或仅设置了高度，则元素仍然依照固有的宽高比例显示。（5）如果下面的条件都不合乎，则最终宽度体现为 300 像素，高度为 150 像素。（6）内联替换元素和块级替换元素应用下面同一套尺寸计算规定。

content 属性生成的对象称为“匿名替换元素”。（1）咱们应用 content 生成的文本是无奈选中、无奈复制的，如同设置了 userselect:none 申明个别，然而一般元素的文本
却能够被轻松选中。同时，content 生成的文本无奈被屏幕浏览设施读取，也无奈被搜索引擎抓取，因而，千万不要自以为是
地把重要的文本信息应用 content 属性生成，因为这对可拜访性和 SEO 都很不敌对。（2）content 生成的内容不能左右:empty 伪类。（3）content 动静生成值无奈获取。

margin 的 'auto' 可不是陈设，是具备强烈的计算象征的关键字，用来计算元素对应方向应该取得的残余间距大小。然而触发 mar
gin:auto 计算有一个前提条件，就是 width 或 height 为 auto 时，元素是具备对应方向的主动填充个性的。（1）如果一侧定值，一侧 auto，则 auto 为残余空间大小。（2）如果两侧均是 auto，则平分残余空间。

（1）display 计算值 inline 的非替换元素的垂直 margin 是有效的。对于内联替换元素，垂直 margin 无效，并且没有 ma
rgin 合并的问题。（2）表格中的 <tr> 和 <td> 元素或者设置 display 计算值是 table-cell 或 table-row 的元素的 margin 都是有效的。（3）相对定位元素非定位方位的 margin 值“有效”。（4）定高容器的子元素的 margin-bottom 或者宽度定死的子元素的 margin-right 的定位“生效”。

（1）border-width 却不反对百分比。（2）border-style 的默认值是 none，有一部分人可能会误以为是 solid。这也是单纯设置 border-width 或 border-col
or 没有边框显示的起因。（3）border-style:double 的体现规定：双线宽度永远相等，两头距离±1。（4）border-color 默认色彩就是 color 色值。（5）默认 background 背景图片是绝对于 paddingbox 定位的。

 字母 x 的下边缘（线）就是咱们的基线。x-height 指的就是小写字母 x 的高度，术语形容就是基线和等分线（meanline）（也称作中线，midline）之间的间隔。在 C
SS 世界中，middle 指的是基线往上 1 /2x-height 高度。咱们能够近似了解为字母 x 交叉点那个地位。ex 是 CSS 中的一个绝对单位，指的是小写字母 x 的高度，没错，就是指 x -height。ex 的价值就在其副业上不受字体和字号影
响的内联元素的垂直居中对齐成果。内联元素默认是基线对齐的，而基线就是 x 的底部，而 1ex 就是一个 x 的高度。

（1）对于非替换元素的纯内联元素，其可视高度齐全由 line-height 决定。对于文本这样的纯内联元素，line-height 就是高
度计算的基石，用业余说法就是指定了用来计算行框盒子高度的根底高度。（2）内联元素的高度由固定高度和不固定高度组成，这个不固定的局部就是这里的“行距”。换句话说，line-height 之所以起作
用，就是通过扭转“行距”来实现的。在 CSS 中，“行距”扩散在以后文字的上方和下方，也就是即便是第一行文字，其上方也是
有“行距”的，只不过这个“行距”的高度仅仅是残缺“行距”高度的一半，因而，也被称为“半行距”。（3）行距 =line-height-font-size。（4）border 以及 line-height 等传统 CSS 属性并没有小数像素的概念。如果标注的是文字上边距，则向下取整；如果是文字下
边距，则向上取整。（5）对于纯文本元素，line-height 间接决定了最终的高度。然而，如果同时有替换元素，则 line-height 只能决定最小高度。（6）对于块级元素，line-height 对其自身是没有任何作用的，咱们平时扭转 line-height，块级元素的高度跟着变动实际上是
通过扭转块级元素外面内联级别元素占据的高度实现的。（7）line-height 的默认值是 normal，还反对数值、百分比值以及长度值。为数值类型时，其最终的计算值是和以后 font-si
ze 相乘后的值。为百分比值时，其最终的计算值是和以后 font-size 相乘后的值。为长度值时原意不变。（8）如果应用数值作为 line-height 的属性值，那么所有的子元素继承的都是这个值；然而，如果应用百分比值或者长度值作为
属性值，那么所有的子元素继承的是最终的计算值。（9）无论内联元素 line-height 如何设置，最终父级元素的高度都是由数值大的那个 line-height 决定的。（10）只有有“内联盒子”在，就肯定会有“行框盒子”，就是每一行内联元素里面包裹的一层看不见的盒子。而后，重点来了，在每个“行框盒子”后面有一个宽度为 0 的具备该元素的字体和行高属性的看不见的“幽灵空白节点”。

（1）vertical-align 的默认值是 baseline，即基线对齐，而基线的定义是字母 x 的下边缘。因而，内联元素默认都是沿着字
母 x 的下边缘对齐的。对于图片等替换元素，往往应用元素自身的下边缘作为基线。：一个 inline-block 元素，如果外面
没有内联元素，或者 overflow 不是 visible，则该元素的基线就是其 margin 底边缘；否则其基线就是元素外面最初一行
内联元素的基线。（2）vertical-align:top 就是垂直上边缘对齐，如果是内联元素，则和这一行地位最高的内联元素的顶部对齐；如果 display
计算值是 table-cell 的元素，咱们无妨脑补成 <td> 元素，则和 <tr> 元素上边缘对齐。（3）vertical-align:middle 是两头对齐，对于内联元素，元素的垂直中心点和行框盒子基线往上 1 /2x-height 处对齐。对
于 table-cell 元素，单元格填充盒子绝对于里面的表格行居中对齐。（4）vertical-align 反对数值属性，依据数值的不同，绝对于基线往上或往下偏移，如果是负值，往下偏移，如果是正值，往上
偏移。（5）vertical-align 属性的百分比值则是绝对于 line-height 的计算值计算的。（6）vertical-align 起作用是有前提条件的，这个前提条件就是：只能利用于内联元素以及 display 值为 table-cell 的元
素。（7）table-cell 元素设置 vertical-align 垂直对齐的是子元素，然而其作用的并不是子元素，而是 table-cell 元素本身。

（1）一个设置了 overflow:hidden 申明的元素，假如同时存在 border 属性和 padding 属性，则当子元素内容超出容器宽度
高度限制的时候，剪裁的边界是 borderbox 的内边缘，而非 paddingbox 的内边缘。（2）HTML 中有两个标签是默认能够产生滚动条的，一个是根元素 <html>，另一个是文本域 <textarea>。（3）滚动条会占用容器的可用宽度或高度。（4）元素设置了 overflow:hidden 申明，外面内容高度溢出的时候，滚动仍然存在，仅仅滚动条不存在！

 没有设置 left/top/right/bottom 属性值的相对定位称为“无依赖相对定位”。无依赖相对定位其定位的地位和没有设置 position:absolute 时候的地位相干。

（1）如果 overflow 不是定位元素，同时相对定位元素和 overflow 容器之间也没有定位元素，则 overflow 无奈对 absolute
元素进行剪裁。（2）如果 overflow 的属性值不是 hidden 而是 auto 或者 scroll，即便相对定位元素高宽比 overflow 元素高宽还要大，也
都不会呈现滚动条。（3）overflow 元素本身 transform 的时候，Chrome 和 Opera 浏览器下的 overflow 剪裁是有效的。

 所谓“可拜访性暗藏”，指的是尽管内容肉眼看不见，然而其余辅助设施却可能进行辨认和拜访的暗藏。clip 剪裁被我称为“最佳可拜访性暗藏”的另外一个起因就是，它具备更强的广泛适应性，任何元素、任何场景都能够无障碍应用。

（1）绝对定位元素的 left/top/right/bottom 的百分比值是绝对于蕴含块计算的，而不是本身。留神，尽管定位位移是绝对本身，然而百分比值的计算值不是。（2）top 和 bottom 这两个垂直方向的百分比值计算跟 height 的百分比值是一样的，都是相对高度计算的。同时，如果蕴含块的高度是 auto，那么计算值是 0，偏移有效，也就是说，如果父元素没有设定高度或者不是“格式化高度”，那么 relative 相似 top:20% 的代码等同于 top:0。（3）当绝对定位元素同时利用对抗方向定位值的时候，也就是 top/bottom 和 left/right 同时应用的时候，只有一个方向的定位属性会起作用。而谁起作用则是与文档流的程序无关的，默认的文档流是自上而下、从左往右，因而 top/bottom 同时应用的时候，bottom 生效；left/right 同时应用的时候，right 生效。

 层叠上下文，英文称作 stackingcontext，是 HTML 中的一个三维的概念。如果一个元素含有层叠上下文，咱们能够了解为这个元
素在 z 轴上就“出人头地”。层叠上下文元素有如下个性：（1）层叠上下文的层叠程度要比一般元素高（起因前面会阐明）。（2）层叠上下文能够阻断元素的混合模式。（3）层叠上下文能够嵌套，外部层叠上下文及其所有子元素均受制于内部的“层叠上下文”。（4）每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变动或渲染的时候，只须要思考后辈元素。（5）每个层叠上下文是自成体系的，当元素产生层叠的时候，整个元素被认为是在父层叠上下文的层叠程序中。层叠上下文的创立：（1）页面根元素天生具备层叠上下文，称为根层叠上下文。根层叠上下文指的是页面根元素，能够看成是 <html> 元素。因而，页面中所有的元素肯定处于至多一个“层叠结界”中。（2）对于 position 值为 relative/absolute 以及 Firefox/IE 浏览器（不包含 Chrome 浏览器）下含有 position:fixed 申明的定位元素，当其 z -index 值不是 auto 的时候，会创立层叠上下文。Chrome 等 WebKit 内核浏览器下，position:fixed 元素人造层叠上下文元素，毋庸 z -index 为数值。依据我的测试，目前 IE 和 Firefox 仍是老套路。（3）其余一些 CSS3 属性，比方元素的 opacity 值不是 1。

 层叠程度，英文称作 stackinglevel，决定了同一个层叠上下文中元素在 z 轴上的显示程序。不言而喻，所有的元素都有层叠程度，包含层叠上下文元素，也包含一般元素。然而，对一般元素的层叠程度探讨只局限在以后层叠上
下文元素中。

层叠程序，英文称作 stackingorder，示意元素产生层叠时有着特定的垂直显示程序。

（1）谁大谁上：当具备显著的层叠程度标识的时候，如失效的 z -index 属性值，在同一个层叠上下文畛域，层叠程度值大的那一个笼罩小的那一个。（2）青出于蓝：当元素的层叠程度统一、层叠程序雷同的时候，在 DOM 流中处于前面的元素会笼罩后面的元素。

 如果应用数值作为 font-weight 属性值，必须是 100～900 的整百数。因为这里的数值仅仅是表面长得像数值，实际上是一个具备特定含意的关键字，并且这里的数值关键字和字母关键字之间是有对应关系的。

（1）text-indent 仅对第一行内联盒子内容无效。（2）非替换元素以外的 display 计算值为 inline 的内联元素设置 text-indent 值有效，如果计算值 inline-block/inli
ne-table 则会失效。（3）<input> 标签按钮 text-indent 值有效。（4）<button> 标签按钮 text-indent 值无效。（5）text-indent 的百分比值是绝对于以后元素的“蕴含块”计算的，而不是以后元素。

letter-spacing 能够用来控制字符之间的间距，这里说的“字符”包含英文字母、汉字以及空格等。letter-spacing 具备以下一些个性。（1）继承性。（2）默认值是 normal 而不是 0。尽管说失常状况下，normal 的计算值就是 0，但两者还是有差异的，在有些场景下，letter-spacing 会调整 normal 的计算值以实现更好的版面布局。（3）反对负值，且值足够大的时候，会让字符造成重叠，甚至反向排列。（4）和 text-indent 属性一样，无论值多大或多小，第一行肯定会保留至多一个字符。（5）反对小数值，即便 0.1px 也是反对的。（6）暂不反对百分比值。

letter-spacing 作用于所有字符，但 word-spacing 仅作用于空格字符。换句话说，word-spacing 的作用就是减少空格的间隙
宽度。

white-space 属性申明了如何解决元素内的空白字符，这类空白字符包含 Space（空格）键、Enter（回车）键、Tab（制表符）键产生的空白。因而，white-space 能够决定图文内容是否在一行显示（回车空格是否失效），是否显示大段间断空白（空格是否
失效）等。其属性值包含上面这些。•normal：合并空白字符和换行符。•pre：空白字符不合并，并且内容只在有换行符的中央换行。•nowrap：该值和 normal 一样会合并空白字符，但不容许文本盘绕。•pre-wrap：空白字符不合并，并且内容只在有换行符的中央换行，同时容许文本盘绕。•pre-line：合并空白字符，但只在有换行符的中央换行，容许文本盘绕。

相干知识点：

 依据测试，一个元素如果 display 计算值为 none，在 IE 浏览器下（IE8～IE11，更高版本不确定）仍然会发送图片申请，Fire
fox 浏览器不会，至于 Chrome 和 Safari 浏览器则仿佛更加智能一点：如果暗藏元素同时又设置了 background-image，则图片
仍然会去加载；如果是父元素的 display 计算值为 none，则背景图不会申请，此时浏览器或者释怀地认为这个背景图临时是不会使
用的。如果不是 background-image，而是 <img> 元素，则设置 display:none 在所有浏览器下仍旧都会申请图片资源。还须要留神的是如果设置的款式没有对应的元素，则 background-image 也不会加载。hover 状况下的 background-image，在触
发时加载。

答复：

-（1）元素的背景图片

- 元素自身设置 display:none，会申请图片 - 父级元素设置 display:none，不会申请图片 - 款式没有元素应用，不会申请
-:hover 款式下，触发时申请

-（2）img 标签图片任何状况下都会申请图片

详细资料能够参考：
《CSS 管制前端图片 HTTP 申请的各种状况示例》

/* 单行文本溢出 */
p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 多行文本溢出 */
p {
  position: relative;
  line-height: 1.5em;
  /* 高度为须要显示的行数 * 行高，比方这里咱们显示两行，则为 3 */
  height: 3em;
  overflow: hidden;
}

p:after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
}

详细资料能够参考：
《【CSS/JS】如何实现单行/多行文本溢出的省略》
《CSS 多行文本溢出省略显示》

-（1）应用 display:none; 暗藏元素，渲染树不会蕴含该渲染对象，因而该元素不会在页面中占据地位，也不会响应绑定的监听事件。

-（2）应用 visibility:hidden; 暗藏元素。元素在页面中仍占据空间，然而不会响应绑定的监听事件。

-（3）应用 opacity:0; 将元素的透明度设置为 0，以此来实现元素的暗藏。元素在页面中依然占据空间，并且可能响应元素绑定的监听事件。

-（4）通过应用相对定位将元素移除可视区域内，以此来实现元素的暗藏。

-（5）通过 z-index 负值，来使其余元素遮盖住该元素，以此来实现暗藏。

-（6）通过 clip/clip-path 元素裁剪的办法来实现元素的暗藏，这种办法下，元素仍在页面中占据地位，然而不会响应绑定的监听事件。

-（7）通过 transform:scale(0,0) 来将元素缩放为 0，以此来实现元素的暗藏。这种办法下，元素仍在页面中占据地位，然而不会响应绑定的监听事件。

详细资料能够参考：
《CSS 暗藏元素的八种办法》

 利用相对定位实现 body {
  padding: 0;
  margin: 0;
}

.header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100px;
  background: red;
}

.container {
  position: absolute;
  top: 100px;
  bottom: 100px;
  width: 100%;
  background: green;
}

.footer {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;
  background: red;
}

利用 flex 布局实现 html,
body {height: 100%;}

body {
  display: flex;
  padding: 0;
  margin: 0;
  flex-direction: column;
}

.header {
  height: 100px;
  background: red;
}

.container {
  flex-grow: 1;
  background: green;
}

.footer {
  height: 100px;
  background: red;
}

详细资料能够参考：
《css 实现高低固定两头自适应布局》

相干材料：

/* 两栏布局个别指的是页面中一共两栏，右边固定，左边自适应的布局，一共有四种实现的形式。*/
/* 以右边宽度固定为 200px 为例 */

/*（1）利用浮动，将右边元素宽度设置为 200px，并且设置向左浮动。将左边元素的 margin-left 设置为 200px，宽度设置为 auto（默认为 auto，撑满整个父元素）。*/
.outer {height: 100px;}

.left {
  float: left;

  height: 100px;
  width: 200px;

  background: tomato;
}

.right {
  margin-left: 200px;

  width: auto;
  height: 100px;

  background: gold;
}

/*（2）第二种是利用 flex 布局，将右边元素的放大和放大比例设置为 0，根底大小设置为 200px。将左边的元素的放大比例设置为 1，放大比例设置为 1，根底大小设置为 auto。*/
.outer {
  display: flex;

  height: 100px;
}

.left {
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: 200px;

  background: tomato;
}

.right {
  flex: auto;
  /*11auto*/

  background: gold;
}

/*（3）第三种是利用相对定位布局的形式，将父级元素设置绝对定位。右边元素设置为 absolute 定位，并且宽度设置为
200px。将左边元素的 margin-left 的值设置为 200px。*/
.outer {
  position: relative;

  height: 100px;
}

.left {
  position: absolute;

  width: 200px;
  height: 100px;

  background: tomato;
}

.right {
  margin-left: 200px;
  height: 100px;

  background: gold;
}

/*（4）第四种还是利用相对定位的形式，将父级元素设置为绝对定位。右边元素宽度设置为 200px，左边元素设置为相对定位，右边定位为 200px，其余方向定位为 0。*/
.outer {
  position: relative;

  height: 100px;
}

.left {
  width: 200px;
  height: 100px;

  background: tomato;
}

.right {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 200px;

  background: gold;
}

《两栏布局 demo 展现》

答复：

两栏布局个别指的是页面中一共两栏，右边固定，左边自适应的布局，一共有四种实现的形式。

以右边宽度固定为 200px 为例

-（1）利用浮动，将右边元素宽度设置为 200px，并且设置向左浮动。将左边元素的 margin-left 设置为 200px，宽度设置为 auto（默认为 auto，撑满整个父元素）。

-（2）第二种是利用 flex 布局，将右边元素的放大和放大比例设置为 0，根底大小设置为 200px。将左边的元素的放大比例设置为 1，放大比例设置为 1，根底大小设置为 auto。

-（3）第三种是利用相对定位布局的形式，将父级元素设置绝对定位。右边元素设置为 absolute 定位，并且宽度设置为 200px。将左边元素的 margin-left 的值设置为 200px。

-（4）第四种还是利用相对定位的形式，将父级元素设置为绝对定位。右边元素宽度设置为 200px，左边元素设置为相对定位，右边定位为 200px，其余方向定位为 0。

相干材料：

/* 三栏布局个别指的是页面中一共有三栏，左右两栏宽度固定，两头自适应的布局，一共有五种实现形式。这里以右边宽度固定为 100px，左边宽度固定为 200px 为例。*/

/*（1）利用相对定位的形式，左右两栏设置为相对定位，两头设置对应方向大小的 margin 的值。*/
.outer {
  position: relative;
  height: 100px;
}

.left {
  position: absolute;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: absolute;
  top: 0;
  right: 0;

  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
  background: lightgreen;
}

/*（2）利用 flex 布局的形式，左右两栏的放大和放大比例都设置为 0，根底大小设置为固定的大小，两头一栏设置为 auto*/
.outer {
  display: flex;
  height: 100px;
}

.left {
  flex: 00100px;
  background: tomato;
}

.right {
  flex: 00200px;
  background: gold;
}

.center {
  flex: auto;
  background: lightgreen;
}

/*（3）利用浮动的形式，左右两栏设置固定大小，并设置对应方向的浮动。两头一栏设置左右两个方向的 margin 值，留神这种形式，两头一栏必须放到最初。*/
.outer {height: 100px;}

.left {
  float: left;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: right;
  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  height: 100px;
  margin-left: 100px;
  margin-right: 200px;
  background: lightgreen;
}

/*（4）双飞翼布局，利用浮动和负边距来实现。父级元素设置左右的 pedding，三列均设置向左浮动，两头一列放在最后面，宽度设置为父级元素的宽度，因而前面两列都被挤到了下一行，通过设置 margin 负值将其挪动到上一行，再利用绝对定位，定位到两边。*/
.outer {
  height: 100px;
  padding-left: 100px;
  padding-right: 200px;
}

.left {
  position: relative;
  left: -100px;

  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: relative;
  left: 200px;

  float: right;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}

/*（5）双飞翼布局，双飞翼布局绝对于圣杯布局来说，左右地位的保留是通过两头列的 margin 值来实现的，而不是通过父元
素的 pedding 来实现的。实质上来说，也是通过浮动和外边距负值来实现的。*/

.outer {height: 100px;}

.left {
  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: left;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.wrapper {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
}

《三栏布局 demo 展现》

答复：

 三栏布局个别指的是页面中一共有三栏，左右两栏宽度固定，两头自适应的布局，一共有五种实现形式。这里以右边宽度固定为 100px，左边宽度固定为 200px 为例。（1）利用相对定位的形式，左右两栏设置为相对定位，两头设置对应方向大小的 margin 的值。（2）利用 flex 布局的形式，左右两栏的放大和放大比例都设置为 0，根底大小设置为固定的大小，两头一栏设置为 auto。（3）利用浮动的形式，左右两栏设置固定大小，并设置对应方向的浮动。两头一栏设置左右两个方向的 margin 值，留神这种形式，两头一栏必须放到最初。（4）圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 pedding，三列均设置向左浮动，两头一列放在最后面，宽度设置为父级元素的宽度，因而前面两列都被挤到了下一行，通过设置 margin 负值将其挪动到上一行，再利用绝对定位，定位到两边。双飞翼布局两头列的宽度不能小于两边任意列的宽度，而双飞翼布局则不存在这个问题。（5）双飞翼布局，双飞翼布局绝对于圣杯布局来说，左右地位的保留是通过两头列的 margin 值来实现的，而不是通过父元素的 pedding 来实现的。实质上来说，也是通过浮动和外边距负值来实现的。

/*1. 第一种形式是利用 vw 来实现 */
.square {
  width: 10%;
  height: 10vw;
  background: tomato;
}

/*2. 第二种形式是利用元素的 margin/padding 百分比是绝对父元素 width 的性质来实现 */
.square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}

/*3. 第三种形式是利用子元素的 margin-top 的值来实现的 */
.square {
  width: 30%;
  overflow: hidden;
  background: yellow;
}

.square::after {
  content: "";
  display: block;
  margin-top: 100%;
}

《自适应正方形 demo 展现》

/* 三角形的实现原理是利用了元素边框连接处的等分原理。*/
.triangle {
  width: 0;
  height: 0;
  border-width: 100px;
  border-style: solid;
  border-color: tomatotransparenttransparenttransparent;
}

《三角形 demo 展现》

/* 实现原理参考自适应正方形和程度居中形式 */
.box {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;

  width: 10%;
  height: 0;
  padding-top: 20%;
  background: tomato;
}

CSS 面试知识点总结

1. 介绍一下规范的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？

2.CSS 选择符有哪些？

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

4. 伪类与伪元素的区别

5.CSS 中哪些属性能够继承？

6.CSS 优先级算法如何计算？

7. 对于伪类 LVHA 的解释?

8.CSS3 新增伪类有那些？

9. 如何居中 div？

10.display 有哪些值？阐明他们的作用。

11.position 的值 relative 和 absolute 定位原点是？

12.CSS3 有哪些新个性？（依据我的项目答复）

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

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

15. 一个满屏品字布局如何设计?

16.CSS 多列等高如何实现？

17. 常常遇到的浏览器的兼容性有哪些？起因，解决办法是什么，罕用 hack 的技巧？

18.li 与 li 之间有看不见的空白距离是什么起因引起的？有什么解决办法？

19. 为什么要初始化 CSS 款式？

20. 什么是蕴含块，对于蕴含块的了解?

21.CSS 里的 visibility 属性有个 collapse 属性值是干嘛用的？在不同浏览器下当前什么区别？

22.width:auto 和 width:100% 的区别

23. 相对定位元素与非相对定位元素的百分比计算的区别

24. 简略介绍应用图片 base64 编码的长处和毛病。

25.’display’、’position’ 和 ’float’ 的互相关系？

26.margin 重叠问题的了解。

27. 对 BFC 标准（块级格式化上下文：blockformattingcontext）的了解？

28.IFC 是什么？

29. 请解释一下为什么须要革除浮动？革除浮动的形式

30. 应用 clear 属性革除浮动的原理？

31.zoom:1 的革除浮动原理?

32. 挪动端的布局用过媒体查问吗？

33. 应用 CSS 预处理器吗？喜爱哪个？

34.CSS 优化、进步性能的办法有哪些？

35. 浏览器是怎么解析 CSS 选择器的？

36. 在网页中应该应用奇数还是偶数的字体？为什么呢？

37.margin 和 padding 别离适宜什么场景应用？

38. 抽离款式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]

39. 简略说一下 css3 的 all 属性。

40. 为什么不倡议应用统配符初始化 css 款式。

41.absolute 的 containingblock（蕴含块）计算形式跟失常流有什么不同？

42. 对于 hasLayout 的了解？

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

44. 全屏滚动的原理是什么？用到了 CSS 的哪些属性？（待深刻实际）

45. 什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE？（待深刻理解）

46. 视差滚动成果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只呈现一次别离怎么做？）

47. 如何批改 chrome 记住明码后主动填充表单的黄色背景？

48. 怎么让 Chrome 反对小于 12px 的文字？

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

50.font-style 属性中 italic 和 oblique 的区别？

51. 设施像素、css 像素、设施独立像素、dpr、ppi 之间的区别？

52.layoutviewport、visualviewport 和 idealviewport 的区别？

53.position:fixed; 在 android 下有效怎么解决？

54. 如果须要手动写动画，你认为最小工夫距离是多久，为什么？（阿里）

55. 如何让去除 inline-block 元素间间距？

56.overflow:scroll 时不能平滑滚动的问题怎么解决？

57. 有一个高度自适应的 div，外面有两个 div，一个高度 100px，心愿另一个填满剩下的高度。

58.png、jpg、gif 这些图片格式解释一下，别离什么时候用。有没有理解过 webp？

59. 浏览器如何判断是否反对 webp 格局图片

60. 什么是 Cookie 隔离？（或者说：申请资源的时候不要让它带 cookie 怎么做）

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

62. 什么是 CSS 预处理器 / 后处理器？

63. 论述一下 CSSSprites

64. 应用 rem 布局的优缺点？

65. 几种常见的 CSS 布局

66. 画一条 0.5px 的线

67.transition 和 animation 的区别

68. 什么是首选最小宽度？

69. 为什么 height:100% 会有效？

70.min-width/max-width 和 min-height/max-height 属性间的笼罩规定？

71. 内联盒模型基本概念

72. 什么是幽灵空白节点？

73. 什么是替换元素？

74. 替换元素的计算规定？

75.content 与替换元素的关系？

76.margin:auto 的填充规定？

77.margin 有效的情景

78.border 的特殊性？