css复习汇总

技术 / 前端 / 面经笔经
Word count: 18.2k   |   Reading time≈ 66 min

CSS 面试知识点总结

本文搬运自CavsZhouyou的github

本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！

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

（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盒模型。

2.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）通配符选择器（*）

3.::before 和:after 中双冒号和单冒号有什么区别？

在css3中使用单冒号来表示伪类，用双冒号来表示伪元素。但是为了兼容已有的伪元素的写法，在一些浏览器中也可以使用单冒号来表示伪元素。

伪类一般匹配的是元素的一些特殊状态，如hover、link等，而伪元素一般匹配的特殊的位置，比如after、before等。

4.伪类与伪元素的区别

伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的
元素时，我们可以通过:hover来描述这个元素的状态。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

5.CSS 中哪些属性可以继承？

（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等属性

回答简版

一般具有继承性的属性有，字体相关的属性，font-size和font-weight等。文本相关的属性，color和text-align等。
表格的一些布局属性、列表属性如list-style等。还有光标属性cursor[ˈkɜːsə(r)]
、元素可见性visibility。

当一个属性不是继承属性的时候，我们也可以通过将它的值设置为inherit来使它从父元素那获取同名的属性值来继承。

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

使用特殊性进行计算

第一个等级是行内样式，为1000，第二个等级是id选择器，为100，第三个等级是类选择器、伪类选择器和属性选择器，为10，第四个等级是元素选择器和伪元素选择器，为1。规则中每出现一个选择器，就将它的特殊性进行叠加，这个叠加只限于对应的等级的叠加，不会产生进位

如果两个规则的特殊性值相等的时候，那么就会根据它们引
入的顺序，后出现的规则的优先级最高。

7.关于四种伪类 LVHA 顺序的解释?

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可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，
也就不存在覆盖的问题。

8.CSS3 新增伪类有那些？

（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单选框或复选框被选中。

9.如何居中 div？

回答总结
一般常见的几种居中的方法有：
对于宽高固定的元素

（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设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。

对于宽高不定的元素，上面的后面两种方法，可以实现元素的垂直和水平的居中。

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

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

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

relative定位的元素，是相对于元素本身的正常位置来进行定位的。

absolute定位的元素，是相对于它的第一个position值不为static的祖先元素的paddingbox来进行定位的,也就是说在计算定位距离的时候，padding的值也要算进去。

12.CSS3 有哪些新特性？（根据项目回答）

新增各种CSS选择器 :not(.input)：所有class不是“input”的节点
圆角 （border-radius:8px）
多列布局 （multi-columnlayout）
阴影和反射 （Shadow\Reflect）
文字特效 （text-shadow）
文字渲染 （Text-decoration）
线性渐变 （gradient）
旋转 （transform）
缩放，定位，倾斜，动画，多背景

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

flex布局是CSS3新增的一种布局方式，我们可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。

一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的交叉轴。我们可以使用flex-direction来指定主轴的方向。
我们可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还
可以使用flex-wrap来规定当一行排列不下时的换行方式。

对于容器中的项目，我们可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例。还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。

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

采用的是相邻边框连接处的均分原理。将元素的宽高设为0，只设置border，把任意三条边隐藏掉（颜色设为transparent），剩下的就是一个三角形。

1
2
3
4
5
6
7
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparenttransparentredtransparent;
}

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

上面的div宽100%，
下面的两个div分别宽50%，
然后用float或者inline使其不换行即可

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

（1）利用padding-bottom|margin-bottom正负值相抵，不会影响页面布局的特点。设置父容器设置超出隐藏（overflow:hidden），这样父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则
父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。

1
2
margin: 0 10px -9999px 0;
padding-bottom: 9999px;

（2）利用table-cell所有单元格高度都相等的特性，来实现多列等高。

?（3）利用flex布局中项目align-items属性默认为stretch，如果项目未设置高度或设为auto，将占满整个容器的高度
的特性，来实现多列等高。

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

png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8

浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一,，但是全局效率很低，一般是如下这样解决：

1
2
3
4
body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{
margin:0;
padding:0;
}

IE下,event对象有x,y属性,但是没有pageX,pageY属性

Firefox下,event对象有pageX,pageY属性,但是没有x,y属性

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

浏览器会把inline元素间的空白字符（空格、换行、Tab等）渲染成一个空格。而为了美观。我们通常是一个<li>放在一行，这导致<li>换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。

