CSS相关基础知识汇总

时间 2019-11-11

标签 css 相关基础知识汇总栏目 CSS 繁體版

原文原文链接

一、盒模型

盒子模型是由内容、边框、间隙（padding）、间隔（margin）组成
盒子实际宽度（高度）=内容（content）+边框（border）+间隙（padding）+间隔（margin）。对于任何一个元素设置width和height控制内容大小，也能够分别设置各自的边框（border）、间隙（padding）、间隔（margin）
border是元素的外围，计算元素的宽和高要把border加上
padding用于控制content与border之间的距离，padding:10px 20px 10px 10px;分别对应上、右、下、左四个方向，padding区域也有颜色
margin用于控制块与块（能够理解成块级元素）之间的距离

2、flex（弹性布局）

Webkit 内核的浏览器，必须加上-webkit前缀css

flex-direction

　　row（默认值）：主轴为水平方向，起点在左端。html

　　row-reverse：主轴为水平方向，起点在右端。node

　　column：主轴为垂直方向，起点在上沿。css3

　　column-reverse：主轴为垂直方向，起点在下沿。git

flex-wrap

　　nowrap（默认）：不换行github

　　wrap：换行，第一行在上方web

　　wrap-reverse：换行，第一行在下方算法

flex-flow

　　flex-direction属性和flex-wrap属性的简写形式chrome

justify-content

　　flex-start（默认值）：左对齐编程

　　flex-end：右对齐

　　center：居中

　　space-between：两端对齐，项目之间的间隔都相等。

　　space-around：每一个项目两侧的间隔相等。因此，项目之间的间隔比项目与边框的间隔大一倍。

align-items

　　flex-start：交叉轴的起点对齐。

　　flex-end：交叉轴的终点对齐。

　　center：交叉轴的中点对齐。

　　baseline: 项目的第一行文字的基线对齐。

　　stretch（默认值）：若是项目未设置高度或设为auto，将占满整个容器的高度。

align-content

　　flex-start：与交叉轴的起点对齐。

　　flex-end：与交叉轴的终点对齐。

　　center：与交叉轴的中点对齐。

　　space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

　　space-around：每根轴线两侧的间隔都相等。因此，轴线之间的间隔比轴线与边框的间隔大一倍。

　　stretch（默认值）：轴线占满整个交叉轴。

3、css单位

px：绝对单位，页面按精确像素展现
em：相对单位，基准点为父节点字体的大小，若是自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持
vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%

4、css选择器

通用选择器：*

类别选择器：.class

id选择器：#id

标签选择器：p

后代选择器：div p

子选择器：div > p

群组选择器：div , p

相邻同胞选择器：div +p

伪类选择器：:link :visited :active :hover :focus :first-child

伪元素选择器：:first-letter :first-line:before :after :lang(language)

属性选择器：[attribute] [attribute=value] [attribute~=value] [attribute|=value]

超连接：LVHA的顺序解决点击连接后hover不出现的问题

不一样级别： !important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

同一级别：CSS优先级：是由四个级别和各级别的出现次数决定的。四个级别分别为：行内选择符、ID选择符、类别选择符、元素选择符。

　　优先级的算法：
　　每一个规则对应一个初始"四位数"：0、0、0、0
　　如果行内选择符，则加一、0、0、0
　　如果 ID选择符，则加0、一、0、0
　　如果类选择符/属性选择符/伪类选择符，则分别加0、0、一、0
　　如果元素选择符/伪元素选择符，则分别加0、0、0、1
　　算法：将每条规则中，选择符对应的数相加后获得的”四位数“，从左到右进行比较，大的优先级越高。

5、bfc（块级格式化上下文）清除浮动

BFC特性：

块级格式化上下文会阻止外边距叠加：当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距会发生叠加。换句话说，若是这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。

块级格式化上下文不会重叠浮动元素：根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文建立隐式的外边距来阻止它和浮动元素的外边距叠加。因为这个缘由，当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起做用。

BFC布局规则：

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

哪些元素会生成BFC

根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

清除浮动的方法：

①在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响。即加标签，并设置标签的style为clear:both

②伪类元素

.clearfix:after{

content:"";//设置内容为空

height:0;//高度为0

lineheight:

0;//行高为0

display:block;//将文本转为块级元素

visibility:hidden;//将元素隐藏

clear:both//清除浮动

}

③触发BFC

6、层叠上下文

