前端面试题集锦——CSS

Love The Way You Lie 2022-04-12 09:10 398阅读 0赞

### CSS选择符有哪些？哪些属性可以继承？ ###

*  CSS选择符
    
    1.  id选择器（ `#myid`）
    2.  类选择器（`.myclassname`）
    3.  标签选择器（`div, h1, p`）
    4.  相邻选择器（`h1 + p`）
    5.  子选择器（`ul > li`）
    6.  后代选择器（`li a`）
    7.  通配符选择器（ `*` ）
    8.  属性选择器（`a[rel = "external"]`）
    9.  伪类选择器（`a:hover`, `li:nth-child`）
 *  可继承的样式： `font-size font-family color ul li dl dd dt`;
 *  不可继承的样式：`border padding margin width height`;

### css定义的权重 ###

以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：

/*权重为1*/
    div{
    }
    /*权重为10*/
    .class1{
    }
    /*权重为100*/
    #id1{
    }
    /*权重为100+1=101*/
    #id1 div{
    }
    /*权重为10+1=11*/
    .class1 div{
    }
    /*权重为10+10+1=21*/
    .class1 .class2 div{
    }

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

### CSS优先级算法如何计算？ ###

*  优先级就近原则，同权重情况下样式定义最近者为准;
 *  载入样式以最后载入的定位为准;

优先级为:

`!important > id > class > tag`

important 比 内联优先级高

### CSS3有哪些新特性？ ###

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

### CSS3新增伪类有那些？ ###

举例：

*  `p:first-of-type` 选择属于其父元素的首个 `<p>` 元素的每个 `<p>` 元素。
 *  `p:last-of-type` 选择属于其父元素的最后 `<p>` 元素的每个 `<p>` 元素。
 *  `p:only-of-type` 选择属于其父元素唯一的 `<p>` 元素的每个 `<p>` 元素。
 *  `p:only-child` 选择属于其父元素的唯一子元素的每个 `<p>` 元素。
 *  `p:nth-child(2)` 选择属于其父元素的第二个子元素的每个 `<p>` 元素。
 *  `:after` 在元素之后添加内容,也可以用来做清除浮动。
 *  `:before` 在元素之前添加内容
 *  `:enabled`/`:disabled` 控制表单控件的禁用状态。
 *  `:checked` 单选框或复选框被选中。

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

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

`::before`就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在于页面之中。

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

### 为什么要初始化CSS样式？抽离样式模块怎么写，说出思路，有无实践经验？\[阿里航旅的面试题\] ###

*  因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对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; }

### 描述css reset的作用和用途。 ###

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

### 什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？ ###

如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式闪烁(Flash of Unstyled Content),简称为FOUC。

`<style type="text/css" media="all">@import "../fouc.css";</style>`

IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。

解决方法: 只要在`<head>`之间加入一个`<link>`或者`<script>`元素就可以了。

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

*  写在head标签中利于浏览器逐步渲染（`resources downloading->CSSOM+DOM->RenderTree(composite)->Layout->paint`）。具体渲染过程请参考  
    [浏览器的渲染机制][Link 1]
 *  写在body标签后由于浏览器以逐行方式对html文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

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

**从后往前判断。**

浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。

举个例子，有选择器：

`body.ready #wrapper > .lol233`

先把所有 class 中有 lol233 的元素拿出来组成一个集合，然后上一层，对每一个集合中的元素，如果元素的 parent id 不为 `#wrapper` 则把元素从集合中删去。 再向上，从这个元素的父元素开始向上找，没有找到一个 tagName 为 body 且 class 中有 ready 的元素，就把原来的元素从集合中删去。

至此这个选择器匹配结束，所有还在集合中的元素满足。  
　　  
**为什么从后往前匹配？**

因为效率和文档流的解析方向。效率不必说，找元素的父亲和之前的兄弟比遍历所有儿子快而且方便。关于文档流的解析方向，是因为现在的 CSS，一个元素只要确定了这个元素在文档流之前出现过的所有元素，就能确定他的匹配情况。应用在即使 html 没有载入完成，浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。

**为什么是用集合？**

主要也还是效率。基于 CSS Rule 数量远远小于元素数量的假设和索引的运用，遍历每一条 CSS Rule 通过集合筛选，比遍历每一个元素再遍历每一条 Rule 匹配要快得多。

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

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

