WangMT

Appearance

一、盒子模型 ​

content、padding、border、margin

标准盒子模型：box-sizing --> content-box

盒子总宽度 = width + padding + border + margin

盒子总高度 = height + padding + border + margin

IE怪异盒子模型：box-sizing --> border-box

height/width包含了content、padding、border

盒子总宽度 = width + margin

盒子总高度 = height + margin

html
<style>
  .box {
    width: 200px;
    height: 100px;
    padding: 20px;
    box-sizing: border-box;
  }
 </style>
 <div class="box">
  宽度为200px
</div>

二、BFC（Block Formatting Context） ​

  • 内部的盒子会在垂直方向上一个接一个的放置
  • 对于同一个BFC的来给你个相邻的盒子的margin会发生重叠，与方向无关
  • 每个元素的左外边距与包含块的左边界相接触（从左到右）即使浮动元素也是如此
  • BFC的区域不会与float的元素区域重叠
  • 计算BFC的高度时，浮动子元素也参与计算
  • BFC就是页面上的一个隔离的独立容器，其内的子元素不会影响到外面的元素，反之亦然。

1、触发条件 ​

  • 根元素，即HTML元素
  • 浮动元素：float为left、right
  • overflow值不为visible，为auto、scroll、hidden
  • display的值为inline-block、inltable-cell、table-caption、inline-table、flex、inline-flex、grid、inline-grid

2、防止margin重叠 ​

两个p元素盒子发生重叠，相距100px而不是200px

html
<style>
 p {
     color: #f55;
     background: #fcc;
     width: 200px;
     line-height: 100px;
     text-align:center;
     margin: 100px;
 }
 </style>
 <body>
     <p>Haha</p >
     <p>Hehe</p >
 </body>
html
<style>
.wrap {
	overflow: hidden; // 新的BFC
}
 p {
 	color: #f55;
     background: #fcc;
     width: 200px;
     line-height: 100px;
     text-align:center;
     margin: 100px;
 }
 </style>
 <body>
     <p>Haha</p >
     <div class="wrap">
     	<p>Hehe</p >
     </div>
 </body>

3、清除内部浮动 ​

html
<style>
.par {
     border: 5px solid #fcc;
     width: 300px;
 }
 .child {
     border: 5px solid #f66;
     width:100px;
     height: 100px;
     float: left;
 }
 </style>
 <body>
     <div class="par">
         <div class="child"></div>
         <div class="child"></div>
     </div>
 </body>
html
<style>
.par {
     border: 5px solid #fcc;
     width: 300px;
     overflow: hidden; // 新bfc
 }
 .child {
     border: 5px solid #f66;
     width:100px;
     height: 100px;
     float: left;
 }
 </style>
 <body>
     <div class="par">
         <div class="child"></div>
         <div class="child"></div>
     </div>
 </body>

4、自适应多栏布局 ​

html
<style>
 body {
     width: 300px;
     position: relative;
 }
 .aside {
     width: 100px;
     height: 150px;
     float: left;
     background: #f66;
 }
 .main {
     height: 200px;
     background: #fcc;
 }
 </style>
 <body>
     <div class="aside"></div>
     <div class="main"></div>
 </body>

BFC的区域不会和浮动盒子重叠

css
.main {
 	overflow: hidden;
 }

5、响应式设计 ​

处理移动端需要加上meta声明viewport

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

5.1、媒体查询 ​

css
// 当视口在375px ~ 600px之间的时候，设置字体大小为18px
@media scree add (min-width: 375px) and (max-width: 600px) {
    body {
        font-size: 18px
    }
}

5.2、百分比 ​

5.3、vw/vh ​

vw：相对于视图窗口的宽度，1vw是视图宽度的百分之一

vh：相对于视图窗口的高度

5.4、rem ​

是相对于根元素html的font-size属性，默认情况下浏览器字体为16px，可使用媒体查询，实现不同分辨率下的font-size值得变动

css
@media screen and (max-width: 414px) {
     html {
    	 font-size: 18px
     }
 }
 @media screen and (max-width: 375px) {
     html {
     	font-size: 16px
     }
 }
 @media screen and (max-width: 320px) {
     html {
    	 font-size: 12px
     }
 }

四、实现水平垂直居中得方法 ​

1、定位+margin:auto ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .father{
          width:500px;
          height:300px;
          border:1px solid #0a3b98;
          position: relative;
      }
      .son{
          width:100px;
          height:40px;
          background: #f0a238;
          position: absolute;
          top:0;
          left:0;
          right:0;
          bottom:0;
          margin:auto;
      }
  </style>
