前端面试CSS

目录

一、CSS3 有哪些新特性

二、CSS 的盒子模型

三、布局：正常流、浮动float、定位position、显示display

a、浮动float和清理clear

1、请阐述 float 定位的工作原理

2、CSS清除浮动的几种方法？

3、BFC

4、margin塌陷和margin负值

5、伪元素和伪类的区别？CSS3 新增伪类有那些？

b、定位position

1、position:relative 、 fixed 、 absolute 和 static 四种定位有什么区别？

2、请阐述 z-index 属性，并说明如何形成层叠上下文（stacking context）

3、translate 和 position的区别

c、显示display

1、行内元素与块级元素区别？

2、display 有哪些值？说明他们的作用

d、效果

1、几种常见的 CSS 布局效果

2、CSS Flex 弹性布局和 Grid网格布局

3、CSS响应式

          附带：

1、用 css 分别实现某个元素上下居中和左右居中

2、CSS 隐藏元素的几种方法（显示display和可见性visibility区别）

3、rgba()和 opacity 的透明效果有什么不同？

4、设备像素比？

5、rem 布局字体太大怎么处理?

6、有什么不同的方式可以隐藏内容（使其仅适用于屏幕阅读器）？

7、line-height如何继承？

四、CSS 选择器及其优先级

1、CSS 选择器有哪些？哪些属性可以继承？优先级算法如何计算？

2、优先级算法如何计算？

五、纯 CSS 创建一个三角形、梯形、菱形、平行四边形

六、CSS 预处理

1、Sass、Less是什么？

2、使用 CSS 预处理的优缺点分别是什么？

3、stylus/sass/less 区别

七、动画

1、transform translate transition 的区别

2、过渡与动画的区别是什么

3、简单动画的实现，如旋转等

4、使用css实现一个持续的动画效果

八、图片

1、PNG, GIF, JPG 的区别

2、精灵图和 base64 如何选择？

九、其他

1、link和@import区别？

2、CSS 合并方法

3、偏移、卷曲、可视

4、什么是 Css Hack？ie6, 7, 8 的 hack 分别是什么？

5、什么是 FOUC? 如何避免？

6、文本超出部分显示省略号

7、css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？

8、@media 属性

9、display:inline-block 什么时候不会显示间隙？

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

---

一、CSS3 有哪些新特性

1. 选择器

• E:last-child 匹配父元素的最后一个子元素 E。
• E:nth-child(n)匹配父元素的第 n 个子元素 E。
• E:nth-last-child(n) CSS3 匹配父元素的倒数第 n 个子元素 E。

 2. 过渡 

CSS:
div {
    width:100px;
    height:100px;
    background:blue;
    transition: width 2s;//css属性 花费时间
}
div:hover{
    width:300px;
}

html:
<div></div>

3. 形状转换

rotate()旋转

translate()平移

scale( )缩放

skew()扭曲/倾斜

变换基点

3d 转换

4. 动画  animation属性

div{
    width:100px;
    height:100px;
    background: red;
    animation: abc 2s linear;/*执行一次abc动画，运动时间2秒，运动曲线为 linear*/
}

@keyframes abc {
    from {
        transform: rotate(0);
    }

    50% {
        transform: rotate(90deg);
    }

    to {
        transform: rotate(360deg);
    }
}

5.边框

边框圆角 

border-radius: 15px;

边框图片，border-image 属性

6. 盒阴影

/* box-shadow: 水平方向的偏移量 垂直方向的偏移量 模糊程度 扩展程度 颜色 是否具有内阴影 */

7. 文字

文字阴影

text-shadow: 5px 2px 6px rgba(64, 64, 64, 0.5);

文字换行

p.test {
    word-wrap: break-word;//word-wrap 属性允许长单词或 URL 地址换行到下一行。
}

字体样式

@font-face 属性可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

@font-face {
    font-family: BorderWeb;
    src: url(BORDERW0.eot);
}

@font-face {
    font-family: Runic;
    src: url(RUNICMT0.eot);
}

.border {
    font-size: 35px;
    color: black;
    font-family: "BorderWeb";
}

.event {
    font-size: 110px;
    color: black;
    font-family: "Runic";
}

/* 淘宝网字体使用 */