层叠上下文(stacking context)，是HTML中一个三维的概念。在CSS2.1规范中，每一个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。通常状况下，元素在页面上沿X轴Y轴平铺，咱们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另外一个元素或者被另外一个元素覆盖。

若是一个元素含有层叠上下文，(也就是说它是层叠上下文元素)，咱们能够理解为这个元素在Z轴上就“高人一等”，最终表现就是它离屏幕观察者更近。

层叠等级指的又是什么？层叠等级(stacking level，叫“层叠级别”/“层叠水平”也行)

在同一个层叠上下文中，它描述定义的是该层叠上下文中的层叠上下文元素在Z轴上的上下顺序。
在其余普通元素中，它描述定义的是这些普通元素在Z轴上的上下顺序。

普通元素的层叠等级优先由其所在的层叠上下文决定。

层叠等级的比较只有在当前层叠上下文元素中才有意义。不一样层叠上下文中比较层叠等级是没有意义的。

如何产生层叠上下文呢？如何让一个元素变成层叠上下文元素呢？

HTML中的根元素<html></html>自己就具备层叠上下文，称为“根层叠上下文”。
普通元素设置position属性为非static值并设置z-index属性为具体数值，产生层叠上下文。
CSS3中的新属性也能够产生层叠上下文。

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素老是会处于堆叠顺序较低的元素的前面。

首先，z-index属性值并非在任何元素上都有效果。它仅在定位元素（定义了position属性，且属性值为非static值的元素）上有效果。
判断元素在Z轴上的堆叠顺序，不只仅是直接比较两个元素的z-index值的大小，这个堆叠顺序实际由元素的层叠上下文、层叠等级共同决定。

屏幕上的xyz轴

<style>
  div {  
    position: relative;  
    width: 100px;  
    height: 100px;  
  }  
  p {  
    position: absolute;  
    font-size: 20px;  
    width: 100px;  
    height: 100px;  
  }  
  .a {  
    background-color: blue;  
    z-index: 1;  
  }  
  .b {  
    background-color: green;  
    z-index: 2;  
    top: 20px;  
    left: 20px;  
  }  
  .c {  
    background-color: red;  
    z-index: 3;  
    top: -20px;  
    left: 40px;  
  }
</style>

<body>  
  <div>  
    <p class="a">a</p>  
    <p class="b">b</p>  
  </div> 

  <div>  
    <p class="c">c</p>  
  </div>  
</body>

由于p.a、p.b、p.c三个的父元素div都没有设置z-index，因此不会产生层叠上下文，因此.a、.b、.c都处于由<html></html>标签产生的“根层叠上下文”中，属于同一个层叠上下文，此时谁的z-index值大，谁在上面。

<style>
  div {
    width: 100px;
    height: 100px;
    position: relative;
  }
  .box1 {
    z-index: 2;
  }
  .box2 {
    z-index: 1;
  }
  p {
    position: absolute;
    font-size: 20px;
    width: 100px;
    height: 100px;
  }
  .a {
    background-color: blue;
    z-index: 100;
  }
  .b {
    background-color: green;
    top: 20px;
    left: 20px;
    z-index: 200;
  }
  .c {
    background-color: red;
    top: -20px;
    left: 40px;
    z-index: 9999;
  }
</style>

<body>
  <div class="box1">
    <p class="a">a</p>
    <p class="b">b</p>
  </div>

  <div class="box2">
    <p class="c">c</p>
  </div>
</body>

咱们发下，虽然p.c元素的z-index值为9999，远大于p.a和p.b的z-index值，可是因为p.a、p.b的父元素div.box1产生的层叠上下文的z-index的值为2，p.c的父元素div.box2所产生的层叠上下文的z-index值为1，因此p.c永远在p.a和p.b下面。

同时，若是咱们只更改p.a和p.b的z-index值，因为这两个元素都在父元素div.box1产生的层叠上下文中，因此，谁的z-index值大，谁在上面。

“层叠顺序”(stacking order)表示元素发生层叠时按照特定的顺序规则在Z轴上垂直显示。因而可知，前面所说的“层叠上下文”和“层叠等级”是一种概念，而这里的“层叠顺序”是一种规则。

在不考虑CSS3的状况下，当元素发生层叠时，层叠顺讯遵循上面途中的规则。
这里值得注意的是：

左上角"层叠上下文background/border"指的是层叠上下文元素的背景和边框。
inline/inline-block元素的层叠顺序要高于block(块级)/float(浮动)元素。
单纯考虑层叠顺序，z-index: auto和z-index: 0在同一层级，但这两个属性值自己是有根本区别的。