</head>
<body>
<div class="father">
  <div class="son"></div>
</div>
</body>
</html>

2、定位+margin:负值 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .father {
          position: relative;
          width: 200px;
          height: 200px;
          background: skyblue;
      }
      .son {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left:-50px;
          margin-top:-50px;
          width: 100px;
          height: 100px;
          background: red;
      }
  </style>
</head>
<body>
<div class="father">
  <div class="son"></div>
</div>
</body>
</html>

3、定位+transform ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .father {
          position: relative;
          width: 200px;
          height: 200px;
          background: skyblue;
      }
      .son {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          width: 100px;
          height: 100px;
          background: red;
      }
  </style>
</head>
<body>
<div class="father">
  <div class="son"></div>
</div>
</body>
</html>

4、table布局 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .father {
          display: table-cell;
          width: 200px;
          height: 200px;
          background: skyblue;
          vertical-align: middle;
          text-align: center;
      }
      .son {
          display: inline-block;
          width: 100px;
          height: 100px;
          background: red;
      }
  </style>
</head>
<body>
<div class="father">
  <div class="son"></div>
</div>
</body>
</html>

5、flex布局 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .father {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 200px;
          height: 200px;
          background: skyblue;
      }
      .son {
          width: 100px;
          height: 100px;
          background: red;
      }
  </style>
</head>
<body>
<div class="father">
  <div class="son"></div>
</div>
</body>
</html