@font-face {
    font-family: iconfont;
    src: url(//at.alicdn.com/t/font_1465189805_4518812.eot);
}

8. 颜色

rgba

9. 盒模型box-sizing属性

box-sizing:border-box

box-sizing:content-box

10. 渐变效果

background-image: -webkit-gradient(linear,
    0% 0%,
    100% 0%,
    from(#2a8bbe),
    to(#fe280e));

11.媒体查询

@media 查询，监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式

12.布局

flex弹性布局、grid网格布局

/* 多栏布局 */
<div class="mul-col">
    <div>
        <h3>新手上路</h3>
        <p>新手专区 消费警示 交易安全 24小时在线帮助 免费开店</p>
    </div>
    <div>
        <h3>付款方式</h3>
        <p>快捷支付 信用卡 余额宝 蚂蚁花呗 货到付款</p>
    </div>
    <div>
        <h3>淘宝特色</h3>
        <p>手机淘宝 旺信 大众评审 B格指南</p>
    </div>
</div>
.mul-col {
    column-count: 3;
    column-gap: 5px;
    column-rule: 1px solid gray;
    border-radius: 5px;
    border: 1px solid gray;
    padding: 10px;
}

参考： CSS3新特性

二、CSS的盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距 / 边界（margin）、边框（border）、内边距 / 填充（padding）、实际内容（content）四个属性。

标准盒模型（W3C盒子模型，box-sizing：content-box，默认 ）

怪异盒模型（IE 盒子模型，box-sizing：border-box）

三、布局：正常流、浮动float、定位position、显示display

a、浮动float和清理clear

1、请阐述 float 定位的工作原理

浮动（float）是 CSS 定位属性。浮动元素从网页的正常流动中移出，但是保持了部分的流动性，会影响其他元素的定位（比如文字会围绕着浮动元素）。这一点与绝对定位不同，绝对定位的元素完全脱离文档流。浮动框向左或向右移动，直到它的外边缘碰到包含框或者另一个浮动框。浮动元素之前的元素将不会受到影响，浮动元素之后的元素将围绕它。

子元素因为浮动的关系，脱离了标准流，但是父盒子没有设置高度，认为没有任何内容，所以高度就不会被内容撑开，相当于父级的高度是0px，造成了页面的排布紊乱（也叫页面高度塌陷）。

2、CSS清除浮动的几种方法？

（1）使用额外标签（不推荐）

在浮动的盒子下面再放一个标签，使用 clear:both;来清除浮动

缺点：添加许多无意义的标签，结构化较差。

（2）使用overflow清除浮动（不推荐）

先找到浮动盒子的父元素，给父元素添加一个属性：overflow:auto;或overflow:hidden;就会清除子元素对页面的影响。把父元素属性设置为 overflow:auto; 或 overflow:hidden;，会使其内部的子元素形成块格式化上下文（Block Formatting Context），并且父元素会扩张自己，使其能够包围它的子元素。

缺点：内容增多时容易导致内容被隐藏掉，无法显示需要溢出的元素。

（3）使用伪元素清除浮动

//在页面的 clearfix 元素后面添加了一个空的块级元素,这个元素清除了浮动
.clearfix:after {
    content:"";
    //height:0;
    clear:both;
    display:block;
    //visibility:hidden;  /_将元素隐藏起来_/ 
}
.clearfix {
  zoom:1;/_为了兼容 IE低版本_/
}

参考：CSS 清除浮动的几种方法

3、BFC

BFC（Block Formatting Context）块级格式化上下文，是一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素。

形成 BFC 的条件：

• 浮动元素，float 除 none 以外的值
• 定位元素，position（absolute，fixed）
• overflow 除 visible 以外的值（hidden，auto，scroll）
• display 为以下其中之一的值 inline-block，flex，table-cell，table-caption

BFC 的特性：

• 内部元素在垂直方向上一个接一个的放置。
• 垂直方向上的距离由 margin 决定，属于同一个BFC的两个相邻元素的margin会发生叠加
• 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
• bfc 的区域不会与 float 的元素区域重叠
• 计算 bfc 的高度时，浮动元素也参与计算
• bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

参考：BFC 神奇背后的原理

4、margin塌陷和margin负值

在标准文档流中，竖直方向的margin会出现叠加现象（水平方向不会塌陷），margin直接接触，产生了合并，表现为较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin塌陷现象。

同级元素塌陷：上面的元素有下边距，下面的元素有上边距，两个边距相遇（外边距重叠 margin-collapse），真正盒子间距离是较大的那个值。这种合并外边距的方式被称为折叠，所结合成的外边距称为折叠外边距。折叠结果遵循下列计算规则：

（1）两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

（2） 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

（3） 两个外边距一正一负时，折叠结果是两者的相加的和。

解决方法：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。

父子元素塌陷：父元素和子元素都设置了同方向的margin-top值，两个属性之间没有其他内容进行隔离，导致两个属性相遇，发生margin塌陷。

解决办法：让两个边距不要相遇，中间可以使用父元素border或padding将边距分隔开；父子盒模型之间的距离就不要用子元素的margin去设置，而是用父元素的padding挤出来；给父元素添加overflow:hidden;或position:absolute;或position:fixed或display:inline-block触发BFC

参考：css中常见margin塌陷问题之解决办法、margin塌陷及其解决

margin负值：margin-top和margin-left负值，元素向上、向左移动

margin-right负值，右侧元素左移，自身不受影响

margin-bottom负值，下方元素上移，自身不受影响

参考：浅谈margin负值

5、伪元素和伪类的区别？CSS3 新增伪类有那些？

伪类的效果可以通过添加实际的类来实现；伪元素的效果可以通过添加实际的元素来实现。所以它们的本质区别就是是否抽象创造了新元素；

伪类存在DOM文档中，逻辑上存在但在文档树中却无须标识。只能使用“：”，常见的有：:hover，:link，:active，:target，:not()，:focus等。

伪元素不存在DOM文档中，是创建新的虚拟元素，代表某个元素的子元素，这个子元素虽然在逻辑上存在但却并不实际存在于文档树中。既可以使用“:”，也可以使用“::” ，因为伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾，常见的有：::before，::after，::first-line，::first-letter，::selection、::placeholder 等；

新增伪类：

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元素。

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

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

b、定位position

1、position:relative 、 fixed 、 absolute 和 static 四种定位有什么区别？

• absolute 绝对定位，相对于最近的非 static父级元素的偏移，如果没有父级或者父级没有进行定位，则继续往上一级寻找直至。脱离文档流（不再占有原先位置）。
• relative 相对定位，相对于自己原来的位置进行上下左右的偏移，不脱离文档流（继续保留原来位置）。最典型的应用给绝对定位当爹。
• fixed 固定定位，通常相对于浏览器窗口或 frame 进行定位。
• static 静态定位，默认值。没有定位，元素出现在正常的流中。
• sticky 粘性定位，类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。（吸顶效果）

参考：浅谈static、relative、absolute、fixed四种定位的区别

2、请阐述 z-index 属性，并说明如何形成层叠上下文（stacking context）

CSS 中的 z-index 属性设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 z-index 只能影响 position 值不是 static 的元素。

没有定义 z-index 的值时，元素按照它们出现在 DOM 中的顺序堆叠（层级越低，出现位置越靠上）。非静态定位的元素（及其子元素）将始终覆盖静态定位（static）的元素，而不管 HTML 层次结构如何。

层叠上下文是包含一组图层的元素。 在一组层叠上下文中，其子元素的 z-index 值是相对于该父元素而不是 document root 设置的。每个层叠上下文完全独立于它的兄弟元素。如果元素 B 位于元素 A 之上，则即使元素 A 的子元素 C 具有比元素 B 更高的 z-index 值，元素 C 也永远不会在元素 B 之上.

每个层叠上下文是自包含的：当元素的内容发生层叠后，整个该元素将会在父层叠上下文中按顺序进行层叠。少数 CSS 属性会触发一个新的层叠上下文，例如 opacity 小于 1， filter 不是 none ， transform 不是 none 。

3、translate 和 position的区别

相同点：两者都是相对于本身移动位置

区别： 1、当元素原来已经有position:absolute的时候，这时候你想相对于本身移动，可以使用translate

2、做动画的时候translate更适合，不会引起页面的重排/回流（reflow）和重绘（repaint）

3、translate（）是transform的一个值。关于transform类的，可以使用GPU加速，提高浏览器的性能

c、显示display

1、行内元素与块级元素区别？

块级元素(display：block)特性：

• 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
• 宽度(width)、高度(height)、行高（line-height）、内边距(padding)和外边距(margin)都可控制;

常见的块级元素有：<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>	等

内联元素(display：inline)特性：

• 和相邻的内联元素在同一行;
• 宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变（也就是 padding 和 margin 的 left 和 right 是可以设置的），可以设置行高（line-height）。

常见的行内元素有：<a>,<strong>,<b>,<em>,<span>等

inline-block可设置高和内外边距，但不会自动换行

 <input>,<select>,<img>,<button>,<textarea>

转化：

块元素 -> 内联元素：　display:inline;
内联元素 -> 块元素：　display:block;

参考：行内元素（内联元素）与块级元素

2、display 有哪些值？说明他们的作用

display： none | inline | block | inline-block | list-item | table | flex ...

d、效果

1、几种常见的 CSS 布局效果

单列布局

两列自适应布局

overflow：hidden触发BFC
HTML：
    <div class="parent">
        <div class="left"><p>111</p></div>
        <div class="right">
            <p>222</p>
            <p>333</p>
        </div>
    </div>

CSS:
    <style>
       .left{
           float:left;
           width: 200px;
           height: 300px;
           background: blue;
           margin-right: 30px;
       }
       .right{
           height: 300px;
           background: green;
           overflow: hidden;/*BFC，打破文字环绕*/
       }
    </style>

Flex布局
HTML：
    <div class="parent">
        <div class="left"><p>111</p></div>
        <div class="right"><p>222</p></div>
    </div>
CSS:
        .parent{
            display: flex;
        }
       .left{
           width: 200px;
           background: blue;
       }
       .right{
           flex:1;/*flex:1 1 auto;flex-grow,flex-shrink,flow-basis*/
           background: red;
       }

Grid布局：
HTML：
    <div class="parent">
        <div class="left"><p>111</p></div>
        <div class="right"><p>222</p></div>
    </div>
CSS：

        .parent{
            display: grid;
            grid-template-columns: 200px auto; /*每列列宽*/
        }
       .left{
           width: 200px;
           height: 450px;
           background: blue;
       }
       .right{
           height: 450px;
           background: red;
       }

三列布局

（1）圣杯布局和双飞翼布局

目的：

三栏布局，中间一栏最先加载和渲染

两侧内容固定，中间内容随宽度自适应

一般用于PC端

技术总结：

使用float布局

两侧使用margin负值，以便和中间内容横向重叠

防止中间内容被两侧覆盖，一个用padding（圣杯），一个用margin（双飞翼）

圣杯布局
HTML:
    <div class="parent">
        <div class="mid"><p>222</p></div> <!--中间列写在前面-->
        <div class="left"><p>111</p></div>
        <div class="right"><p>333</p></div>
    </div>
CSS:
        .parent{
            padding-left:300px;
            padding-right:200px;
        }
       .left{
            float:left;
            width: 300px;
            height: 450px;
            background: blue;
            margin-left: -100%; /*父元素内容长度。对象向左移动一段距离，这段距离等于父容器宽度*/          
            position: relative;
            left:-300px;
       }
       .mid{
            float:left;
            width:100%;
            height: 450px;
            background: green;
       }
       .right{
            float:left;
            width: 200px;
            height: 450px;
            background: red;
            /*margin-right:-200px;相当于下面三句的效果*/
            margin-left: -200px;
            position:relative;
            right:-200px;
       }

双飞翼布局
HTML:
    <div class="parent">
        <div class="mid">
            <div class="inner">222</div> <!--添加层级-->
        </div> <!--中间列写在前面-->
        <div class="left"><p>111</p></div>
        <div class="right"><p>333</p></div>
    </div>
CSS：
        .left{
            float:left;
            width: 300px;
            height:450px;
            background: blue;
            margin-left: -100%;
       }
       .mid{
            float:left;
            width:100%;
            height:450px;
            background: green;
       }
       .inner{
           margin: 0 200px 0 300px; /*新增*/
       }
       .right{
            float:left;
            width: 200px;
            height:450px;
            background: red;
            margin-left: -200px;
       }

（2）float和绝对定位

float:
HTML:
    <header><p>头部</p></header>
    <div class="parent">
        <div class="left"><p>111</p></div>
        <div class="right"><p>333</p></div>
        <div class="mid"><p>222</p></div> <!--最后渲染-->
    </div>
    <footer><p>底部</p></footer>

CSS:
        *{
            margin: 0;
            padding:0;
        }
        html,body{
            height: 100%;
        }
        header{
            width: 100%;
            height:50px;
            background-color: gray;
            line-height: 50px;
            text-align: center;
        }
        footer{
            clear: both;
            width: 100%;
            height:50px;
            background-color: gray;
            line-height: 50px;
            text-align: center;
            margin-top:-50px;
        }
        .parent{
            min-height: 100%;
            padding-bottom: 50px;
        }
        .mid{
            width: 100%;
            height:400px;
            background-color: orange;
        }
        .left{
            float:left;
            width:120px;
            height:400px;
            background-color: pink;
        }
        .right{
            float:right;
            width:300px;
            height: 400px;
            background-color: royalblue;
        }

绝对定位：
HTML：
    <header><p>头部</p></header>
    <div class="parent">
        <div class="left"><p>111</p></div>
        <div class="mid"><p>222</p></div>
        <div class="right"><p>333</p></div>
    </div>
    <footer><p>底部</p></footer>

CSS：
        *{
            margin: 0;
            padding:0;
        }
        html,body{
            height: 100%;
        }
        header{
            width: 100%;
            height:50px;
            background-color: gray;
            line-height: 50px;
            text-align: center;
        }
        footer{
            clear: both;
            width: 100%;
            height:50px;
            background-color: gray;
            line-height: 50px;
            text-align: center;
            margin-top:-50px;
        }
        .parent{
            min-height: 100%;
            padding-bottom: 50px;
        }
        .mid{
            width: 100%;
            height:400px;
            background-color: orange;
            margin: 0 300px 0 120px;
        }
        .left{
            position: absolute;
            top:50px;
            left:0;
            width:120px;
            height:400px;
            background-color: pink;
        }
        .right{
            position: absolute;
            top:50px;
            right:0;
            width:300px;
            height: 400px;
            background-color: royalblue;
        }

（3）flex和grid

flex:
HTML:
    <header><p>头部</p></header>
    <div class="parent">
        <div class="left"><p>111</p></div>
        <div class="mid"><p>222</p></div>
        <div class="right"><p>333</p></div>
    </div>
    <footer><p>底部</p></footer>

CSS:
        *{
            margin: 0;
            padding:0;
        }
        html,body{
            height: 100%;
        }
        header{
            width: 100%;
            height:50px;
            background-color: gray;
            line-height: 50px;
            text-align: center;
        }
        footer{
            clear: both;
            width: 100%;
            height:50px;
            background-color: gray;
            line-height: 50px;
            text-align: center;
            margin-top:-50px;
        }
        .parent{
            min-height: 100%;
            padding-bottom: 50px;
            display: flex;
        }
        .mid{
            flex:1;
            height:400px;
            background-color: orange;
        }
        .left{
            width:120px;
            height:400px;
            background-color: pink;
        }
        .right{
            width:300px;
            height: 400px;
            background-color: royalblue;
        }

grid：
HTML：
    <header><p>头部</p></header>
    <div class="parent">
        <div class="left"><p>111</p></div>
        <div class="mid"><p>222</p></div>
        <div class="right"><p>333</p></div>
    </div>
    <footer><p>底部</p></footer>

CSS：
        *{
            margin: 0;
            padding:0;
        }
        html,body{
            height: 100%;
        }
        header{
            width: 100%;
            height:50px;
            background-color: gray;
            line-height: 50px;
            text-align: center;
        }
        footer{
            clear: both;
            width: 100%;
            height:50px;
            background-color: gray;
            line-height: 50px;
            text-align: center;
            margin-top:-50px;
        }
        .parent{
            min-height: 100%;
            padding-bottom: 50px;
            display: grid;
            grid-template-columns: 120px auto 300px;
            grid-template-rows: 400px;
        }
        .mid{
            background-color: orange;
        }
        .left{
            background-color: pink;
        }
        .right{
            background-color: royalblue;
        }

伪等高布局

粘连布局（底端固定）

参考：几种常见的CSS布局

2、CSS Flex 弹性布局和 Grid网格布局

Flex弹性布局主要用于一维布局，而 Grid网格布局则用于二维布局。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。flex 容器中存在两条轴， 水平的主轴和垂直的交叉轴。

在容器上可以设置 6 个属性：

flex-direction    //主轴方向
flex-wrap    //如果一条轴线排不下，如何换行
flex-flow    //flex-direction属性和flex-wrap属性的简写形式
justify-content    //项目在主轴上的对齐方式
align-items    //项目在交叉轴上如何对齐
align-content    //定义了多根轴线的对齐方式

在项目上可设置6个属性：

order    //项目的排列顺序
flex-grow    //项目的放大比例
flex-shrink    //项目的缩小比例
flex-basis    //项目占据的主轴空间
flex    //flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
align-self    //允许单个项目有与其他项目不一样的对齐方式

注意：当设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。

例：画三点的骰子

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

    <style>
        .box{
            width:200px;
            height:200px;
            border: 1px solid #ccc;
            border-radius: 10px;
            padding: 20px;
            display: flex;
            justify-content: space-between;/*主轴两端对齐*/
        }
        .item{
            display: block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #666;
        }
        .item:nth-child(2){
            align-self: center;
        }
        .item:nth-child(3){
            align-self: flex-end;
        }
    </style>

Grid网格布局用于将页面分割成数个主要区域，或者用来定义组件内部元素间大小、位置和图层之间的关系。采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。水平区域称为行，垂直区域称为列。

容器属性：

grid-template-columns    //每一列的列宽
grid-template-rows    //每一行的行高
......

项目属性：......

像表格一样，网格布局让我们能够按行或列来对齐元素。 但是，使用 CSS 网格可能还是比 CSS 表格更容易布局。 例如，网格容器的子元素可以自己定位，以便它们像 CSS 定位的元素一样，真正的有重叠和层次。

参考：css基础（弹性布局和网格布局）

3、CSS响应式（多终端适配）

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。

页面头部必须有meta声明的viewport。

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

device-width指的是设备的物理宽度

initial-scale - 初始的缩放比例

minimum-scale - 允许用户缩放到的最小比例

maximum-scale - 允许用户缩放到的最大比例

user-scalable - 用户是否可以手动缩放

px、em 和rem的区别

rem是一个长度单位

px 是固定像素，一旦设置了就无法因为适应页面大小而改变。em 和rem是相对长度单位。

em（font size of the element）相对于父元素的字体大小的单位，不常用。rem（font size of the root element）是指相对于HTML根元素的字体大小的单位（根元素font-size由js设置），常用于响应式布局。

rem缺点阶梯性，通过vh/vm改进

window.screen.height //屏幕高度

window.innerHeight //网页适口高度（浏览器中可以显示网页内容的高度，去除工具栏）

document.body.clientHeight //body高度（网页内容少，高度低）

vw、vh

1vw 网页适口宽度的1%。

1vh 网页适口高度的1%。

vmax 取两者最大值；vmin取两者最小值

参考：Rem布局的原理解析、Rem 布局、媒体查询、百分比、rem和vw/vh等布局对比解析、CSS中各种长度单位总结

附带：

1、用 css 分别实现某个元素上下居中和左右居中

水平居中

1、行内元素水平居中

父元素设置text-align:center

2、块级元素水平居中

margin:0 auto;

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

.box{
    width:100px;
    height:100px;
    background-color: brown;
    margin:0 auto;
}

flex布局（不定宽） 

<div class="container">
    <div class="box">块级元素：水平居中flex</div>
</div>

.container{
    display: flex;
    justify-content: center;
}
.box{
    background-color: brown;
}

 position:absolute + left50% + 负margin

<div class="container">
    <div class="box">块级元素：水平居中position + 负margin；</div>
</div>

.container{
    position: relative;
}
.box{
    position: absolute;
    width: 100px;
    height:100px;
    background-color: darkorange;
    left:50%;
    margin-left: -50px;/*宽度/2*/
}

 position:absolute + left50% + transform（不定宽）

<div class="container">
    <div class="box">块级元素：水平居中position + transform；</div> 
</div>

.container{
    position: relative;
}
.box{
    position: absolute;
    height: 100px;
    background-color: darkgray;
    left:50%;
    transform: translate(-50%,0);/*移动自己盒子宽度的一半*/
} 

 position:absolute + left/right=0 +margin:auto；（不定宽）

<div class="container">
    <div class="box">块级元素：水平居中position + margin:auto；</div>
</div>

.container{
    position: relative;
}
.box{
    position: absolute;
    width: 100px;
    height:100px;
    background-color: darkorange;
    left:0px;
    right: 0px;
    margin: 0 auto;
} 

垂直居中

1、单行文本垂直居中

line-height值=height值

<div class="box">文本垂直居中</div>

.box{
    width: 200px;
    height:200px;
    background-color: red;
    line-height: 200px;
}

2、多行文本垂直居中

<div class="container">
    <div class="box">多行文本垂直居中！！！！！！！！！！</div>
</div>

.container{
    width: 100px;
    height:200px;
    background-color: red;
    display: table;
}
.box{
    display: table-cell;
    vertical-align: middle;
}

3、块级元素垂直居中

flex

<div class="container">
    <div class="box">垂直居中</div>
</div>

.container{
    width: 100px;
    height:200px;
    background-color: darkgray;
    display: flex;
    align-items: center;
}

position:absolute + top50%+负margin

position:absolute + top50% + transform（不定高，即子元素尺寸未知，transform是CSS3的属性，如果需要保证浏览器兼容性，使用最后一种方式）

position:absolute + top/bottom=0 + margin:auto；(不定高)

水平垂直居中

绝对定位+margin:auto

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

.container{
    position: relative;
    width: 600px;
    height: 600px;
    background-color: darkgray;
}
.box{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: darkgreen;
    left: 0;
    right: 0;
    top:0;
    bottom:0;
    margin: auto;
}

绝对定位+负margin

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

.container{
    position: relative;
    width: 600px;
    height: 600px;
    background-color: darkgray;
}
.box{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: darkgreen;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-100px;
}

 绝对定位+transform

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

.container{
    position: relative;
    width: 600px;
    height: 600px;
    background-color: darkgray;
}
.box{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: darkgreen;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

flex布局  

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

.container{
    height:600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box{
    width: 200px;
    height: 200px;
    background-color: darkgreen;
}

参考：CSS-水平居中、垂直居中、水平垂直居中

2、CSS 隐藏元素的几种方法（显示display和可见性visibility区别）

opacity: 0; 占据页面空间，自身绑定的事件可以被触发；

visibility: hidden; 占据页面空间，自身绑定的事件不能被触发；

display: none; 不占据页面空间，自身绑定的事件不能被触发。这种方式产生的效果就像元素完全不存在；

3、rgba()和 opacity 的透明效果有什么不同？

opacity会继承父元素的opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。

opacity作用于元素和元素的内容，RGBA一般作为背景色background-color 或者颜色color 的属性值，透明度由其中的alpha 值生效。

4、设备像素比？

物理像素（也叫设备像素），设备屏幕上的像素点个数，也就是我们经常看到的手机分辨率所描述的数字；

设备独立像素dips（逻辑像素），就是我们手机的实际的视窗口的大小。具体来说可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。

devicePixelRatio(dpr)=物理像素/设备独立像素，代表一个屏幕是否是高清屏幕

5、rem 布局字体太大怎么处理?

getComputedStyle方法能够获取到计算后的样式、大小。

(function(doc, win) {

    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);

    var scale = 1.0;
    var ratio = 1;
    if (isIPhone) {
        if (window.devicePixelRatio == 2) {
            scale *= 0.5;
            ratio *= 2;
        }
        if (window.devicePixelRatio == 3) {
            scale *= (1 / 3);
            ratio *= 3;
        }
    }
    var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale + ',' + ' minimum-scale=' + scale + ', width=device-width,' + ' user-scalable=no" />';
    document.write(text);

    var docEl = doc.documentElement
    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
    var recalc = function() {
        var clientWidth = docEl.clientWidth
        if (!clientWidth) return
        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'

        // 解决部分rem特别大的问题
        var docElFontSize = docEl.style.fontSize.replace(/px/gi, '')
        var computedFontSize = win.getComputedStyle(docEl)['font-size'].replace(/px/gi, '')
        docElFontSize != computedFontSize && (docEl.style.fontSize = docElFontSize * docElFontSize / computedFontSize + 'px')
    }
    if (!doc.addEventListener) return
    recalc()
    win.addEventListener(resizeEvt, recalc, false)
})(document, window);

6、line-height如何继承？

1）写具体数值，如30px，则继承该值

2）写比例，如2倍，则继承该比例

3）写百分比，如200%，则继承计算出来的值（易错）

<p>这是一行文字</p>

body{
    font-size: 20px;
    /*line-height: 50px;  p的line-height:50px*/
    /*line-height: 1.5;  line-height为16*1.5=24px*/
    /*line-height: 200%;  line-height为20*200%=40px*/
}
p{
    background-color: #ccc;
    font-size:16px;
}

四、CSS 选择器及其优先级

1、CSS 选择器有哪些？哪些属性可以继承？优先级算法如何计算？

（1）id选择器（ # myid）

（2）类选择器（.myclassname）

（3）标签选择器（div, h1, p）

（4）属性选择器（a[rel = "external"]）

（5）通配符选择器（ * ）

（6）伪类选择器（a: hover, li: nth - child）

（7）后代选择器（li a）

（8）相邻选择器（h1 + p）

（9）子选择器（ul < li） 

可继承：字体系列属性：font-size、font-family，文本系列属性：color、text-align、line-height, 元素可见性：visibility，表格布局属性：table-layout，列表属性：list-style；

不可继承 ：border padding margin width height ;

2、优先级算法如何计算？

样式的引用方式对css优先级的影响：

外部样式 < 内部样式 < 内联样式，但是有!important的样式除外。

<!-- 内联样式 -->
<span style="color:red;">Hello</span>

<style type="text/css">
/* 内部样式 */
    h3{color:green;}
</style>

<!-- 外部样式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>

选择器对css样式优先级的影响：

!important >  id > class= 属性=伪类 > tag 

如果同一个元素在没有其他样式的作用影响下，其Class定义了多个并以空格分开，其优先级顺序为：

一个元素同时应用多个class，后定义的优先（即近者优先），属性后插有 !important 的属性拥有最高优先级

参考：CSS的样式优先级；CSS样式定义的优先级顺序总结 

五、纯 CSS 创建一个三角形、梯形、菱形、平行四边形

三角形 直角？等边？
<div class="container">
</div>

.container {
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 40px solid #ff0000;
}

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

梯形
.container {
    width: 100px;
    height: 0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid orange;
}

平行四边形 图形倾斜
.container {
        margin: 100px auto auto 100px;
        width: 100px;
        height: 100px;
        background-color: yellow;
        transform: skew(-30deg);
    }

菱形 图像旋转
.container {
    margin: 100px auto auto 100px;
    width: 100px;
    height: 100px;
    background-color: yellow;
    transform: rotate(45deg);
}

圆形
.container {
    margin: 100px auto auto 100px;
    width: 100px;
    height: 100px;
    background-color: yellow;
    border-radius: 50px;/*宽高一样，border-radius设为宽高的一半*/
}

椭圆
.container {
    margin: 100px auto auto 100px;
    width: 200px;
    height: 100px;
    background-color: yellow;
    border-radius: 200px/100px;/*border-radius:水平半径/垂直半径*/
}

六、CSS 预处理

1、Sass、Less是什么？

CSS 预处理器， CSS 上的一种抽象层，是一种特殊的语法/语言编译成 CSS。

例如 Less 是一种动态样式语言.。将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数。 LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node. js)。

参考：CSS预处理器SCSS

2、使用 CSS 预处理的优缺点分别是什么？

1）优点：

便于扩展，提高 CSS 可维护性。

引入变量，增添主题功能。可以在不同的项目中共享主题文件。

易于编写嵌套选择器。

通过混合（Mixins）避免生成重复的 CSS。

使用选择器继承来精简CSS

2）缺点：

将代码分割成多个文件。不进行预处理的 CSS，虽然也可以分割成多个文件，但需要建立多个 HTTP 请求加载这些文件。

完全兼容 CSS 代码，可以方便地应用到老项目中。

需要预处理工具。

重新编译的时间可能会很慢。

3、stylus/sass/less 区别

1、基本语法

Less标准的css语法 ，有花括号和冒号；Sass 同时也支持老的语法，就是不包含花括号和分号的方式；Stylus花括号和冒号都可以不写 比较自由

Sass 默认使用 . sass 扩展名，而 Less 使用 . less 扩展名，Stylus 默认使用 . styl 的文件扩展名

2、变量

Sass 变量必须是以$开头的，然后变量和值之间使用冒号（：）隔开，和 css 属性是一样的

Less css 中变量都是用@开头的，其余与 Sass 都是一样的

Stylus 对变量是没有任何设定的，可以是以$开头，或者任何的字符，而且与变量之间可以用冒号、空格隔开，但是在 Stylus 中不能用@开头

3、嵌套、运算符写法一致

4、继承

Sass可通过@extend来实现代码组合声明；Stylus同样也是通过@extend；而 Less里的继承更像是mixin写法

5、混合

Sass的混合需要通过@include来实现；Less和Stylus不需要

参考：Sass、Less 和 Stylus区别总结

七、动画

1、transform translate transition 的区别

transform是css3的一个属性，变换、变形

translate是transform的属性值，指元素进行2D变换

transition是一组css属性变换到另一组属性的动画展示过程

2、过渡与动画的区别是什么

transition：

可以在一定的时间内实现元素的状态过渡为最终状态，用于模拟以一种过渡动画效果，但是功能有限，只能用于制作简单的动画效果而动画属性

animation：

可以制作类似 Flash 动画，通过关键帧控制动画的每一步，控制更为精确，从而可以制作更为复杂的动画。

3、简单动画的实现，如旋转等

让一个 div 元素旋转 360 度示例

1. div 的样式结构:

div {
    margin: 50px auto;
    width: 200px;
    height: 200px;
    background-color: pink;
}

2. 设置旋转属性的类名:

div.rotate {
    /* 旋转360度 */
    transform: rotate(360deg);
    /* all表示所有属性,1s表示在一秒的时间完成动画 */
    transition: all 1s;
}

transition 有四个属性:

property: 规定应用过渡的 CSS 属性的名称。

duration: 定义过渡效果花费的时间。默认是 0,单位是 s。

timing-function: 规定过渡效果的时间曲线。默认是 "ease"。匀速'linear',加速'ease-in',减速'ease-out',先快后慢'ease-in-out'。

delay: 规定过渡效果何时开始。默认是 0。单位 s。

可以连写: transition: property duration timing-function delay;

3. 给 div 元素设置鼠标移入时旋转, 也就是给它加上. rotate 类名. 鼠标移出时移除类名

$(function() {
    $("div")
        .mouseenter(function() {
            $(this).addClass("rotate");
        })
        .mouseleave(function() {
            $(this).removeClass("rotate");
        });
});

八、图片

1、PNG, GIF, JPG 的区别

gif：无损压缩；支持boolean透明，即要么完全透明，要么完全不透明；适合简单动画

jpeg：有损压缩，可控制压缩质量；不支持透明；适合照片

png：无损压缩；支持alpha透明度；适合图标、背景、按钮

webp 谷歌开发的旨在加快图片加载速度的图片格式，图片压缩体积是 jpeg 的 2/3，有损压缩。高版本的 W3C 浏览器才支持，google39+，safari7+

2、精灵图和 base64 如何选择？

Css Sprites（雪碧图或 css 精灵），是网页图片处理的一种方式，它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

原理： 将许多的小图片整合到一张大图片中，利用 css 中的 background-image 属性，background-position 属性定位某个图片位置，来达到在大图片中引用某个部位的小图片的效果。

优点： 减少网页的 http 请求，提升网页加载速度。 合并多张小图片成大图，能减少字节总数（大图大小<=多张小图大小）.

缺点： 前期需要处理图片将小图合并，多些许工程量。 对于需要经常改变的图片维护起来麻烦。

base64 是网络上最常见的用于传输 8Bit 字节代码的编码方式之一，要求把每三个 8Bit 的字节转换为四个 6Bit 的字节。 原则上，计算机中所有内容都是二进制形式存储的，所以所有内容（包括文本、影音、图片等）都可以用 base64 来表示。

优点： base64 的图片会随着 html 或者 css 一起下载到浏览器, 减少了请求，可避免跨域问题；对数据进行简单的加密，肉眼安全。

缺点： 低版本的 IE 浏览器不兼容。 体积会比原来的图片大一点。 css 中过多使用 base64 图片会使得 css 过大，不利于 css 的加载。

适用场景： 应用于小的图片几 k 的，太大的图片会转换后的大小太大，得不偿失。 

九、其他

1、link和@import区别？

（1）link 属于 XHTML 标签，而@import 是 CSS 提供的；

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

（3）import 只在 IE5 以上才能识别，而 link 是 XHTML 标签，无兼容问题；

（4）link 方式的样式的权重高于@import 的权重.

2、CSS 合并方法

@import url(css 文件地址)

3、偏移、卷曲、可视

偏移
offsetWidth	  width  +  padding  +  border
offsetHeight	height +  padding  +  border
offsetLeft
offsetTop
offsetParent
注意：没有offsetRight和offsetBottom
************************************************************************************************

卷曲
scrollWidth    width  +  padding
scrollHeight   当内部的内容溢出盒子的时候， 顶边框的底部，计算到内容的底部；如果内容没有溢出盒子，计算方式为盒子内部的真实高度（边框到边框）
scrollLeft     这个scroll系列属性不是只读的
scrollTop
scroll()

此函数可以获取卷曲的高度和卷曲的宽度
function myScroll() {
   return {
      top: window.pageYOffset  || document.documentElement.scrollTop  || document.body.scrollTop  || 0,
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
    };

}

滚动滚动条的时候触发事件
box（window）.onscroll = function () {}
************************************************************************************************

可视
clientWidth   获取的是元素内部的真实宽度 width  +  padding
clientHeight  边框之间的高度
clientLeft    相当于左边框的宽度  如果元素包含了滚动条，并且滚动条显示在元素的左侧。这时，clientLeft属性会包含滚动条的宽度17px
clientTop     相当于顶边框的宽度
client()

此函数可以获取浏览器可视区域的宽高
function myClient() {
    return {
        wid: window.innerWidth  || document.documentElement.clientWidth  || document.body.clientWidth  || 0,
       heit: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
    };
}

----------------------------------------------------------------------------------------------
@offsetHeight和style.height的区别

demo.style.height只能获取行内样式，如果样式写到了其他地方，甚至根本就没写，便无法获取
style.height是字符串（而且带单位），offsetHeight是数值
demo.style.height可以设置行内样式，offsetHeight是只读属性
因此，一般用demo.offsetHeight来获取某元素的真实宽度/高度，用style.height来设置宽度/高度

----------------------------------------------------------------------------------------------
@offsetLeft和style.left的区别

一、style.left只能获取行内样式
二、offsetLeft只读，style.left可读可写
三、offsetLeft是数值，style.left是字符串并且有单位px
四、如果没有加定位，style.left获取的数值可能是无效的
五、最大区别在于offsetLeft以border左上角为基准，style.left以margin左上角为基准

----------------------------------------------------------------------------------------------
@scrollHeight和scrollWidth

标签内部实际内容的高度/宽度
不计算边框，如果内容不超出盒子，值为盒子的宽高（不带边框）
如果内容超出了盒子，就是从顶部或左部边框内侧一直到内容a的最外部分

----------------------------------------------------------------------------------------------
@scrollTop和scrollLeft

被卷去部分的 顶部/左侧 到可视区域 顶部/左侧 的距离

4、什么是 Css Hack？ie6, 7, 8 的 hack 分别是什么？

不同厂商的浏览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack。

参考：史上最全的CSS hack方式一览

5、什么是 FOUC? 如何避免？

在引用 css 的过程中，如果方法不当或者位置引用不对，会导致某些页面在 windows 下的 ie 出现一些奇怪的现象，以无样式显示页面内容的瞬间闪烁，这种现象称为文档样式短暂失效（Flash Of Unstyled Content），简称 FOCU。

原因大致为：

其实原理很清楚：当样式表晚于结构性 html 加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。

解决方法：使用 link 标签将样式表放在文档 head 中。

6、文本超出部分显示省略号

单行

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 最多显示几行
overflow: hidden;

7、css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向：line-height

水平方向：letter-spacing，还可以消除 inline-block 元素间的换行符空格间隙问题。

8、@media 属性

9、display:inline-block 什么时候不会显示间隙？

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

1、父亲设置font-size=0

2、 删除空格，但是会不利于阅读

3、设置letter-spacing 设置字母之间的间隙为-4px 去抵消字母与字母之间的空格

4、设置word-spacing 单词之间的间隙

5、使用 margin 负值

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

float隐性的把内联元素转化为块元素，但是他不占据一行，对外是内联元素的属性，相当于：display:inline-block;

使用 import 方法导入样式表

将样式表放在页面底部

有几个样式表，放在 html 结构的不同位置。

all

适用于所有设备。

print

为了加载合适的文档到当前使用的可视窗口. 需要提前咨询 paged media（媒体屏幕尺寸）, 以满足个别设备网页尺寸不匹配等问题。

screen

主要适用于彩色的电脑屏幕

speech

speech 这个合成器. 注意: CSS2 已经有一个相似的媒体类型叫 aural.