一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。

不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。

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

盒模型：文档中的每个元素被描绘为矩形盒子，渲染引擎的目的就是判定大小，属性——比如它的颜色、背景、边框方面——及这些盒子的位置。

（1）有两种，IE 盒子模型、W3C 盒子模型；

（2）盒模型：内容(content)、填充(padding)、边界(margin)、 边框(border)；

（3）区别：IE的content部分把 border 和 padding计算了进去;

![盒子模型][format_png]

### 介绍一下box-sizing属性？ ###

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。

*  content-box：让元素维持W3C的标准盒模型。**元素的宽度/高度由border + padding + content的宽度/高度决定**，**设置width/height属性指的是content部分的宽/高**
 *  border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。**设置width/height属性指的是border + padding + content**
 *  padding-box：元素的宽度/高度由 width/height(包含padding) + border决定，设置width/height= padding+content

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

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

详细内容请查看[Flex 布局教程：语法篇][Flex], [Flex 布局教程：实例篇][Flex 1]

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

*  何时应当使用margin
    
     *  需要在border外侧添加空白时。
     *  空白处不需要背景（色）时。
     *  上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。
 *  何时应当时用padding
    
     *  需要在border内测添加空白时。
     *  空白处需要背景（色）时。
     *  上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。
 *  浏览器兼容性问题

在IE5.x、IE6中，为float的盒子指定margin时，左侧margin可能会变成两倍的宽度。通过改用padding或指定盒子为display:inline可以解决。

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

*  block 像块类型元素一样显示，block元素宽度自动填满其父元素宽度。
 *  inline 像行内元素一样显示，其宽度随元素的内容而变化
 *  none 此元素不会被显示。
 *  inline-block 像行内元素一样显示，但其内容像块类型元素一样显示。
 *  list-item 像块类型元素一样显示，并添加样式列表标记。
 *  table 此元素会作为块级表格来显示
 *  inherit 规定应该从父元素继承 display 属性的值

### `display:inline-block` 什么时候会显示间隙？(携程) ###

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

### 有哪些隐藏内容的方法(同时还要保证屏幕阅读器可用) ###

`display:none`或者`visibility:hidden`，`overflow:hidden`。

1.  `display:none;`的缺陷
    
     *  搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略
     *  屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。
2.  `visibility: hidden;`的缺陷
    
    隐藏的内容会占据他所应该占据物理空间
3.  `overflow:hidden;`一个比较合理的方法
    
    例：`.texthidden { display:block; overflow: hidden; width: 0; height: 0; }`
    
    将宽度和高度设定为0，然后超过部分隐藏，就会弥补上述一、二方法中的缺陷，也达到了隐藏内容的目的

### CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？ ###

visibility有如下属性值：

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
   <th>属性值描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>visible</td> 
   <td>默认值。元素是可见的。</td> 
  </tr> 
  <tr> 
   <td>hidden</td> 
   <td>元素是不可见的，但此时仍占用页面空间</td> 
  </tr> 
  <tr> 
   <td>collapse</td> 
   <td>当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。</td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>规定应该从父元素继承 visibility 属性的值。</td> 
  </tr> 
 </tbody> 
</table>

在不同浏览器下的区别：

*  在谷歌浏览器里，使用collapse值和使用hidden值没有什么区别。
 *  在火狐浏览器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置。

### `display:none` 和 `visibility: hidden`的区别 ###

*  `display:none` 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
 *  `visibility:hidden` 隐藏对应的元素，但是在文档布局中仍保留原来的空间。

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

*  absolute：生成绝对定位的元素，**相对于值不为 static的第一个父元素进行定位**。
 *  fixed （老IE不支持）：生成绝对定位的元素，相对于浏览器窗口进行定位。
 *  relative：生成相对定位的元素，**相对于其正常位置进行定位**。
 *  static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
 *  inherit：规定从父元素继承 position 属性的值。
 *  sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

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

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

1、若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；

2、否则,则由这个祖先元素的 padding box 构成。

如果都找不到，则为 initial containing block。

补充：

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

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

参考资料：[position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？][position_display_margin collapse_overflow_float]

### position:absolute和float属性的异同 ###

共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。

不同点：float仍会占据位置，absolute会覆盖文档流中的其他元素。

### 设置元素浮动后，该元素的display值是多少？ ###