划重点了！！！！到底应该怎么判断呢？？？

首先先看要比较的两个元素是否处于同一个层叠上下文中：

若是是，谁的层叠等级大，谁在上面（怎么判断层叠等级大小呢？——看“层叠顺序”图）。
若是两个元素不在统一层叠上下文中，请先比较他们所处的层叠上下文的层叠等级。

当两个元素层叠等级相同、层叠顺序相同时，在DOM结构中后面的元素层叠等级在前面元素之上。

CSS3中的属性对层叠上下文的影响

CSS3中出现了不少新属性，其中一些属性对层叠上下文也产生了很大的影响。以下：

父元素的display属性值为flex|inline-flex，子元素z-index属性值不为auto的时候，子元素为层叠上下文元素；
元素的opacity属性值不是1；
元素的transform属性值不是none；
元素mix-blend-mode属性值不是normal`；
元素的filter属性值不是none；
元素的isolation属性值是isolate；
will-change指定的属性值为上面任意一个；
元素的-webkit-overflow-scrolling属性值设置为touch。

CSS3中，元素属性知足以上条件之一，就会产生层叠上下文。

本部分参考连接：https://www.jianshu.com/p/0f88946a0746

7、常见页面布局

1. 左定宽，右自适应

<!--position + margin：-->
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .left {
            width: 200px;
            height: 600px;
            background: red;
            text-align: center; /*文字水平居中*/
            line-height: 600px; /*文字垂直居中*/
            color: #fff;

            position: absolute;
            top: 0;
            left: 0;
        }

        .right {
            height: 600px;
            background: yellow;
            text-align: center; /*文字水平居中*/
            line-height: 600px; /*文字垂直居中*/

            margin-left: 210px;
        }
    </style>

<div class="left">定宽</div>
<div class="right">自适应</div>

<!--float + margin：-->
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .left {
            width: 200px;
            height: 600px;
            background: red;
            text-align: center; /*文字水平居中*/
            line-height: 600px; /*文字垂直居中*/
            color: #fff;

            float: left;
        }

        .right {
            height: 600px;
            background: yellow;
            text-align: center; /*文字水平居中*/
            line-height: 600px; /*文字垂直居中*/

            margin-left: 210px;
        }
    </style>
<div class="left">定宽</div>
<div class="right">自适应</div>

<!--3.float + overflow-->
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .left {
            width: 200px;
            height: 600px;
            background: red;
            text-align: center; /*文字水平居中*/
            line-height: 600px; /*文字垂直居中*/
            color: #fff;

            float: left;
        }

        .right {
            height: 600px;
            background: yellow;
            text-align: center; /*文字水平居中*/
            line-height: 600px; /*文字垂直居中*/

            /*建立BFC   
            设置 overflow: hidden 会触发 BFC 模式（Block Formatting Context）块级格式上下文。*/
            overflow: hidden;
        }
    </style>
<div class="left">定宽</div>
<div class="right">自适应</div>

<!--4. flex-->
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .parent {
            display: flex;
        }

        .left {
            width: 200px;
            height: 600px;
            background: red;
            text-align: center; /*文字水平居中*/
            line-height: 600px; /*文字垂直居中*/
            color: #fff;
        }

        .right {
            height: 600px;
            background: yellow;
            text-align: center; /*文字水平居中*/
            line-height: 600px; /*文字垂直居中*/

            flex: 1;
        }
    </style>
<body class="parent">
<div class="left">定宽</div>
<div class="right">自适应</div>
</body>

2. 圣杯布局

比较特殊的三栏布局，一样也是两边固定宽度，中间自适应，惟一区别是dom结构必须是先写中间列部分，这样实现中间列能够优先加载。

  .container {
    padding-left: 220px;//为左右栏腾出空间
    padding-right: 220px;
  }
  .left {
    float: left;
    width: 200px;
    height: 400px;
    background: red;
    margin-left: -100%;
    position: relative;
    left: -220px;
  }
  .center {
    float: left;
    width: 100%;
    height: 500px;
    background: yellow;
  }
  .right {
    float: left;
    width: 200px;
    height: 400px;
    background: blue;
    margin-left: -200px;
    position: relative;
    right: -220px;
  }
  <article class="container">
    <div class="center">
      <h2>圣杯布局</h2>
    </div>
    <div class="left"></div>
    <div class="right"></div>
  </article>

3. 双飞翼布局

一样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。并且任何一栏均可以是最高栏，不会出问题。

    .container {
        min-width: 600px;//确保中间内容能够显示出来，两倍left宽+right宽
    }
    .left {
        float: left;
        width: 200px;
        height: 400px;
        background: red;
        margin-left: -100%;
    }
    .center {
        float: left;
        width: 100%;
        height: 500px;
        background: yellow;
    }
    .center .inner {
        margin: 0 200px; //新增部分
    }
    .right {
        float: left;
        width: 200px;
        height: 400px;
        background: blue;
        margin-left: -200px;
    }
    <article class="container">
        <div class="center">
            <div class="inner">双飞翼布局</div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </article>

4. 等高布局

咱们经过等高布局即可解决圣杯布局的第二点缺点，由于背景是在 padding 区域显示的， 设置一个大数值的 padding-bottom，再设置相同数值的负的 margin-bottom，并在全部列外面加上一个容器，并设置 overflow:hidden 把溢出背景切掉。这种可能实现多列等高布局，而且也能实现列与列之间分隔线效果，结构简单，兼容全部浏览器。

.center,
.left,
.right {
   padding-bottom: 10000px;
   margin-bottom: -10000px;
}
.container {
   padding-left: 220px;
   padding-right: 220px;
   overflow: hidden;//把溢出背景切掉
}

本部分摘自：http://www.javashuo.com/article/p-oomacldo-dg.html

8、响应式布局

① 设置 Meta 标签

大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度做为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。

user-scalable = no 属性可以解决 iPad 切换横屏以后触摸才能回到具体尺寸的问题。

②经过媒介查询来设置样式 Media Queries

Media Queries 是响应式设计的核心。

它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px，那么能够这样写：

@media screen and (max-width: 980px) {

  #head { … }

  #content { … }

  #footer { … }

}

这里的样式就会覆盖上面已经定义好的样式。

③ 设置多种试图宽度

假如咱们要设定兼容 iPad 和 iphone 的视图，那么能够这样设置：

/** iPad **/

@media only screen and (min-width: 768px) and (max-width: 1024px) {}

/** iPhone **/

@media only screen and (min-width: 320px) and (max-width: 767px) {}

9、css预处理，后处理

CSS 预处理器

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

广义上说，目标格式为 CSS 的 预处理器 是 CSS 预处理器，但本文特指以最终生成 CSS 为目的的 领域特定语言。
Sass、LESS、Stylus 是目前最主流的 CSS 预处理器。

实现原理

取到 DSL 源代码 的 分析树
将含有 动态生成 相关节点的 分析树 转换为 静态分析树
将 静态分析树 转换为 CSS 的 静态分析树
将 CSS 的 静态分析树 转换为 CSS 代码

优缺点

优势：语言级逻辑处理，动态特性，改善项目结构
缺点：采用特殊语法，框架耦合度高，复杂度高

CSS 后处理器

CSS 后处理器是对 CSS 进行处理，并最终生成 CSS 的预处理器，它属于广义上的 CSS 预处理器。
咱们好久之前就在用 CSS 后处理器了，最典型的例子是 CSS 压缩工具（如 clean-css），只不过之前没单独拿出来讲过。还有最近比较火的 Autoprefixer，以 Can I Use 上的浏览器支持数据为基础，自动处理兼容性问题。

CSS 后处理器 是对 CSS 进行处理，并最终生成 CSS 的 预处理器，它属于广义上的 CSS 预处理器。
咱们好久之前就在用 CSS 后处理器 了，最典型的例子是 CSS 压缩工具（如 clean-css），只不过之前没单独拿出来讲过。

实现原理

将 源代码 作为 CSS 解析，得到 分析树
对 CSS 的 分析树 进行 后处理
将 CSS 的 分析树 转换为 CSS 代码

优缺点

优势：使用 CSS 语法，容易进行模块化，贴近 CSS 的将来标准
缺点：逻辑处理能力有限

本部分参考连接：https://blog.csdn.net/yushuangyushuang/article/details/79209752

10、css3新特性

1.CSS3的选择器

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

2. @Font-face 特性

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

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

3. 圆角 border-radius: 15px;

4.阴影（Shadow）

.class1{
    text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5); 
}

5.CSS3 的渐变效果

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

6.css弹性盒子模型

<div class="boxcontainer">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>
.boxcontainer { 
    width: 1000px; 
    display: -webkit-box; 
    display: -moz-box; 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
} 
            
 .item { 
    background: #357c96; 
    font-weight: bold; 
    margin: 2px; 
    padding: 20px; 
    color: #fff; 
    font-family: Arial, sans-serif; 
}

7.Transition 对象变换时的过渡效果

 transition-property 对象参与过渡的属性
 transition-duration 过渡的持续时间
 transition-timing-function 过渡的类型
 transition-delay 延迟过渡的时间

transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;
<!--示例代码-->
<style type="text/css">
    .main{
        position: relative;
        margin: 0 auto;
        height:45px;
        width: 300px;
        background-color:lightgray;
        transition:background-color .6s ease-in 0s;
    }
    .main:hover{
        background-color: dimgray;
    }
</style>
<div class="main"></div>

8. Transforms 2D/3D转换效果　　

主要包括 translate（水平移动）、rotate（旋转）、scale（伸缩）、skew（倾斜）、沿X，Y，Z轴的旋转

<style type="text/css">
    .main{
        position: relative;
        top:200px;
        margin: 0 auto;
        height:45px;
        width: 300px;
        background-color:dimgray;
        transition:transform .6s ease 0s;
        transform: rotate(0deg);
    }
    .main:hover{
        transform: rotate(180deg);
    }
</style>
 <div class="main"></div>

9. Animation动画特效

下面的表格列出了 @keyframes 规则和全部动画属性：

属性	描述
@keyframes	规定动画。
animation	全部动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 "ease"。
animation-delay	规定动画什么时候开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。

<style type="text/css">
    .main{
        position: absolute;
        left: 10px;
        top:200px;
        height:45px;
        width: 300px;
        background-color:cadetblue;
    }
    .main:hover{
        animation: animations 2s ease 0s;
    }
    @keyframes animations {
        0%{
            left: 10px;
            opacity: 1;
        }
        50%,70%{
            left: 50%;
            opacity: .7;
            margin-left:-150px;
        }
        100%{
            left: 100%;
            opacity: 0;
            margin-left:-300px;
        }
    }
</style>
 <div class="main"></div>

当动画为 25% 及 50% 时改变背景色，而后当动画 100% 完成时再次改变：

@keyframes myfirst {
　　0% {background: red;}
　　25% {background: yellow;}
　　50% {background: blue;}
　　100% {background: green;}
}

补充：CSS3动画卡顿怎么解决？

虽说浏览器执行js是单线程执行（注意，是执行，并非说浏览器只有1个线程，而是运行时，runing），但实际上浏览器的2个重要的执行线程，这 2 个线程协同工做来渲染一个网页：主线程和合成线程

通常状况下，主线程负责：运行 JavaScript；计算 HTML 元素的 CSS 样式；页面的布局；将元素绘制到一个或多个位图中；将这些位图交给合成线程。

相应地，合成线程负责：经过 GPU 将位图绘制到屏幕上；通知主线程更新页面中可见或即将变成可见的部分的位图；计算出页面中哪部分是可见的；计算出当你在滚动页面时哪部分是即将变成可见的；当你滚动页面时将相应位置的元素移动到可视区域。

在使用height，width，margin，padding做为transition的值时，会形成浏览器主线程的工做量较重，例如从margin-left：-20px渲染到margin-left:0，主线程须要计算样式margin-left:-19px,margin-left:-18px，一直到margin-left:0，并且每一次主线程计算样式后，合成进程都须要绘制到GPU而后再渲染到屏幕上，先后总共进行20次主线程渲染，20次合成线程渲染，20+20次，总计40次计算。

也就是说，主线程每次都须要执行Scripts，Render Tree ,Layout和Paint这四个阶段的计算。

而若是使用transform的话，例如tranform:translate(-20px,0)到transform:translate(0,0)，主线程只须要进行一次tranform:translate(-20px,0)到transform:translate(0,0)，而后合成线程去一次将-20px转换到0px，这样的话，总计1+20计算。

css3动画卡顿的解决方案： 在使用css3 transtion作动画效果时，优先选择transform，尽可能不要使用height，width，margin和padding。

本部分摘自：http://www.javashuo.com/article/p-ojjjvoyb-g.html

11、display有哪些取值

none 此元素不会被显示，而且不占据页面空间，这也是与visibility:hidden不一样的地方，设置visibility:hidden的元素，不会被显示，可是仍是会占据原来的页面空间。
inline 行内元素元素会在一行内显示，超出屏幕宽度自动换行，不能设置宽度和高度，元素的宽度和高度只能是靠元素内的内容撑开。示例元素：span,b,i,a,u,sub,sup,strong,em
block 块级元素会独占一行，若是不设置宽度，其宽度会自动填满父元素的宽度，能够设置宽高，即便设置了宽度，小于父元素的宽度，块级元素也会独占一行。示例元素：div,h1-h6,ul,ol,dl,p
inline-block 行内块元素与行内元素同样能够再一行内显示，并且能够设置宽高，能够设置margin和padding。示例元素：input,button,img
list-item 列表元素。示例元素：li
table 会做为块级表格来显示(相似于<table>)，表格先后带有换行符。
inline-table 会做为内联表格来显示(相似于<table>)，表格先后没有换行符。
flex 多栏多列布局，火狐能够直接使用，谷歌和欧朋须要在属性值前面加-webkit-前缀，比较适合移动端开发使用。

12、相邻的两个inline-block节点为何会出现间隔，该如何解决

inline-block 后的元素建立了一个行级的块容器，该元素内部（内容）被格式化成一个块元素，同时元素自己则被格式化成一个行内元素。

也就是说，它是一个格式化为行内元素的块容器。兼具行内元素和块元素的特色。

DOM 规范中规定，一切皆是节点，换行或者空格，会被当成文档节点来处理。
因此那个空隙就是这个空的文档节点致使。（它由空格、换行或回车所产生空白符所致）

方法1. 将标签之间的空格与换行所有去掉

<p>
    <span>hello</span><span>world</span>
</p>

可是这样写很不人性化，能够用以下方式解决：

也就是在相邻的元素之间加上空白的html注释，变相地取消了他们之间的空白节点。还有其余的几种改法这里不一一列举，你们也能够自由发挥，只要是取消了相邻元素之间的空白节点就能达到目的。

<ul>
    <li>控球后卫</li><!--
    --><li>得分后卫</li><!--
    --><li>小前锋</li><!--
    --><li>大前锋</li><!--
    --><li>中锋</li>
</ul>

方法2. font-size设为零

<p>
    <span>hello</span>
    <span>world</span>
</p>

span { 
    display:inline-block;
    width:100px;
    background:#36c;
    color:#fff;
    font-size:30px;
    text-align:center;
}

p {
    font-size: 0;
}

方法3. letter-spacing和word-spacing改为某个负值

.span {
    letter-spacing: -.5em; /* webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    word-spacing: -.5em; /* IE < 8 && gecko: collapse white-space between units */
}

方法4. 使用负边距margin

ul li {
    display: inline-block;
    width: 160px;
    text-align: center;
    border-right: 1px solid #8E0303;
    margin-right: -10px;
}
ul li:last-child {
    border-right: none;
    margin-right: 0;
}

十3、meta viewport 移动端适配

让当前viewport的宽度等于设备的宽度，同时不容许用户手动缩放。

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

width=device-width: 让当前viewport宽度等于设备的宽度

user-scalable=no: 禁止用户缩放

initial-scale=1.0: 设置页面的初始缩放值为不缩放

maximum-scale=1.0: 容许用户的最大缩放值为1.0

minimum-scale=1.0: 容许用户的最小缩放值为1.0

十4、CSS实现宽度自适应100%，宽高16:9的比例的矩形

第一步先计算高度，假设宽100%，那么高为h=9/16=56.25%

第二步利用以前所说设置padding-bottom方法实现矩形

<div class="box">
  <div class="scale">
    <p>这是一个16：9的矩形</p>
  </div>
</div>

.box {
  width: 80%;
}

.scale {
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  position: relative;
}

.item {
  width: 100%;
  height: 100%;
  background-color: aquamarine;
  position: absolute;
}

十5、rem布局的优缺点

rem布局的本质是等比缩放，通常是基于宽度。

通常内容型的网站，都不太适合使用rem，由于大屏用户能够本身选择是要更大字体，仍是要更多内容，一旦使用了rem，就剥夺了用户的自由，好比百度知道，百度经验都没有使用rem布局；

一些偏向app类的，图标类的，图片类的，好比淘宝，活动页面，比较适合使用rem，由于调大字体时并不能调大图标的大小,rem能够作到100%的还原度，但同时rem的制做成本也更大。

本部分参考连接： https://www.jianshu.com/p/09bd0ca51ef5

十6、画三角形和圆形

当咱们设置盒子的width和height为0时，此时效果以下：

而后将border的底部取消

最后设置border的左边和右边为白色

/* border-radius的值要设置高宽的一半值  */
圆形 {
    display:inline-block;
    margin-right:5px;
    border-radius:50px; /* 圆形边缘弧度 */
    width:100px; /* 宽度 */
    height:100px; /* 高度 */
    background-color: red;
}

十7、1像素边框问题

咱们在html中，若是要设置一个1像素的边框，最多见的就是border: 1px solid #000; 这句就表示设置一个1像素的，实心的，黑色的边框。这个css语句，在pc上毫无问题，可是随着移动web的兴起，貌似就有些问题了。能够试验一下，把这句放到手机浏览器中显示一下，而后屏幕截图，你会惊奇的发现，1px已经显示为2px了。若是你放到iphone6 plus下，你会更神奇的发现，竟然是3px。

那么，为何设置为1px的边框，在手机下会显示为2px，甚至3px呢？其实，这就是retina屏幕搞的鬼。

至于retina的原理，这里就很少介绍了，retina的作法是把1像素分割成4个像素显示，这样看起来更细腻，但其实仍是1像素。因此，1px的边框，在retina屏幕上就会显示成2px的宽度。

viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长。

viewport讲解以及像素问题： http://www.javashuo.com/article/p-bzisvqdc-cb.html

viewport + rem 方案

利用viewport + rem + js 动态的修改页面的缩放比例，实现小于1像素的显示。在页面初始化时，在头部引入原始默认状态以下，接下来的任务就是js的动态修改缩放比以及实现rem根元素字体大小的设置。

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
<meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 

var viewport = document.querySelector("meta[name=viewport]")
if (window.devicePixelRatio == 1) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
} 
if (window.devicePixelRatio == 2) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')
} 
if (window.devicePixelRatio == 3) {
    viewport.setAttribute('content', 'width=device-width, initial-scale=0.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')
} 

var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
docEl.style.fontSize = fontsize;

本部份内容参考：https://www.jianshu.com/p/fa670b737a29

十8、position

position的取值：static(静态定位)、relative（相对定位）、absolute(绝对定位)、fixed（固定定位）。

其中static和fixed比较好理解：static是position的默认值，没有定位，元素出如今正常的的流中（忽略top、bottom、left、right、z-index声明）；fixed是至关于浏览器窗口进行定位，元素的位置经过left、right、top、bottom进行规定，可经过z-index进行层次分级

relative：定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在他是默认参照父级的原始点为原始点，无父级则以文本流的顺序在上一个元素的底部为原始点，配合TRBL（Top、Right、Bottom、left）进行定位。【通俗的说就是不管父级是否存在有没有TRBL均是以父级的左上角进行定位，可是父级的padding属性会对其有影响】

absolute:定位为absolute的元素脱离正常的文本流，但其在正常流中的位置不存在。若是父级没有设定position属性，则当前absolute元素以浏览器左上角为原始点进行定位，不然以父级元素左上角原定进行定位，位置由TRBL决定，父级的padding属性，对其不起做用。

relative定位的层是相对其最近的父元素（无论这个父元素的是什么定位方式），而absolute定位的层是相对其最近的定义为absolute或relative的父层（可能不是直接父元素）若是其父层都未定义absolute或relative，则相对body进行定位。

inherit：规定应该从父元素继承 position 属性的值。

十9、CSS能够给子元素继承的样式

字体相关：line-height, font-family, font-size, font-style, font-variant, font-weight, font
文本相关：letter-spacing, text-align, text-indent, text-transform, word-spacing
列表相关：list-style-image, list-style-position, list-style-type, list-style
颜色：color

二10、div水平居中和垂直居中

1) 只适用: 宽高已定

设置position: absolute(父元素记得设置: relative), 而后top和left设置50%, 50%, 再设置margin-left=宽/2, margin-top:宽/2

.div1{
    width:500px;
    height:500px;
    border:1px solid black;
    position: relative;     /*很重要,不能忘*/
}
.div2{
    background: yellow;
    width:300px;
    height:200px;
    margin-left:-150px;
    margin-top:-100px;
    top:50%;
    left:50%;
    position: absolute;
}

2) 只适用: 固定宽高; 若是宽高随意,想靠内部撑开的话, 会占满整个父div

依然是利用position：子div的上下左右都设置成0，而后margin设置auto。关键是要设置position：子absolute，父relative。

.div1{
    width:500px;
    height:500px;
    border:1px solid black;
    position: relative;     /*很重要,不能忘*/
}
.div2{
    background: yellow;
    width:300px;
    height:200px;
    margin:auto;
    bottom: 0;
    top:0;
    left:0;
    right:0;
    position: absolute;
}

3) 适用: 不管是否固定宽高均可用. 问题在于兼容性. ie9及如下不支持

设置父级flex属性: display:flex; justify-content:center; align-items: center;

这种方法在子级div有多个时也能够实现居中----具体看flex属性设置

.div1{
    width:500px;
    height:500px;
    border:1px solid black;
    display: flex;
    justify-content: center;　　/*使垂直居中*/
    align-items:center;　　　　/*使水平居中*/      
}
.div2{
    background: yellow;
    /*width:300px;
    height:200px;*/
}

4) 适用: 要设宽度, 不然会使得宽度为父级div的宽度

父级元素设置display:table-cell ，而后vertical-align：middle。这种方法能够设置垂直居中. 这时候只要在子元素里设置margin:auto便可实现水平居中

可是这种方法好像会使父元素的居中无效。

.div1{
    width:500px;
    height:500px;
    border:1px solid black;
    display:table-cell;
    vertical-align: middle;        
}
.div2{
    background: yellow;
    width:300px;
    /*height:200px;*/
    margin:auto;
}

5) 适用: 可不指定宽高

使用transform居中. 设置父级position:relative; 子级position:absolute. 而后top: 50%; left:50%; transform:translate(-50%,-50%)

.div1{
    width:500px;
    height:500px;
    border:1px solid black;
    position: relative;
}
.div2{
    background: yellow;
    position: absolute;
    /*width:200px;*/
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

6) 适用: 指定宽高百分比

保证left和right的百分数同样就能够实现水平居中，保证top和bottom的百分数同样就能够实现垂直居中。可是这种方法不能由内部元素自动调节div的宽高，而是经过父元素大小控制的

.div1{
    width:500px;
    height:500px;
    border:1px solid black;
    position: relative;
}
.div2{
    background: yellow;
    position: absolute;
    left: 30%;
    right: 30%;
    top:40%;
    bottom: 40%;
}

7) 使用display:inline-block加伪元素

box 容器经过 after或者before 生成一个高度 100% 的「备胎」，他的高度和容器的高度是一致的，相对于「备胎」垂直居中，在视觉上表现出来也就是相对于容器垂直居中了

.div1{
    width:600px;
    height:200px;
    border:1px solid black;
    text-align: center;
}
.div1:after{
    content:"";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.div2{
    background: black;
    color:white;
    display: inline-block;
}

二11、雪碧图

使用雪碧图的目的：有时为了美观，咱们会使用一张图片来代替一些小图标，可是一个网页可能有不少不少的小图标，浏览器在显示页面的时候，就须要像服务器发送不少次访问请求，这样一来，一是形成资源浪费，二是会致使访问速度变慢。这时候，把不少小图片（须要使用的小图标）放在一张图片上，按照必定的距离隔开，就解决了上述的两个问题。
通俗来讲：将小图标合并在一块儿以后的图片称做雪碧图，每一个小图标的使用须要配合background-position来获取。

使用雪碧图的优势有如下几点：

1.将多张图片合并到一张图片中，能够减少图片的总大小。

2.将多张图片合并成一张图片后，下载所有所需的资源，只需一次请求。能够减少创建链接的消耗。

如何使用雪碧图？

1.肯定在哪里引入精灵图，并为其设置大小。

2.在样式CSS中插入背景图，background-image:url("");

3.利用background-position：x y;属性和background-size：cover；background-repeat：no-repeat;等属性的组合进行定位。

<li class="cat1"><i></i><h3>服饰内衣</h3></li>
<li class="cat2"><i></i><h3>鞋包配饰</h3></li>
<li class="cat3"><i></i><h3>运动户外</h3></li>
<li class="cat4"><i></i><h3>珠宝手表</h3></li>

i{
    width: 30px;
    height: 24px;
    float: left;
    background: url(images/sprite.png);
    margin: 5px 10px 0 0 ;
}
.cat1 i{
    background-position: 0 0;
}
.cat2 i{
    background-position: 0 -24px;
}
.cat3 i{
    background-position: 0 -48px;
}
.cat4 i{
    background-position: 0 -72px;
}

https://www.toptal.com/developers/css/sprite-generator 该网站能够快速制做雪碧图并生成对应的css代码

后续遇到新的问题还会继续补充·······