6、grid布局 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .father {
          display: grid;
          align-items:center;
          justify-content: center;
          width: 200px;
          height: 200px;
          background: skyblue;
      }
      .son {
          width: 10px;
          height: 10px;
          border: 1px solid red;
  </style>
</head>
<body>
<div class="father">
  <div class="son"></div>
</div>
</body>
</html>

五、两栏布局右侧自适应、三栏布局中间自适应 ​

1、两栏布局 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .box{
          overflow: hidden; /* BFC */
      }
      .left {
          float: left;
          width: 200px;
          background-color: rgb(128, 128, 128);
          height: 400px;
      }
      .right {
          margin-left: 210px;
          background-color: lightgray;
          height: 200px;
      }
  </style>
</head>
<body>
<div class="box">
  <div class="left">左边</div>
  <div class="right">右边</div>
</div>
</body>
</html>

2、两栏布局-flex布局 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .box{
          display: flex;
      }
      .left {
          width: 100px;
          background-color: #59c7c3;
      }
      .right {
          flex: 1;
          background-color: #baab61;
      }
  </style>
</head>
<body>
<div class="box">
  <div class="left">左边</div>
  <div class="right">右边</div>
</div>
</body>
</html>

3、三栏布局 ​

html
/* 两边使用float，中间使用margin */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .wrap {
          background: #eee;
          overflow: hidden; <!-- BFC -->
          padding: 20px;
          height: 200px;
      }
      /* 两边固定宽度*/
      .left {
          width: 200px;
          height: 200px;
          float: left;
          background: coral;
      }
      .right {
          width: 120px;
          height: 200px;
          float: right;
          background: lightblue;
      }
      /* 中间宽度自适应，利用margin控制两边得间距 */
      .middle {
          margin-left: 220px;
          height: 200px;
          background: lightpink;
          margin-right: 140px;
      }
  </style>
</head>
<body>
<div class="wrap">
  <div class="left">左边</div>
  <div class="right">右边</div>
  <div class="middle">中间</div>
</div>
</body>
</html>
html
/* 两边使用absolute，中间使用margin */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .container {
          position: relative;
      }
      .left,
      .right,
      .main {
          height: 200px;
          line-height: 200px;
          text-align: center;
      }
      .left {
          position: absolute;
          top: 0;
          left: 0;
          width: 100px;
          background: green;
      }
      .right {
          position: absolute;
          top: 0;
          right: 0;
          width: 100px;
          background: green;
      }
      .main {
          margin: 0 110px;
          background: black;
          color: white;
      }
  </style>
</head>
<body>
<div class="wrap">
  <div class="left">左边</div>
  <div class="right">右边</div>
  <div class="main">中间</div>
</div>
</body>
</html>
html
/* 使用display: table实现 */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
    <style>
        .container {
            height: 200px;
            line-height: 200px;
            text-align: center;
            display: table;
            table-layout: fixed;
            width: 100%;
        }

        .left,
        .right,
        .main {
            display: table-cell;
        }

        .left,
        .right {
            width: 100px;
            background: green;
        }

        .main {
            background: black;
            color: white;
            width: 100%;
        }
    </style>
</head>
<body>
<div class="container">
  <div class="left"> </div>
  <div class="main"> </div>
  <div class="right"> </div>
</div>
</body>
</html>
html
/* 使用display: flex实现 */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
      .wrap {
          display: flex;
          justify-content: space-between;
      }

      .left,
      .right,
      .middle {
          height: 100px;
      }

      .left {
          width: 200px;
          background: coral;
      }

      .right {
          width: 120px;
          background: lightblue;
      }

      .middle {
          background: #555;
          width: 100%;
          margin: 0 20px;
      }
  </style>
</head>
<body>
<div class="wrap">
  <div class="left"> </div>
  <div class="middle"> </div>
  <div class="right"> </div>
</div>
</body>
</html>
html
/* 使用grid网格布局 */
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .wrap {
          display: grid;
          width: 100%;
          grid-template-columns: 100px auto 200px;
      }

      .left,
      .right,
      .middle {
          height: 100px;
      }

      .left {
          background: coral;
      }

      .right {
          background: lightblue;
      }

      .middle {
          background: #555;
      }
  </style>
</head>
<body>
<div class="wrap">
  <div class="left"> </div>
  <div class="middle"> </div>
  <div class="right"> </div>
</div>
</body>
</html>

六、CSS选择器 ​

选择器使用方式选择器描述
id选择器#box
类选择器.left
标签选择器div
后代选择器#box div
子选择器.one > .one_1选择父元素为.one下所有.one_1的子元素
相邻同胞选择器.one + .two选择紧接在.one之后的所有.two元素
群组选择器div,p选择div、p标签的元素
伪类选择器:link
:vsited
:active
:hover
:focus
:first-child
:first-of-type
:last-of-type
:nth-child(n)
:nth-last-of-type(n)
:last-child
:not(selector)与selector不匹配的元素
伪元素选择器:first-letter
:first-line
:before
:after
属性选择器[attribute]
[attribute=value]
[attribute~=value]
[attribute|=value]
[attribute*=value]
[attribute^=value]
[attribute$=value]

定位方式，布局方式，重排重绘

8、实现单行、多行文本溢出的省略样式 ​

css
/* 单行文本溢出省略 */
p {
    white-space: nowrap; /* 设置文本不换行 */
    overflow: hidden; /* 隐藏超出的内容 */
    text-overflow: ellipsis; /* 使用省略号显示被裁剪的文本 */
}
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      /* 多行文本溢出省略-->基于高度截断 */
      .demo {
          position: relative;
          line-height: 20px;
          height: 40px;
          overflow: hidden;
      }
      .demo::after {
          content: "...";
          position: absolute;
          bottom: 0;
          right: 0;
          padding: 0 20px 0 10px;
      }
  </style>
</head>
<body>
<body>
  <div class='demo'> 这是一段长的文本这是一段长的文本这是一段长的文本这是一段长的文本这是一段长的文本这是一段长的文本这是一段长的文本这是一段长的文本这是一段长的文本</div>
</body>
</body>
</html>
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      /* 多行文本溢出省略-->基于行数截断 */
      p {
          width: 400px;
          border: 1px solid red;
          -webkit-line-clamp: 2;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
      }
  </style>
</head>
<body>
<body>
  <p class='demo'> 这是一段长的文本这是一段长的文本这是一段长的文本这是一段长的文本这是一段长的文本这是一段长的文本这是一段长的文本这是一段长的文本这是一段长的文本</p>
</body>
</body>
</html>

九、CSS画出三角形 ​

css
.border {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 10px 10px;
    border-color: transparent transparent #d9534f;
}

十、CSS视差滚动 ​

背景层、内容层、悬浮层

1、background-attachment ​

设置图像是否固定或者随着页面的其余部分滚动

scroll，背景图像会随着页面其余部分的滚动而滚动

fixed，当页面的其余部分滚动时，背景图像不移动

inherit，继承父元素的attachment属性的值

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      div {
          height: 100vh;
          background: rgba(0, 0, 0, .7);
          color: #fff;
          line-height: 100vh;
          text-align: center;
          font-size: 20vh;
      }
      .a-img1 {
          background-image: url(https://images.pexels.com/photos/1097491/pexels-photo-1097491.jpeg);
          background-attachment: fixed;
          background-size: cover;
          background-position: center center;
      }
      .a-img2 {
          background-image: url(https://images.pexels.com/photos/2437299/pexels-photo-2437299.jpeg);
          background-attachment: fixed;
          background-size: cover;
          background-position: center center;
      }
      .a-img3 {
          background-image: url(https://images.pexels.com/photos/100541/pexels-photo-1005417.jpeg);
          background-attachment: fixed;
          background-size: cover;
          background-position: center center;
      }
  </style>
</head>
<body>
  <div class="a-text">1</div>
  <div class="a-img1">2</div>
  <div class="a-text">3</div>
  <div class="a-img2">4</div>
  <div class="a-text">5</div>
  <div class="a-img3">6</div>
  <div class="a-text">7</div>>
</body>
</html>

2、transform:translate3D ​

transform:可以对元素选择进行变换，包括平移translate、旋转rotate、缩放scale等

perspective:当元素涉及3d变换时，perspective可以定义眼睛看到的3d立体效果，即空间感

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      html {
          overflow: hidden;
          height: 100%
      }

      body {
          /* 3D */
          perspective: 1px;
          transform-style: preserve-3d;
          height: 100%;
          overflow-y: scroll;
          overflow-x: hidden;
      }
      #app{
          width: 100vw;
          height:200vh;
          background:skyblue;
          padding-top:100px;
      }
      .one{
          width:500px;
          height:200px;
          background:#409eff;
          transform: translateZ(0px);
          margin-bottom: 50px;
      }
      .two{
          width:500px;
          height:200px;
          background:#67c23a;
          transform: translateZ(-1px);
          margin-bottom: 150px;
      }
      .three{
          width:500px;
          height:200px;
          background:#e6a23c;
          transform: translateZ(-2px);
          margin-bottom: 150px;
      }
  </style>
</head>
<body>
  <div id="app">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
  </div>
</body>
</html>

十一、CSS3新特性 ​

十二、CSS3动画 ​

十三、grid网格布局 ​

css
/* grid-template-columns：设置列宽、grid-template-rows：设置行高 */
/* grid-row-gap：行间距、grid-column-gap：列间距，grid-gap */
.wrapper {
     display: grid;
     /*   200px 200px 200px */
     grid-template-columns: 200px 200px 200px;
     grid-gap: 5px;
     /*  声明了两行，行高分别为 50px 50px */
     grid-template-rows: 50px 50xp;
}
css
/* grid-template-areas：定义一个区域，由一个或者多个单元格组成 */
.container {
     display: grid;
     grid-template-columns: 100px 100px 100px;
     grid-template-rows: 100px 100px 100px;
     grid-template-areas: 'a b c'
                         'd e f'
                         'g h i';
 }
css
/* grid-auto-flow：子元素排列顺序，默认按照行，如果设置为column，默认先按照列排序 */
css
/* justify-items：设置单元格内容的水平位置 start end center stretch */
/* align-items：设置单元格内容的垂直位置 start end center stretch */
css
/* justify-content：整个内容区域在容器里面的水平位置 start end center stretch space-around space-between space-evenly */
/* align-content：整个内容区域在容器里面的垂直位置 start end center stretch space-around space-between space-evenly */
css
/* grid-auto-columns、grid-auto-rows */
css
/* grd-column-start、grd-column-end、grd-row-start、grd-row-end */

十四、flex布局 ​

主轴和交叉轴互为90度

1、flex-direction ​

决定主轴方向：row、row-reverse、column、column-reverse

2、flex-wrap ​

弹性元素沿主轴方向排列，如果主轴排不下，通过此属性决定容器内项目是否可换行

nowrap、warp、wrap-reverse

3、flex-flow ​

flex-direction和flex-warp的简写形式

4、justify-content ​

主轴上的对齐方式

flex-start、flex-end、center、space-between、space-around

5、align-items ​

交叉轴上的对齐方式

flex-start、flex-end、center、baseline、stretch

6、align-content ​

定义多根轴线的对齐方式，如果只有一根轴线，改属性不起作用

flex-start、flex-end、center、space-between、space-around、stretch

7、order ​

定义项目的排列顺序，数值越小，排列越靠前

8、flex-grow ​

当设置flex-wrap: nowrap; 不换行的时候，可根据flex-grow来确定各个项目的比例

9、align-self ​

允许单个项目有与其他项目不一样的对齐方式，可以覆盖align-items

auto、flex-start、flex-end、center、baseline、stretch

十五、设备像素、css像素、设备独立像素、dpr、ppi的区别 ​

CSS像素：以px为后缀、是一个长度单位，相对于设备像素，页面缩放比例为1的时候，1个CSS像素等于1个设备独立像素。

设备像素：又叫物理像素，单位pt

设备独立像素：可以通过window.screen.wdth / window.screen.height查看

dpr：设备像素比，代表设备独立像素到设备像素的转换关系

ppi：每英寸像素

十六、em、px、rem、vh、vw的区别 ​

1、px：像素，呈现在显示器上的一个点 ​

2、em：默认情况下1em为16px ​

  • em的值不是固定的
  • em会继承父级元素的字体大小
  • em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被认为设置，则相对于浏览器的默认字体尺寸。
  • 任意浏览器的默认字体高都是16px
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    html{ font-size: 10px }
    .big{ font-size: 1.4em }
    .small{ font-size: 1em }
    .smaller{ font-size: 1.2em }
  </style>
</head>
<body>
<div class="big">
  14px=1.4rem<div class="small">我是14px=1em</div>
</div>
<div class="smaller">我是12px=1.2em</div>
</body>
</html>

3、rem ​

相对的是HTML根元素的font-size的值

css
html{ font-size: 10px }
html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    html{ font-size: 10px }
    .big{ font-size: 1.4rem }
    .small{ font-size: 1rem }
    .smaller{ font-size: 1.2rem }
  </style>
</head>
<body>
<div class="big">
  14px=1.4rem<div class="small">我是10px=1rem</div>
</div>
<div class="smaller">我是12px=1.2rem</div>
</body>
</html>

4、vh、vw ​

vw：100vw就是整个窗口的宽度

vh：100vh就是整个窗口的高度

窗口：PC端就是浏览器的可视区域

十七、Chrome支持12px的文字方式 ​

1、zoom ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
      .span1{
          font-size: 12px;
          display: inline-block;
          zoom: 0.8;
      }
      .span2{
          display: inline-block;
          font-size: 12px;
      }
  </style>
</head>
<body>
<span class="span1"> 10px</span>
<span class="span2"> 12px</span>
</body>
</html>

2、-webkit-transform:scale() ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
      .span1{
          font-size: 12px;
          display: inline-block;-webkit-transform:scale(0.8);
      }
      .span2{
          display: inline-block;
          font-size: 12px;
      }
  </style>
</head>
<body>
<span class="span1"> 10px</span>
<span class="span2"> 12px</span>
</body>
</html>

3、-webkit-text-size-adjust:none ​

用来设定文字大小是否根据设备（浏览器）来自动调整显示大小

percentage：字体显示的大小

auto：默认，根据设备/浏览器自动调整

none：不会自动调整

css
 html { -webkit-text-size-adjust: none; }

十八、回流和重绘 ​

1、什么是 ​

回流：布局引擎根据各种样式计算盒子在页面上的大小和位置

重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制

浏览器渲染机制：

  • 解析HTML，生成DOM树，解析CSS，生成CSSOM叔
  • 将DOM树和CSSOM树结合，生成渲染树（Render Tree）
  • Layout（回流）：根据生成的渲染树，进行回流，得到节点的几何信息（位置，大小）
  • Painting（重绘）：根据渲染树以及回流得到的几何信息，得到节点的绝对像素
  • Display：将像素发送给GPU，展示在页面上

2、回流触发时机 ​

  • 添加或者删除可见的DOM元素
  • 元素的位置发生变化
  • 元素的尺寸发生变化，包括：外边距、内边距、边框大小、高度和宽度
  • 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
  • 页面一开始渲染的时候
  • 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

获取特定属性的值：

offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight

3、重绘触发时机 ​

回流一定会重绘。

  • 颜色的修改
  • 文本方向的修改
  • 阴影的修改

4、避免回流 ​

  • 设定元素样式，通过改变元素的class类名
  • 避免设置多项内联样式
  • 应用元素的动画，使用position属性的fixed值或者absolute值
  • 避免使用table布局，table布局中每个元素的大小以及内容的改动，都会导致整个table的计算
  • 对于复杂的动画，对其设置position: fixed/absolute，尽可能的使元素脱离文档流，减少戳其他元素的影响
  • 避免使用CSS的JavaScript表达式
  • 使用JavaScript动态插入多个节点，可以使用DocumentFragment，创建之后一次插入，皮面多次的渲染性能。

十九、CSS预编语言 ​

sass、less、stylus

1、混入 ​

scss
@mixin large-text {
     font: {
         family: Arial;
         size: 20px;
         weight: bold;
     }
     color: #ff0000;
 }
 .page-title {
     @include large-text;
     padding: 4px;
     margin-top: 10px;
 }

二十、CSS提高性能的方法有哪些 ​

1、内联首屏关键CSS ​

2、异步加载CSS ​

3、资源压缩 ​

4、合理使用选择器 ​

5、减少使用昂贵的属性 ​

6、不要使用@import ​