这些常考的CSS面试题你还不知道吗？

小小的心怀揣大大的梦
914 阅读11分钟

1、盒子模型

CSS盒子模型包括：IE盒子模型和标准盒子模型

width区别

  • IE盒子模型：width { content + padding + border } + margin
  • 标准盒子模型：width { content } + padding + border + margin

box-sizing属性

box-sizing: border-box || content-box || inherit

  • box-sizing:border-box ---> IE盒子模型
  • box-sizing:content-box ---> 标准盒子模型

2、CSS经典布局

圣杯布局

实现效果：三列布局，左右两边宽度固定，中间自适应 image.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>圣杯布局</title>
  </head>
  <body>
    <div class="head">head</div>
    <div class="container">
      <div class="center column">center</div>
      <div class="left column">left</div>
      <div class="right column">right</div>
    </div>
    <div class="foot">foot</div>
  </body>
  <style>
    body {
      padding: 0;
      margin: 0;
      min-width: 750px;
      /* 750 = 300(leftWidth) + 150(rightWidth)  + 300(leftWidth)  */
    }
    .head,
    .foot {
      width: 100%;
      height: 50px;
      background: orange;
    }
    .container {
      padding-left: 300px;
      padding-right: 150px;
    }
    .column {
      float: left;
      height: 100px;
    }
    .center {
      width: 100%;
      background-color: red;
    }
    .left {
      background-color: blue;
      margin-left: -100%;
      position: relative;
      width: 300px;
      left: -300px;
    }
    .right {
      background-color: yellow;
      width: 150px;
      margin-right: -150px;
    }
    .container::after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
</html>

双飞翼布局

实现效果：三列布局，左右两边宽度固定，中间自适应 image.png

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>双飞翼布局</title>
  </head>
  <body>
    <div class="header">头部</div>
    <div class="container">
      <div class="content">
        <div class="center">中间</div>
      </div>
      <div class="left">左边</div>
      <div class="right">右边</div>
    </div>
    <div class="footer">尾部</div>
  </body>

  <style>
    .header,
    .footer {
      height: 200px;
      width: 100%;
      background-color: #1b82e3;
    }
    .content,
    .left,
    .right {
      float: left;
      height: 200px;
    }
    .content {
      width: 100%;
      background-color: red;
    }
    .left {
      width: 300px;
      background-color: pink;
      margin-left: -100%;
    }
    .right {
      width: 300px;
      background-color: grey;
      margin-left: -300px;
    }
    .center {
      height: 200px;
      margin-left: 300px;
      margin-right: 300px;
    }
    .container::after {
      content: "";
      display: block;
      clear: both;
    }
    body {
      min-width: 600px;
      /* 600 = 300 + 300 */
    }
  </style>
</html>

两者的异同

相同：圣杯布局和双飞翼布局打到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。

不同：在解决中间部分被挡住的问题时，采取的解决办法不一样。圣杯布局在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移使得左边两边的内容得以很好的展现；而双飞翼布局则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right。

其他三栏布局

  1. flex布局，左右两栏宽固定，中间栏flex:1
  2. table布局，外层display:table,内层display:table-cell，左右两栏定宽，中间自适应
  3. grid布局，外层盒子display:grid;grid-template-rows:100px;grid-template-columns:100px
  4. 绝对定位法，左右两栏绝对定位，中间栏使用margin左右撑开
  5. 浮动法，左栏左浮动，右栏右浮动，中间栏放最后，用左右margin值撑开

3、BFC（块级格式化上下文）

从一个现象说起，一个盒子不设置height，当内容子元素都浮动时，无法撑起自身，这个盒子没有形成BFC。

BFC的理解

BFC是Block Formatting Context的缩写，即块级格式化上下文。它指一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

如何创建BFC

  • 方法1：根元素，即HTML元素
  • 方法2：float的值不是none，即float:left或float:right
  • 方法3：position的值不是static或者relative，即position:absolute或position:fixed
  • 方法4：overflow的值不是visible，即overflow:auto、overflow:hidden或者overflow:scroll
  • 方法5：display的值是inline-block、table-cell、table-caption、flex、inline-flex

BFC的作用（使用场景）

  1. 避免锤子外边距叠加
  2. 高度塌陷
  3. 两栏布局
  4. 避免某元素被浮动元素覆盖

场景1：避免垂直外边距叠加（只有垂直，没有水平）