自动变成`display:block`

### 请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式 ###

浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

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

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

清除浮动可以理解为打破横向排列。 `clear: none | left | right | both`

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

**清除浮动的几种方法：**

1.  使用空标签清除浮动。
    
    `<div style="clear:both;"></div>`
    
    这种方法是在所有浮动标签后面添加一个空标签，定义`css clear:both`。 弊端就是增加了无意义标签。
2.  使用overflow。
    
    给包含浮动元素的父标签添加css属性 `overflow:auto; zoom:1;` 。`zoom:1`用于兼容IE6。
3.  使用after伪对象清除浮动。
    
    该方法只适用于非IE浏览器。使用中需注意：该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；
    
        #parent:after{
         
            content:".";
        
            height:0;
        
            visibility:hidden;
        
            display:block;
        
            clear:both;
        
        }
        #parent{
            zoom:1;
        }

`zoom:1`的作用： 触发IE下的hasLayout。zoom是IE浏览器专有属性，可以设置或检索对象的缩放比例。

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

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

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

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

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

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

### 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？ ###

*  给div设置一个宽度，然后添加margin:0 auto属性
    
        div{
            width:200px;
            margin:0 auto;
         }
 *  居中一个浮动元素
    
    确定容器的宽高 宽500 高 300 的层
    
    设置层的外边距
    
        .div {
            width:500px; 
            height:300px;//高度可以不设
            margin: -150px 0 0 -250px; /* 外边距为自身宽高的一半 */
            position:relative;         /* 相对定位或绝对定位均可 */
            background-color:pink;     /* 方便看效果 */
            left:50%;
            top:50%;
        }
    
    未知容器的宽高，利用 `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;    /* 水平居中 */
        
         }
         .container div {
             width: 100px;
             height: 100px;
             background-color: pink;        /* 方便看效果 */
         }
 *  让绝对定位的div居中
    
        position: absolute;
        width: 1200px;
        background: none;
        margin: 0 auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;

### 一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化（比如浏览器为500，右边就为400；如果浏览器为900，右边为800）？ ###

浮动布局：

<div id="left">left sidebar</div>
    <div id="content">Main Content</div>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #left{
            float: left;
            width: 220px;
            background-color: green;
        }
        #content{
            background-color: orange;
            margin-left: 220px;
        }
    </style>

### 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                height: 400px;
                width: 100%;
                display: flex;
                flex-direction: column;
            }
            .div1{
                height: 100px;
                background-color: green;
            }
            .div2{
                background-color: orange;
                flex: 1;
            }
        </style>
    </head>
    <body>
    <div class="box">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
    </body>
    </html>

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

行框的排列会受到中间空白（回车\\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

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

对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天,抗锯齿渲染使用也越来越多。font-smoothing是非标准的CSS定义。它被列入标准规范的草案中,后由于某些原因从web标准中被移除了。但是,我们可以用以下两种定义进行抗锯齿渲染。

/*chrome、safari*/
    -webkit-font-smoothing: antialiased;
    /*firefox*/
    -moz-osx-font-smoothing: grayscale;

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

*  偶数字号比较容易和页面中其他部分的字号构成一个比例关系。
 *  使用奇数号字体不好的地方是，文本段落无法对齐。

参考资料：[谈谈网页中使用奇数字体和偶数字体][Link 2]

### font-style属性可以让它赋值为"oblique"，oblique是什么意思？ ###

“oblique”与“italic”都是倾斜的意思。而“oblique”就是一种排版术语，就是一种倾斜的文字，但不是斜体。因为“oblique”对于font-style来说是一种合法的属性值，它可和italic进行互换，除非真有一种字体只提供了oblique而没有提供斜体。因为oblique基本上是一种模仿的斜体，而不是真正的斜体。

所以，如果一种字库里没有提供斜体字，当我们使用CSS的font-style：italic时，浏览器实际上是按font-style：oblique显示的。

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

*  对于height属性取值百分比，是相对于容器高度的。
 *  对于margin-top、margin-bottom、padding-top、padding-bottom这些竖直方向的内外边距属性的百分比取值，参考的其实是容器的宽度而不是高度。

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

原理：方法一是整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500% ，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现。方法二就是所有的子元素和页面一样，都显示在当前页面。

*  overflow：hidden；
 *  transition：all 1000ms ease；

附：[CSS-页面滑屏滚动原理][CSS-]

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

chrome会默认给自动填充的input表单加上`input:-webkit-autofill`私有属性，然后对其赋予以下样式：

input : -webkit-autofill {        
        background-color: #FAFFBD;
        background-image: none;
        color: #000;        
    }

情景一：input文本框是纯色背景的

可以对`input:-webkit-autofill`使用足够大的纯色内阴影来覆盖input输入框的黄色背景；如：

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    border: 1px solid #CCC!important;
    }

如果你有使用圆角等属性，或者发现输输入框的长度高度不太对，可以对其进行调整，除了chrome默认定义的background-color，background-image，color不能用!important提升其优先级以外，其他的属性均可使用!important提升其优先级。

思路二： 关闭浏览器自带填充表单功能

设置表单属性 `autocomplete="off/on"` 关闭自动填充表单，自己实现记住密码

<form autocomplete="off" method=".." action="..">
    
    <input type="text" name="textboxname" autocomplete="off">

### 你对line-height是如何理解的？ ###

![format_png 1][]

从上到下四条线分别是顶线、中线、基线、底线。

vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关。

行高是指上下文本行的基线间的垂直距离。

行距是指一行底线到下一行顶线的垂直距离。

半行距是行距的一半，值为`（行高-字体size）/2`。

内容区：底线和顶线包裹的区域。

行内框，每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，在没有其他因素影响的时候（padding等），行内框等于内容区域，而设定行高时行内框高度不变，半行距【（行高-字体size）/2】分别增加/减少到内容区域的上下两边（深蓝色区域）

行框（line box），行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度），当有多行内容时，每行都会有自己的行框。

line-height 属性设置行间的距离（行高），不能使用负值。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差(行距)分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

参考资料：[深入理解line-height][line-height]

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

如果你对某个div或模块使用了overflow: scroll属性，在iOS系统的手机上浏览时，则会出现明显的卡顿现象。但是在android系统的手机上则不会出现该问题。

以下代码可解决这种卡顿的问题：`-webkit-overflow-scrolling: touch;`，是因为这行代码启用了硬件加速特性，所以滑动很流畅。这个方法的确可以解决ios5.0、android4.0以后系统的滑动卡顿问题。

`-webkit-overflow-scrolling: auto | touch;`

*  auto： 普通滚动，当手指从触摸屏上移开，滚动立即停止
 *  touch：滚动回弹效果，当手指从触摸屏上移开，内容会保持一段时间的滚动效果，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

兼容写法

over-flow: auto;     /* winphone8和android4+ */
    -webkit-overflow-scrolling: touch;    /* ios5+ */

ps：

1、如果添加了此属性但是不起作用，再添加`overflow-y: scroll`,就可以了。

2、当一个元素设置过`position: absolute|relative`，后再增加`-webkit-overflow-scrolling: touch;`属性后，会发现，滑动几次后就滚动区域会卡住，不能在滑动，这时给元素增加个z-index值就可以了。

### `position:fixed;`在android下无效怎么处理？ ###

设置`user-scalable=no`

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

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

*  png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
 *  浏览器默认的margin和padding不同。解决方案是加一个全局的`* {margin:0;padding:0;}`来统一。
 *  IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
    
    浮动ie产生的双倍距离 `#box{ float:left; width:10px; margin:0 0 0 100px;}`
    
    这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——`_display:inline;`将其转化为行内属性。(\_这个符号只有ie6会识别)
    
    hack技巧，渐进识别的方式，从总体中逐渐排除局部。
    
    首先，巧妙的使用“`\9`”这一标记，将IE游览器从所有情况中分离出来。
    
    接着，再次使用“`+`”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
    
    css
    
        ```
        .bb{
            background-color:#f1ee18;/*所有识别*/
            .background-color:#00deff\9; /*IE6、7、8识别*/
            +background-color:#a200ff;/*IE6、7识别*/
            _background-color:#1e0bd1;/*IE6识别*/
        }
        ```
 *  IE下,可以使用获取常规属性的方法来获取自定义属性,  
    也可以使用`getAttribute()`获取自定义属性; Firefox下,只能使用`getAttribute()`获取自定义属性。
    
    解决方法:统一通过`getAttribute()`获取自定义属性。
 *  IE下,even对象有x,y属性,但是没有pageX,pageY属性;  
    Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。
    
    解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
 *  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 {}`
 *  上下margin重合问题
    
    ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
    
    解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。

### 描述CSS hack技巧? ###

1.  条件注释：仅适用于IE
2.  特定符号：适用于能识别特定符号的浏览器
3.  内核符号：针对不同浏览器内核

### css动画和js动画的优缺点 ###

CSS3的动画

*  优点：
    
    1.  在性能上会稍微好一些，浏览器会对CSS3的动画做一些优化（比如专门新建一个图层用来跑动画）
    2.  代码相对简单
 *  缺点：
    
    1.  在动画控制上不够灵活
    2.  兼容性不好
    3.  部分动画功能无法实现（如滚动动画，视差滚动等）

JavaScript的动画

*  优点：  
    1.控制能力很强，可以单帧的控制、变换  
    2.兼容性好，写得好完全可以兼容IE6，且功能强大。
 *  缺点：  
    计算没有css快，另外经常需要依赖其他的库。

### 如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里） ###

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

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

视差滚动（Parallax Scrolling）这种技术通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。

*  CSS3实现
    
    优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器
 *  jquery实现
    
    通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。
    
    优点：能兼容到各个版本的，效果可控性好
    
    缺点：开发起来对制作者要求高
 *  插件实现方式
    
    例如：parallax-scrolling，兼容性十分好

### 什么是CSS 预处理器 / 后处理器？ ###

*  预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
 *  后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的  
    是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

### CSS预处理语言LESS、Scss、Stylus的异同之处的综合对比 ###

*  均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性；
 *  Scss和LESS语法较为严谨，LESS要求一定要使用大括号“\{\}”，Scss和Stylus可以通过缩进表示层次与嵌套关系；
 *  Scss无全局变量的概念，LESS和Stylus有类似于其它语言的作用域概念；
 *  Scss和Stylus就具有类似其它语言的条件语句、循环语句等，而LESS需要通过When等关键词模拟这些功能；
 *  Sass是基于Ruby语言的，而LESS和Stylus可以基于NodeJS NPM下载相应库后进行编译；
 *  使用LESS时，还可以在引用它的HTML文件中引入从官网下载的“less.js”文件，就可以通过浏览器进行解析。

### 解释css sprites，如何使用。 ###

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是也有限制，一般浏览器都是6个。对于未来而言，就不需要这样做了，因为有了`http2`。

### 移动端的布局用过媒体查询吗？ ###

通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适合相应的设备显示；即响应式布局

@media screen and (min-width: 400px) and (max-width: 700px) { … }
    @media handheld and (min-width: 20em), screen and (min-width: 20em) { … }

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

页面的设计和开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、css media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。

响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

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

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

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

1.  尽量将样式写在单独的css文件里面，在head元素中引用。将代码写成单独的css文件有几点好处：
    
    1.  内容和样式分离，易于管理和维护
    2.  减少页面体积
    3.  css文件可以被缓存、重用，维护成本降低
2.  不使用`@import`, `@import`影响css文件的加载速度
3.  避免使用复杂的选择器，层级越少越好，建议选择器的嵌套最好不要超过三层
    
    简洁的选择器不仅可以减少css文件大小，提高页面的加载性能，浏览器解析时也会更加高效，也会提高开发人员的开发效率，降低了维护成本。
4.  精简页面的样式文件，去掉不用的样式
5.  利用CSS继承减少代码量
6.  慎重使用高性能属性：浮动、定位；
7.  抽象提取公用样式，减少代码量；
8.  标准化各种浏览器前缀，带浏览器前缀的在前，标准的在后；

[Link 1]: https://blog.csdn.net/wozaixiaoximen/article/details/50640954##1
[format_png]: /images/20220412/003e77f8faf3491eb2377b53f712b397.png
[Flex]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[Flex 1]: http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
[position_display_margin collapse_overflow_float]: https://www.cnblogs.com/jackyWHJ/p/3756087.html
[Link 2]: https://blog.csdn.net/jian_xi/article/details/79346477
[CSS-]: https://www.cnblogs.com/xiaofeixiang/p/5042324.html
[format_png 1]: /images/20220412/c037548cadc44d03b062c46e2541bd56.png
[line-height]: https://www.cnblogs.com/yangjie-space/p/4858132.html