解决方案

（1）为<li>设置float:left。不足：有些容器是不能设置浮动，如左右切换的焦点图等。

（2）将所有<li>写在同一行。不足：代码不美观。

（3）将<ul>内的字符尺寸直接设为0，即font-size:0。不足：<ul>中的其他字符尺寸也被设为0，需要额外重新设定其他
字符尺寸，且在Safari浏览器依然会出现空白间隔。

?（4）消除<ul>的字符间隔letter-spacing:-8px，不足：这也设置了

  • 内的字符间隔，因此需要将
  • 内的字符
    间隔设为默认letter-spacing:normal。

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

    因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

    当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

    20.什么是包含块，对于包含块的理解?

    包含块（containingblock）就是元素用来计算和定位的一个框。

    不同的定位方式，包含块的选择也不一样

    （1）根元素（很多场景下可以看成是<html>）被称为“初始包含块”，其尺寸等同于浏览器可视窗口的大小。

    （2）对于其他元素，如果该元素的position是relative或者static，则“包含块”由其最近的块容器祖先盒的contentbox边界形成。

    （3）如果元素position:fixed，则“包含块”是“初始包含块”。

    （4）如果元素position:absolute，则“包含块”由最近的position不为static的祖先元素的paddingbox建立

    CSS 里的 visibility 属性有个 collapse 属性值是干嘛用的

    （1）对于一般的元素，它的表现跟visibility：hidden;是一样的。元素是不可见的，但此时仍占用页面空间。
    （2）但例外的是，如果这个元素是table相关的元素，例如table行，tablegroup，table列，tablecolumngroup，它的表现却跟display:none一样，也就是说，它们占用的空间也会释放。

    不同浏览器下的表现

    在谷歌浏览器里，使用collapse值和使用hidden值没有什么区别。

    在火狐浏览器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置。

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

    width:100%会使元素box的宽度等于父元素的contentbox的宽度。

    width:auto会使元素撑满整个父元素，margin、border、padding、content区域会自动分配水平空间。

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

    绝对定位元素的宽高百分比是相对于临近的position不为static的祖先元素的paddingbox来计算的。

    非绝对定位元素的宽高百分比则是相对于父元素的contentbox来计算的。

    24.简单介绍使用图片 base64 编码的优点和缺点。

    使用base64的优点是：

    （1）减少一个图片的HTTP请求

    使用base64的缺点是：

    （1）根据base64的编码原理，编码后的大小会比原文件大小大1/3，如果把大图片编码到html/css中，不仅会造成文件体积的增加，影响文件的加载速度，还会增加浏览器对html或css文件解析渲染的时间。

    （2）使用base64无法直接缓存，要缓存只能缓存包含base64的文件，比如HTML或者CSS，这相比域直接缓存图片的效果要差很多。

    （3）兼容性的问题，ie8以前的浏览器不支持。

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

    （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’特性值同设置值。

    这从另一个侧面说明了一个问题：浮动或绝对定位的元素，只能是块元素或表格。

    26.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、padding或者高度来解决这个问题。

    27.对 BFC 规范（块级格式化上下文：blockformattingcontext）的理解？

    BFC指的是块级格式化上下文，一个元素形成了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)

    28.浮动带来的影响

    浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。

    清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。

    29.如何清除浮动

    （1）使用clear属性清除浮动。

    （2）使用BFC块级格式化上下文来清除浮动。

    因为BFC元素不会影响外部元素的特点，所以BFC元素也可以用来清除浮动的影响，因为如果不清除，子元素浮动则父元素高度塌陷，必然会影响后面元素布局和定位，这显然有违BFC元素的子元素不会影响外部元素的设定。

    30.使用 clear 属性清除浮动的原理？

    官方对clear属性的解释是：“元素盒子的边不能和前面的浮动元素相邻。”，

    所以clear:both并不是清除浮动，而是清除浮动元素对当前元素所造成的影响，浮动的盒子依旧是部分脱离文档流的

    还需要注意的一点是clear属性指的是元素盒子的边不能和前面的浮动元素相邻，注意这里“前面的”3个字，也就是clear属性对“后面的”浮动元素是不闻不问的。考虑到float属性要么是left，要么是right，不可能同时存在，同时由于clear属性对“后面的”浮动元素不闻不问，因此，当clear:left有效的时候，clear:right必定无效，也就是此时clear:left等同于设置clear:both；同样地，clear:right如果有效也是等同于设置clear:both。由此可见，clear:left和clear:right这两个声明就没有任何使用的价值，至少在CSS世界中是如此，直接使用clear:both吧

    一般使用伪元素的方式清除浮动

    1
    2
    3
    4
    5
    .clear::after{
      content:'';
      display:table;//也可以是'block'，或者是'list-item'
      clear:both;
    }

    clear属性只有块级元素才有效的，而::after等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时需要设置disp
    lay属性值的原因。

    clear-both深度解析

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

    清除浮动，触发hasLayout；

    zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。譬如外边距（margin）的重叠，浮动清除，触发ie的haslayout属性等。

    来龙去脉大概如下：
    当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

    zoom属性是IE浏览器的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性。然而，zoom现在已经被逐步标准化，出现在CSS3.0规范草案中。

    目前非ie由于不支持这个属性，它们又是通过什么属性来实现元素的缩放呢？可以通过css3里面的动画属性scale进行缩放。

    32.移动端的适配方案

    （1）通过媒体查询的方式即CSS3的meida queries
    （2）以天猫首页为代表的 flex 弹性布局
    （3）以淘宝首页为代表的 rem+viewport缩放
    （4）rem 方式

    33.关于媒体查询

    当媒体查询为真时，相关的样式表或样式规则会按照正常的级联规被应用。当媒体查询返回假，标签上带有媒体查询的样式表仍将被下载（只不过不会被应用）。

    包含了一个媒体类型和至少一个使用宽度、高度和颜色等媒体属性来限制样式表范围的表达式。CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。

    34.CSS 优化、提高性能的方法有哪些？

    加载性能：

    （1）css压缩：将写好的css进行打包压缩，可以减少很多的体积。
    （2）css单一样式：当需要下边距和左边距的时候，很多时候选择:margin:top0bottom0;但margin-bottom:bottom;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中。

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

    样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。

    试想一下，如果采用从左至右的方式读取CSS规则，那么大多数规则读到最后（最右）才会发现是不匹配的，这样做会费时耗能，最后有很多都是无用的；而如果采取从右向左的方式，那么只要发现最右边选择器不匹配，就可以直接舍弃了，避免了许多无效匹配。

    为什么css选择器是从右往左匹配的

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

    （1）偶数字号相对更容易和web设计的其他部分构成比例关系。比如：当我用了14px的正文字号，我可能会在一些地方用14×0.5=7px的margin，在另一些地方用14×1.5=21px的标题字号。
    （2）浏览器缘故，低版本的浏览器ie6会把奇数字体强制转化为偶数，即13px渲染为14px。
    （3）系统差别，早期的Windows里，中易宋体点阵只有12和14、15、16px，唯独缺少13px。

    37.margin 和 padding 分别适合什么场景使用？

    margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。
    margin用于布局分开元素使元素与元素互不相干。
    padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段距离。

    何时应当使用margin：

    •需要在border外侧添加空白时。
    •空白处不需要背景（色）时。
    •上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。

    何时应当时用padding：

    •需要在border内测添加空白时。
    •空白处需要背景（色）时。
    •上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。

    38.抽离样式模块怎么写，说出思路

    我的理解是把常用的css样式单独做成css文件……通用的和业务相关的分离出来，通用的做成样式模块儿共享，业务相关的，放进业务相关的库里面做成对应功能的模块儿。

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

    all属性实际上是所有CSS属性的缩写，表示，所有的CSS属性都怎样怎样，但是，不包括unicode-bidi和direction这两个CSS属性。

    为什么会有这个CSS属性呢？

    我们可能知道，有些CSS属性值基本上所有CSS属性都有，比方说继承inherit!

    我们CSS reset输入框的时候，是不是有类似这样的代码（实际可能是具体值，作用类似）：

    1
    2
    3
    4
    5
    input, textarea {
        color: inherit;
        font-size: inherit;
        font-family: inherit;
    }

    因为这类输入控件自身有内置的大小和字体，需要重置。

    此时，大家就会发现，这些属性值都是inherit, 要是可以合并就好了！

    哟哟哟，说到点子上了，CSS all属性就是用来合并的。

    1
    2
    3
    input, textarea { 
       all: inherit; 
    }

    喔噢，三合一，顿时一阵春风拂面之感。但是，这里仅仅是展示作用，实际上是不会这么用的，因为，all:inherit会让背景色什么的，都继承父级，相信这不是你希望看到的。

    40.为什么不建议使用统配符初始化 css 样式。

    采用*{pading:0;margin:0;}这样的写法好处是写起来很简单，但是是通配符，需要把所有的标签都遍历一遍，当网站较大时，样式比较多，这样写就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间，因此一般大型的网站都有分层次的一套初始化样式。

    出于性能的考虑，并不是所有标签都会有padding和margin，因此对常见的具有默认padding和margin的元素初始化即可，并不需使用通配符*来初始化。

    上面就提到了，浏览器在解析css选择器时，通过从右到左的方式尽可能减少遍历的节点数量，努力提高性能。但是一个通配符选择器就可以让这些努力付之东流

    41.absolute 的 containingblock（包含块）计算方式跟正常流有什么不同？

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

    42.对于 hasLayout 的理解

    》hasLayout是IE特有的一个属性。很多的IE下的cssbug都与其息息相关。在IE中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。

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

    如果是height的话，是相对于包含块的高度。

    如果是padding或者margin竖直方向的属性则是相对于包含块的宽度。

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

    原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，容器及容器内的页面取当前可视区高度，同时容器的父级元素overflow属性值设为hidden，通过更改容器可视区的位置来实现全屏滚动效果。主要是响应鼠标事件，页面通过CSS的动画效果，进行移动。

    1
    2
    overflow：hidden；
    transition：all 1000ms ease；

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

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

    47.如何修改 chrome 记住密码后自动填充表单的黄色背景？

    chrome表单自动填充后，input文本框的背景会变成黄色的，通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式：

    1
    2
    3
    4
    5
    {
    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输入框的黄色背景，处理如下

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

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

    在谷歌下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文字内容切出做图片，这样不影响兼容也不影响美观。

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

    webkit内核的私有属性：-webkit-font-smoothing，用于字体抗锯齿，使用后字体看起来会更清晰舒服。

    -webkit-font-smoothing它有三个属性值：
    none：对低像素的文本比较好
    subpixel-antialiased：默认值
    antialiased：抗锯齿很好

    在MacOS测试环境下面设置-webkit-font-smoothing:antialiased;但是这个属性仅仅是面向MacOS，其他操作系统设置后无效。

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

    italic和oblique这两个关键字都表示“斜体”的意思。

    它们的区别在于，italic是使用当前字体的斜体字体，而oblique只是单纯地让文字倾斜。如果当前字体没有对应的斜体字体，则退而求其次，解析为oblique，也就是单纯形状倾斜。

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

    设备像素指的是物理像素，一般手机的分辨率指的就是设备像素，一个设备的设备像素是不可变的。

    css像素和设备独立像素是等价的，不管在何种分辨率的设备上，css像素的大小应该是一致的，css像素是一个相对单位，它是相对于设备像素的，一个css像素的大小取决于页面缩放程度和dpr的大小。

    dpr指的是设备像素和设备独立像素的比值，一般的pc屏幕，dpr=1。在iphone4时，苹果推出了retina屏幕，它的dpr为2。屏幕的缩放会改变dpr的值。

    ppi指的是每英寸的物理像素的密度，ppi越大，屏幕的分辨率越大。

    52.layoutviewport、visualviewport 和 idealviewport 的区别？

    移动端一共需要理解三个viewport的概念的理解。

    第一个视口是布局视口，在移动端显示网页时，由于移动端的屏幕尺寸比较小，如果网页使用移动端的屏幕尺寸进行布局的话，那么整个页面的布局都会显示错乱。所以移动端浏览器提供了一个layoutviewport布局视口的概念，使用这个视口来对页面进行布局展示，一般layoutviewport的大小为980px，因此页面布局不会有太大的变化，我们可以通过拖动和缩放来查看到这个页面。

    第二个视口指的是视觉视口，visualviewport指的是移动设备上我们可见的区域的视口大小，一般为屏幕的分辨率的大小。visualviewport和layoutviewport的关系，就像是我们通过窗户看外面的风景，视觉视口就是窗户，而外面的风景就是布局视口中的网页内容。

    第三个视口是理想视口，由于layoutviewport一般比visualviewport要大，所以想要看到整个页面必须通过拖动和缩放才能实现。所以又提出了idealviewport的概念，idealviewport下用户不用缩放和滚动条就能够查看到整个页面，并且页面在不同分辨率下显示的内容大小相同。idealviewport其实就是通过修改layoutviewport的大小，让它等于设备的宽度，这个宽度可以理解为是设备独立像素，因此根据idealviewport设计的页面，在不同分辨率的屏幕下，显示应该相同。

    53.position:fixed;在 android 下无效怎么处理？

    因为移动端浏览器默认的viewport叫做layoutviewport。在移动端显示时，因为layoutviewport的宽度大于移动端屏的宽度，所以页面会出现滚动条左右移动，fixed的元素是相对layoutviewport来固定位置的，而不是移动端屏幕来固定位置的，所以会出现感觉fixed无效的情况。

    如果想实现fixed相对于屏幕的固定效果，我们需要改变的是viewport的大小为idealviewport，可以如下设置：

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

    54.如果需要手动写动画，你认为最小时间间隔是多久，为什么？

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

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

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

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

    启用了硬件加速特性:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83

    ## 57.有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度。
    >（1）外层div使用position：relative；高度要求自适应的div使用position:absolute;top:100px;bottom:0;
    left:0;right:0;

    >（2）使用flex布局，设置主轴为竖轴，第二个div的flex-grow为1。

    ## 58.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过 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格式的最大的优点是，在相同质量的文件下，它拥有更小的文件体积。因此它非常适合于网络图片的传输，因为图片体积的减少，意味着请求时间的减小，这样会提高用户的体验。这是谷歌开发的一种新的图片格式，目前在兼容性上还不是太好。

    ## 59.如何判断是否支持 webp 格式图片
    >（1）宽高判断法。通过创建image对象，将其src属性设置为webp格式的图片，然后在onload事件中获取图片的宽高，如果能够获取，则说明浏览器支持webp格式图片。如果不能获取或者触发了onerror函数，那么就说明浏览器不支持webp格式的图片。

    >（2）canvas判断方法。我们可以动态的创建一个canvas对象，通过canvas的toDataURL将设置为webp格式，然后判断返回值中是否含有image/webp字段，如果包含则说明支持WebP，反之则不支持。

    ## 60.什么是 Cookie 隔离？（或者说：请求资源的时候不要让它带 cookie 怎么做）
    >网站向服务器请求的时候，会自动带上cookie这样增加表头信息量，使请求变慢。

    >如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，所以不如隔离开，静态资源放CDN。

    >因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。

    >同时这种方式不会将cookie传入WebServer，也减少了WebServer对cookie的处理分析环节，提高了webserver的http请求的解析速度。

    ## 61.style 标签写在 body 后与 body 前有什么区别？
    >页面加载自上而下当然是先加载样式。写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

    ## 62.什么是 CSS 预处理器？
    >CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件。

    >预处理器例如：LESS、Sass、Stylus，用来预编译Sass或lesscsssprite，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。

    ## 63.阐述一下 CSSSprites
    >将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的background-image，background-repeat，background-position的组合进行背景定位。利用CSSSprites能很好地减少网页的http请求，从而很好的提高页面的性能；CSSSprites能减少图片的字节。

    优点：

    >减少HTTP请求数，极大地提高页面加载速度
    增加图片信息重复度，提高压缩比，减少图片大小
    更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现

    缺点：

    >图片合并麻烦
    维护麻烦，修改一个图片可能需要重新布局整个图片，样式

    ## 64.使用 rem 布局的优缺点？
    优点：
    >在屏幕分辨率千差万别的时代，只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放，使得在设备上的展现都统一起来了。而且现在浏览器基本都已经支持rem了，兼容性也非常的好。

    缺点：
    >（1）在奇葩的dpr设备上表现效果不太好，比如一些华为的高端机型用rem布局会出现错乱。
    （2）使用iframe引用也会出现问题。
    （3）rem在多屏幕尺寸适配上与当前两大平台的设计哲学不一致。即大屏的出现到底是为了看得又大又清楚，还是为了看的更多的问题。

    ## 65. 为什么设计稿是750px
    我们通过动态的获取设备独立像素，然后除以设计稿的宽度，然后赋给根字体的fontsize，以致来动态改变跟字体大小，做到自适应。但至于为什么要乘100，首先375 / 750是0.5，浏览器默认最小字体为12px，所以我们需要放大一些，而100又很好算，我们只需要将设计稿量出来的长度（px），小数点向左移2位，单位变成rem就好了。

    例子：
    比如给你个```40*40```的图片设计稿，dpr为2的屏幕上我们需要设置20*20的px值，对于不同dpr的屏幕，就可以用上述的方法进行适配，适配完之后```40 * 0.01 * 50 = 20px```，可见结果是一样的
    ```js
    (function () {
    　　　function changeRootFont() {
    　　　   var designWidth = 750, rem2px = 100;
    　　　   document.documentElement.style.fontsize = 
    　　　  ((window.innerWidth / designWidth) * rem2px) + 'px';
    　　　  //iphone6: (375 / 750) * 100 + 'px';
    　　　}
    　　　changeRootFont();
    　　　window.addEventListener('resize', changeRootFont,false);
    })();

    66.画一条 0.5px 的线

    在css里最低的单位就是1px了，那么如果给真机一个1px的边框，会出现2像素的宽，如何解决这个问题呢？

    1
    tranform:scal(0.5);

    67.transition 和 animation 的区别

    transition关注的是CSSproperty的变化，property值和时间的关系是一个三次贝塞尔曲线。

    animation作用于元素本身而不是样式属性，可以使用关键帧的概念，应该说可以实现更自由的动画效果。

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

    “首选最小宽度”，指的是元素最适合的最小宽度。

    东亚文字（如中文）最小宽度为每个汉字的宽度。

    西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元，一般会终止于空格（普通空格）、短横线、问号以及其他非英文字符等。

    如果想让英文字符和中文一样，每一个字符都用最小宽度单元，可以试试使用CSS中的word-break:break-all。

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

    对于普通文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值。

    原因是如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto，因为解释成了auto，所以无法参与计算。

    使用绝对定位的元素会有计算值，即使祖先元素的height计算为auto也是如此。

    70.min-width/max-width 和 min-height/max-height 属性间的覆盖规则？

    （1）max-width会覆盖width，即使width是行类样式或者设置了!important。

    （2）min-width会覆盖max-width，此规则发生在min-width和max-width冲突的时候。

    71.内联盒模型基本概念

    （1）内容区域（contentarea）。内容区域指一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，本质上是一个字符盒子（characterbox）；但是有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，因此，对于这些元素，内容区域可以看成元素自身。

    （2）内联盒子（inlinebox）。“内联盒子”不会让内容成块显示，而是排成一行，这里的“内联盒子”实际指的就是元素的“外在盒子”，用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类。

    （3）行框盒子（linebox），每一行就是一个“行框盒子”（实线框标注），每个“行框盒子”又是由一个一个“内联盒子”组成的。

    （4）包含块（containingbox），由一行一行的“行框盒子”组成。

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

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

    73.什么是替换元素？

    通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”。因此，<img>、<object>、<video>、<iframe>或者表单元素<textarea>和<input>和<select>都是典型的替换元素。

    替换元素除了内容可替换这一特性以外，还有以下一些特性。

    （1）内容的外观不受页面上的CSS的影响。用专业的话讲就是在样式表现在CSS作用域之外。如何更改替换元素本身的外观需要类似appearance属性，或者浏览器自身暴露的一些样式接口，

    （2）有自己的尺寸。在Web中，很多替换元素在没有明确尺寸设定的情况下，其默认的尺寸（不包括边框）是300像素×150像素，如<video>、<iframe>或者<canvas>等，也有少部分替换元素为0像素，如<img>图片，而表单元素的替换元素的尺寸则和浏览器有关，没有明显的规律。

    （3）在很多CSS属性上有自己的一套表现规则。比较具有代表性的就是vertical-align属性，对于替换元素和非替换元素，vertical-align属性值的解释是不一样的。比方说vertical-align的默认值的baseline，很简单的属性值，基线之意，被定义为字符x的下边缘，而替换元素的基线却被硬生生定义成了元素的下边缘。

    （4）所有的替换元素都是内联水平元素，也就是替换元素和替换元素、替换元素和文字都是可以在一行显示的。但是，替换元素默认的display值却是不一样的，有的是inline，有的是inline-block。

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

    替换元素的尺寸从内而外分为3类：固有尺寸、HTML尺寸和CSS尺寸。

    （1）固有尺寸指的是替换内容原本的尺寸。例如，图片、视频作为一个独立文件存在的时候，都是有着自己的宽度和高度的。

    （2）HTML尺寸只能通过HTML原生属性改变，这些HTML原生属性包括<img>的width和height属性、<input>的size属性、<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）内联替换元素和块级替换元素使用上面同一套尺寸计算规则。

    75.content 与替换元素的关系

    content属性生成的对象称为“匿名替换元素”。

    （1）我们使用content生成的文本是无法选中、无法复制的，好像设置了userselect:none声明一般，但是普通元素的文本却可以被轻松选中。同时，content生成的文本无法被屏幕阅读设备读取，也无法被搜索引擎抓取，因此，千万不要自以为是地把重要的文本信息使用content属性生成，因为这对可访问性和SEO都很不友好。

    （2）content生成的内容不能左右:empty伪类。

    （3）content动态生成值无法获取。

    76.margin:auto 的填充规则？

    margin的’auto’可不是摆设，是具有强烈的计算意味的关键字，用来计算元素对应方向应该获得的剩余间距大小。但是触发margin:auto计算有一个前提条件，就是width或height为auto时，元素是具有对应方向的自动填充特性的。

    （1）如果一侧定值，一侧auto，则auto为剩余空间大小。
    （2）如果两侧均是auto，则平分剩余空间。

    77.margin 无效的情形

    （1）display计算值inline的非替换元素的垂直margin是无效的。对于内联替换元素，垂直margin有效，并且没有margin合并的问题。

    （2）表格中的和元素或者设置display计算值是table-cell或table-row的元素的margin都是无效的。

    （3）绝对定位元素非定位方位的margin值“无效”。

    （4）定高容器的子元素的margin-bottom或者宽度定死的子元素的margin-right的定位“失效”。

    78.border 的特殊性？

    （1）border-width不支持百分比。

    （2）border-style的默认值是none，有一部分人可能会误以为是solid。这也是单纯设置border-width或border-color没有边框显示的原因。

    （3）border-style:double的表现规则：双线宽度永远相等，中间间隔±1。

    （4）border-color默认颜色就是color色值。

    （5）默认background背景图片是相对于paddingbox定位的。

    79.什么是基线和 x-height？

    字母x的下边缘（线）就是我们的基线。

    x-height指的就是小写字母x的高度，术语描述就是基线和等分线（meanline）（也称作中线，midline）之间的距离。在C
    SS世界中，middle指的是基线往上1/2x-height高度。我们可以近似理解为字母x交叉点那个位置。

    ex是CSS中的一个相对单位，指的是小写字母x的高度，没错，就是指x-height。ex的价值就在其副业上不受字体和字号影
    响的内联元素的垂直居中对齐效果。内联元素默认是基线对齐的，而基线就是x的底部，而1ex就是一个x的高度。

    80.line-height 的特殊性？

    （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-size相乘后的值。为百分比值时，其最终的计算值是和当前font-size相乘后的值。为长度值时原意不变。

    （8）如果使用数值作为line-height的属性值，那么所有的子元素继承的都是这个值；但是，如果使用百分比值或者长度值作为属性值，那么所有的子元素继承的是最终的计算值。

    （9）无论内联元素line-height如何设置，最终父级元素的高度都是由数值大的那个line-height决定的。

    （10）只要有“内联盒子”在，就一定会有“行框盒子”，就是每一行内联元素外面包裹的一层看不见的盒子。然后，重点来了，在每个“行框盒子”前面有一个宽度为0的具有该元素的字体和行高属性的看不见的“幽灵空白节点”。

    81.vertical-align 的特殊性？

    （1）vertical-align的默认值是baseline，即基线对齐，而基线的定义是字母x的下边缘。因此，内联元素默认都是沿着字母x的下边缘对齐的。对于图片等替换元素，往往使用元素本身的下边缘作为基线。：一个inline-block元素，如果里面没有内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘；否则其基线就是元素里面最后一行内联元素的基线。

    （2）vertical-align:top就是垂直上边缘对齐，如果是内联元素，则和这一行位置最高的内联元素的顶部对齐；如果display计算值是table-cell的元素，我们不妨脑补成元素，则和元素上边缘对齐。

    （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元素自身。

    82.overflow 的特殊性？

    （1）一个设置了overflow:hidden声明的元素，假设同时存在border属性和padding属性，则当子元素内容超出容器宽度高度限制的时候，剪裁的边界是borderbox的内边缘，而非paddingbox的内边缘。

    （2）HTML中有两个标签是默认可以产生滚动条的，一个是根元素，另一个是文本域