外边距叠加：准确地说是指在同一个BFC中，两个相邻的margin-top和margin-bottom相遇时，这两个外边距会合并为一个外边距。叠加之后的外边距高度等于发生叠加前的两个外边距的最大值。这里的相邻不是指“相邻的兄弟元素”，而是指相邻的margin-top和margin-bottom。

NOTE：两个相邻的margin-top和margin-bottom可以是margin-top和margin-top，也可以是margin-bottom和margin-bottom，也可以是margin-top和margin-bottom。

因此，如果两个相邻的margin-top和margin-bottom分别处于不同的BFC中，那么就可以防止垂直外边距叠加。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BFC解决垂直外边距叠加</title>
    <style>
      body {
        background: #000;
      }
      .father {
        width: 200px;
        height: 300px;
        background-color: blueviolet;
        /* overflow: hidden;解决了margin塌陷 */
        overflow: hidden;
        margin-top: 10px; 
      }
      .son {
        width: 100px;
        height: 100px;
        background-color: blue;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
    </div>
  </body>
</html>

场景2：高度塌陷（清除浮动：让父元素的高度包含子浮动元素）

一个盒子不设置height，当内容子元素都浮动时，无法撑起自身，这个盒子没有形成BFC。

当这个盒子形成BFC时，计算一个BFC的高度时，其内部浮动元素的高度也会参与计算，从而撑起自身。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BFC解决高度塌陷</title>
    <style>
      .father {
        border: 1px solid red;
        /* float: left; 解决了高度塌陷 */
        float: left;
      }
      .son {
        width: 300px;
        height: 300px;
        background-color: blue;
        margin-right: 10px;
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
      <div class="son"></div>
      <div class="son"></div>
    </div>
  </body>
</html>

场景3：两栏布局

一个盒子设置浮动，另一个盒子创建BFC

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>两栏布局</title>
  </head>
  <body>
    <div class="left"></div>
    <div class="right"></div>
  </body>
  <style>
    .left {
      width: 200px;
      height: 100px;
      float: left;
    }
    .right {
      width: 300px;
      height: 100px;
      /* display: flex; 创建BFC*/
      display: flex;
    }
    div {
      border: 1px solid red;
    }
  </style>
</html>

场景4：避免某元素被浮动元素覆盖

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BFC阻止某元素被浮动元素覆盖</title>
    <style>
      .son {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        float: left;
      }
      .son-last {
        width: 200px;
        height: 300px;
        background-color: brown;
        overflow: hidden; 
      }
    </style>
  </head>
  <body>
    <div class="son"></div>
    <div class="son"></div>
    <div class="son-last"></div>
  </body>
</html>

4、水平垂直居中

flex实现水平垂直居中

容器设置display:flex ; justify-content:center ; align-items:center

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素水平垂直居中flex实现-新版</title>
    <style>
      .wrap {
        width: 500px;
        height: 500px;
        background: gray;
        display: flex;
        justify-content: center; /* 主轴 */
        align-items: center; /* 侧轴 */
      }
      .wrap .box {
        width: 200px;
        height: 200px;
        background: pink;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="box"></div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素水平垂直居中flex实现-老版</title>
    <style>
      .wrap {
        width: 500px;
        height: 500px;
        background: gray;
        display: -webkit-box;
        -webkit-box-pack: center;
        -webkit-box-align: center;
      }
      .wrap .box {
        width: 200px;
        height: 200px;
        background: pink;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="box"></div>
    </div>
  </body>
</html>

table-cell实现水平垂直居中

父元素 display: table-cell; vertical-align: middle;

子元素 margin: auto;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>table-cell实现水平垂直居中</title>
    <style>
      .wrap {
        width: 500px;
        height: 500px;
        background: gray;
        display: table-cell;
        vertical-align: middle;
      }
      .box {
        width: 200px;
        height: 200px;
        background: pink;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="box"></div>
    </div>
  </body>
</html>

父元素 display: table-cell; vertical-align: middle;text-align: center;

子元素 display: inline-block;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>table-cell实现水平垂直居中</title>
    <style>
      .wrap {
        width: 500px;
        height: 500px;
        background: gray;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }
      .box {
        width: 200px;
        height: 200px;
        background: pink;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="box"></div>
    </div>
  </body>
</html>

子绝父相实现水平垂直居中

  1. 上下左右0，margin为auto
  2. 上左各50%，margin-left和margin-top为子元素宽高一半的负数
  3. 上左各50%，transform:translate(-50%,-50%)

子绝父相实现法1

子元素

  • top: 0;
  • bottom: 0;
  • left: 0;
  • right: 0;
  • margin: auto;
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>水平居中</title>
  </head>
  <body>
    <div class="wrap">
      <div class="box"></div>
    </div>
  </body>
  <style>
    .wrap {
      width: 500px;
      height: 500px;
      background: gray;
      /* 父元素相对定位 */
      position: relative;
    }
    .box {
      width: 200px;
      height: 200px;
      background: pink;
      /* 子元素绝对定位 */
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }
  </style>
</html>

子绝父相实现法2

子元素

  • top: 50%; left: 50%;
  • margin-top: - (子元素高 / 2)px;
  • margin-left: -(子元素宽 / 2)px;

NOTE：这种方式父元素和子元素都必须定义宽高。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>水平居中</title>
  </head>
  <body>
    <div class="wrap">
      <div class="box"></div>
    </div>
  </body>
  <style>
    .wrap {
      width: 500px;
      height: 500px;
      background: gray;
      /* 父元素相对定位 */
      position: relative;
    }
    .box {
      width: 200px;
      height: 200px;
      background: pink;
      /* 子元素绝对定位 */
      position: absolute;
      /* 这种方式父元素和子元素必须定义宽高 */
      top: 50%;
      left: 50%;
      margin-top: -100px;
      margin-left: -100px;
    }
  </style>
</html>

子绝父相实现法3

子元素

  • top: 50%;
  • left: 50%;
  • transform: translate(-50%, -50%);

NOTE：translate(x,y), 其中x代表沿x轴位移，向右为正方向；y代表沿y轴位移，向下为正方向；x,y的单位可以是%，也可以是px

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>水平居中</title>
  </head>
  <body>
    <div class="wrap">
      <div class="box"></div>
    </div>
  </body>
  <style>
    .wrap {
      width: 500px;
      height: 500px;
      background: gray;
      /* 父元素相对定位 */
      position: relative;
    }
    .box {
      width: 200px;
      height: 200px;
      background: pink;
      /* 子元素绝对定位 */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</html>

5、position属性

  • static：默认值，元素出现在正常的流中。
  • relative：相对定位，不脱离文档流，相对于自身定位。
  • absolute：绝对定位，脱离文档流，相对于父级定位。
  • fixed：固定定位，脱离文档流，相对于浏览器窗口定位。
  • sticky：粘性定位，relative和fixed的结合体
  • inherit:规定从父元素继承position属性。

静态定位：static

  • 对于static，设置left、right、top、bottom、z-index是没有任何效果的。

相对定位：relative

  • 定位参照对象是元素自己原来的位置，可以通过left、right、top、bottom来进行位置调整。
  • 在使用相对定位时，无论是否移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框。

绝对定位：absolute

  • 定位参照对象是最近的已定位的父元素，可以通过left、right、top、bottom来进行位置调整。
  • 如果一直往上层元素找不到有定位的元素，那么最终的参照对象为<html>。
  • 拥有定位的祖先元素：position的值不为static的元素。

固定定位：fixed

定位参照对象是浏览器窗口，即使窗口是滚动的它也不会移动。可以通过left、right、top、bottom来进行位置调整。

粘性定位：sticky

  • sticky是relative和fixed的结合，依赖于用户的滚动行为
  • 当元素在屏幕内时，是relative定位（定位基点是自身默认位置）
  • 当元素要滚出屏幕外时，变成fixed定位（定位基点是视口）
  • 必须添加 top 、left、right、bottom 其中一个才有效

粘性定位不起作用的原因

  1. 父元素不能存在overflow:hidden或者overflow:auto属性。
  2. 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
  3. 父元素的高度不能低于sticky元素的高度
  4. sticky元素仅在其父元素内生效

6、px、em、rem

px：绝对长度单位，像素px是指相对于显示器屏幕分别率来说的

em：相对长度单位，相对于“当前元素”的字体大小（font-size属性设置字体大小）而言的，1em就等于“当前元素”字体大小。若当前元素无font-size属性，则会向上继承父元素的font-size。浏览器默认font-size：16px

rem：相对于html根元素的font-size。若html{ font-size：62.5% }则1rem = 10px

7、清除浮动

当所有的子元素浮动时，且父元素没有高度，这时父元素就会产生高度塌陷。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="wrap">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>
  <style>
    .wrap{
      border: 1px solid red;
    }
    .item{
      width: 100px;
      height: 50px;
      background-color: yellow;
      margin-right: 10px;
      float: left;
    }
  </style>
</html>

image.png

解决办法

  • 方法1：创建BFC
  • 方法2：给父元素单独定义高度
  • 方法3：在浮动元素后面加一个标签，并且设置 clear:both; height:0; overflow:hidden
  • 方法4：添加伪元素 ::after

方法1：创建BFC

  • 方法1：根元素，即HTML元素
  • 方法2：float的值不是none，即float:left或float:right
  • 方法3：position的值不是static或者relative，即position:absolute或position:fixed
  • 方法4：overflow的值不是visible，即overflow:auto、overflow:hidden或者overflow:scroll
  • 方法5：display的值是inline-block、table-cell、table-caption、flex、inline-flex
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="wrap">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>
  <style>
    .wrap{
      border: 1px solid red;
      /* 创建BFC */
      float: left;
    }
    .item{
      width: 100px;
      height: 50px;
      background-color: yellow;
      margin-right: 10px;
      float: left;
    }
  </style>
</html>

image.png

方法2：给父元素单独定义高度

给父元素设置height属性，使其高度大于子元素高度

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="wrap">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>
  <style>
    .wrap{
      border: 1px solid red;
      /* 父元素设置高度 */
      height: 50px;
    }
    .item{
      width: 100px;
      height: 50px;
      background-color: yellow;
      margin-right: 10px;
      float: left;
    }
  </style>
</html>

image.png

方法3：在浮动元素后面加一个标签

在浮动元素后面加一个标签，并且设置 clear:both; height:0; overflow:hidden

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="wrap">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="clear"></div>
    </div>
  </body>
  <style>
    .wrap{
      border: 1px solid red;
    }
    .item{
      width: 100px;
      height: 50px;
      background-color: yellow;
      margin-right: 10px;
      float: left;
    }
    .clear{
      clear: both;
      height: 0;
      overflow: hidden;
    }
  </style>
</html>

image.png

方法4：添加伪元素

添加伪元素 ::after

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="wrap">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>
  <style>
    .wrap{
      border: 1px solid red;
    }
    .item{
      width: 100px;
      height: 50px;
      background-color: yellow;
      margin-right: 10px;
      float: left;
    }
    .wrap::after{
      content: "";
      clear: both;
      display: block;
      height: 0;
      overflow: hidden;
      visibility: hidden;
    }
  </style>
</html>

image.png

8、画一个三角形（边框的均分原理）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>画一个三角形</title>
</head>
<body>
  <div class="item"></div>
</body>

<style>
  .item{
    height: 0;
    width: 0;
    border-top:200px solid transparent ;
    border-bottom:200px solid yellow ;
    border-left:200px solid transparent ;
    border-right:200px solid transparent ;
  }
</style>
</html>

image.png

9、如何让chrome浏览器显示小于12px的文字

利用缩放transform:scale()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="item">你好</div>
    <div class="scale">你好</div>
  </body>
  <style>
    .item {
      font-size: 16px;
    }
    .scale {
      font-size: 16px;
      transform: scale(0.8);
    }
  </style>
</html>

image.png

10、Doctype的作用

Document Type Definition(文档类型定义)的缩写。<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器， 用什么文档类型规范来解析这个文档。

11、CSS3新属性

新样式：边框、背景、文字、颜色

边框

  • border-radius：圆形边框
  • box-shadow：阴影
  • border-image：使用图片来绘制边框

背景

  • background-image：背景图片
  • background-size：背景图像的大小
  • background-origin：背景图像的位置区域
  • background-clip：背景裁剪属性是从指定位置开始绘制

文字

  • word-wrap：换行
    • 文本被裁剪 clip
    • 显示省略号 ellipsis
    • 自定义字符串 string
  • text-overflow：超出省略号
  • text-shadow：阴影，水平阴影、垂直阴影、模糊距离，以及阴影的颜色
  • text-decoration：支持对文字的更深层次的渲染
    • text-fill-color: 设置文字内部填充颜色
    • text-stroke-color: 设置文字边界填充颜色
    • text-stroke-width: 设置文字边界宽度

颜色

  • rgba分为两部分，rgb为颜色值，a为透明度
  • hala分为四部分，h为色相，s为饱和度，l为亮度，a为透明度

选择器

  • 属性选择器
  • a[src^="https"]:选择每一个src属性的值以"https"开头的元素
  • a[src$=".pdf"]:选择每一个src属性的值以".pdf"结尾的元素
  • a[src*="runoob"]:选择每一个src属性的值包含子字符串"runoob"的元素
  • type选择器
  • p:first-of-type：选择的 p 元素是其父元素的第一个 p 元素
  • p:last-of-type：选择的 p 元素是其父元素的最后一个 p 元素
  • p:only-of-type：指定属于父元素的特定类型的唯一子元素的每个 p 元素
  • child选择器
  • p:only-child：匹配属于父元素中唯一子元素的 p 元素
  • p:nth-child(2)：指定每个 p 元素匹配的父元素中第 2 个子元素
  • p:nth-last-child(2)：指定每个 p 元素匹配同类型中的倒数第 2 个同级兄弟元素
  • p:last-child：指定父元素中最后一个p元素
  • type&&child联合选择器
  • p:nth-of-type(2)：指定每个p元素匹配同类型中的第2个同级兄弟元素
  • p:nth-last-of-type(2)：指定每个p元素匹配同类型中的倒数第2个同级兄弟元素

13342844d128e9eb2908cee958349048.png

更多选择器见 菜鸟教程CSS选择器

过渡

transition：指定一个或者多个css属性的过渡效果。

语法：transition：property duration timing-function delay或分别定义。

  • transition-property：指定css属性的name
  • transition-duration：指定多少时间完成
  • transition-timing-function：指定转速曲线
  • transition-delay：指定效果延迟开始的时间

形状转换（2d转换、3d转换）

transform：适用于2D或3D转换的元素。（位移、缩放、旋转、倾斜）

transform-origin：转换元素的位置（围绕那个点进行转换）。默认值(x,y,z):(50%, 50%, 0)

  • transform:translate(120px, 50%) 位移
  • transform:scale(2, 0.5) 缩放
  • transform:rotato(30deg) 旋转
  • transform:skew(30deg, 20deg) 倾斜

这些属性都可以转换成3d，或者拆开了

  • transform:translate(120px, 50%) 位移
  • transform:translate3d(x,y,z) 3d位移
  • transform:translateX()
  • transform:translateY()
  • transform:translateZ()

渐变

CSS3 定义了两种类型的渐变（gradients）：

  • 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
  • 径向渐变（Radial Gradients）- 由它们的中心定义

线性渐变

语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...)

  • 从上到下的线性渐变：background-image: linear-gradient(#e66465, #9198e5)
  • 从左到右的线性渐变：background-image: linear-gradient(to right, red , yellow)
  • 线性渐变 - 对角：从左上角到右下角的线性渐变
  • background-image: linear-gradient(to bottom right, red, yellow)

径向渐变

语法：background-image: radial-gradient(shape size at position, start-color, ..., last-color)

  • 颜色节点均匀分布：background-image: radial-gradient(red, yellow, green)
  • 颜色节点不均匀分布：background-image: radial-gradient(red 5%, yellow 15%, green 60%)
  • 形状为圆形的径向渐变：它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。background-image: radial-gradient(circle, red, yellow, green)

动画

animation: name duration timing-function delay iteration-count direction fill-mode;

image.png

如何产生动画

  • 使用关键帧@keyframes创建动画
  • 将动画绑定到一个选择器上面，同时必须定义动画的名称和动画持续时间。
  • 根据不同浏览器进行兼容操作
    • -webkit- ：Safari and Chrome
    • -moz-：Firefox
    • -o-：Opera
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动画</title>
  </head>
  <body>
    <div class="item"></div>
  </body>
  <style>
    .item {
      width: 100px;
      height: 100px;
      background: red;
      /*  
        当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
        必须定义动画的名称和动画的持续时间。
        如果省略的持续时间，动画将无法运行，因为默认值是0。 
      */
      animation: myfirst 5s; 
      -webkit-animation: myfirst 3s; /* Safari and Chrome */
    }

    /* 使用@keyframes创建动画 */
    @keyframes myfirst
    {
      0%   {background:red;}
      25%  {background:yellow;}
      50%  {background:blue;}
      100% {background:green;}
    }

    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
      0%   {background:red;}
      25%  {background:yellow;}
      50%  {background:blue;}
      100% {background:green;}
    }
  </style>
</html>

flex布局

image.png

avatar
文章
阅读
粉丝