1 常见的几个水平竖直居中

1.1 绝对定位-margin:auto

    div {
      width: 300px;
      height: 300px;
      background: orange;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      /* 行内元素居中 */
      text-align: center;
      line-height: 300px;
    }

1.2 绝对定位-margin:负间距

    div {
      width: 300px;
      height: 300px;
      background: orange;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -150px;      /* 向左平移页面宽度一半后减去div一半宽度 */
      margin-top: -150px;       /* 向下平移页面高度一半后减去div一半高度 */
      /* 行内元素居中 */
      text-align: center;
      line-height: 300px;
    }

1.3 flex布局

    .father {
      width: 300px;
      height: 300px;
      background: red;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .child {
      width: 150px;
      height: 150px;
      background: orange;
      /* 行内元素居中 */
      text-align: center;
      line-height: 150px;
    }
    
    
    <div class="father">
      <div class="child">我居中了</div>
    </div>

1.4 table-cell

    .father {
      width: 300px;
      height: 300px;
      background: red;
      display: table-cell;       /* margin设置会失效 */
      vertical-align: middle;
    }

    .child {
      width: 150px;
      height: 150px;
      background: orange;
      margin-left: auto;
      margin-right: auto;
      /* 行内元素居中 */
      text-align: center;
      line-height: 150px;
    }
    
    <div class="father">
      <div class="child">我居中了</div>
    </div>

2 display:inline-block

结合了inline与block的一些特点

• 使元素变成行内元素，拥有了行内元素的特性，即可以与其他元素共占一行
• 可以改变height，width，padding，margin 成为了可以共占一行的块级元素。但是同时设置为display:inline-block的元素之间产生了间隙

产生间隙原因：根据我们代码书写习惯，经常会在标签结束符后敲回车，回车即会产生回车符，回车符又相当于空白符，而多个空白符会合并为一个空白符，所以间隙产生了。

如何去除：

• 删去元素间的空白符(可读性差)；
• 设置父元素font-size:0即可(若有字体，不建议，增加代码量)；
• 设置父元素display:table和word-spacing:-1em。

3 flex弹性盒子

设置display: flex;的父元素为容器；容器内的元素为其项目

3.1 容器属性

3.1.1 flex-direction

• row（默认）：主轴为水平向右
• row-reverse：主轴为水平向左
• column：主轴为垂直向下
• column-reverse：主轴为垂直向上

3.1.2 flex-wrap

• nowrap（默认）：不换行
• wrap：首行在上，换行
• wrap-reverse：首行在下，换行

3.1.3 flex-flow

同时定义flex-direction与flex-wrap

    flex-flow: <flex-direction> <flex-wrap>;

3.1.4 justify-content

• flex-start（默认）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间间隔相等。

3.1.5 align-items

• stretch（默认）：项目未设置高度或设为auto，将占满整个容器的高度。
• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。

3.1.6 align-content

align-content只有多行的时候才起作用：

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

3.2 项目属性

3.2.1 order

项目数值越小，排列越靠前，默认为0

    .item {
      order: <integer>;
    }

3.2.2 flex-grow

按比例瓜分父元素剩余空间，默认值是0

    .item {
      flex-grow: <number>;
    }

3.2.3 flex-shrink

空间不足，该项目将按定义的缩小比例缩小，默认为1

    .item {
      flex-shrink: <number>;     /*负值无效*/
    }

3.2.4 flex-basis

固定项目初始大小，默认值auto

.item {
  flex-basis: <length> | auto; /* default auto */
}

3.2.5 flex

默认值：0 1 auto

    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

3.2.6 align-self

设置后此项目可不同于其他项目排列方式，即覆盖父元素（容器）的align-items属性，默认值为auto，auto代表继承父元素align-items属性。

4 BFC与IFC

4.1 BFC

块级格式上下文，其子元素不影响外边元素，外边元素不影响其子元素。

4.1.1 形成条件

• 根元素
• float 不为 none
• position 取值为 absolute或fixed
• display 取值为 inline-block、table-cell、table-caption、flex、inline-flex
• overflow 不为 visible

4.1.2 布局规则

• 内部的盒子垂直放置；
• 盒子垂直方向的距离由margin决定(注意：属于同一个BFC的两个相邻Box的上下margin会发生重叠，可以给一个外边叠加一个容器只允许触发一个容器，两者就不会处于同一BFC中了);
• 每个元素的左边与包含的盒子的左边相接触，即使存在浮动也是如此；
• BFC的区域不会与float重叠；
• BFC是一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦如此；
• 浮动元素也参与BFC的高度计算之中。

4.2 IFC

内联格式上下文，高度为其内最高的行内元素决定，IFC 的 inline box一般左右都贴紧整个IFC，不受到竖直方向的 padding/margin 影响，但 float 元素会扰乱，因为 float 元素会位于 IFC 与 line box 之间，使得 line box 宽度缩短。

4.1.1 形成条件

• 块级元素中仅包含内联级别元素

4.1.2 布局规则

• 子元素水平方向横向排列，并且垂直方向起点为元素顶部；
• 子元素只会涉及横向样距离；
• 在垂直方向上，子元素会以不同形式来对齐（vertical-align）；
• 能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框。行框的宽度由由包含块和与其中的浮动决定；
• IFC中的“ line box ”一般左右边贴紧其包含块，但 float 元素会优先排列；
• IFC中的“ line box ”高度由 CSS 行高计算规则来确定，同个 IFC 下的多个 line box 高度可能会不同。
• 当 inline-level boxes的总宽度少于包含它们的line box时，其水平渲染规则由 text-align 属性值来决定；
• 当一个“inline box”超过父元素的宽度时，它会被分割成多个boxes，这些 boxes 分布在多个“line box”中。如果子元素未设置强制换行的情况下，“inline box”将不可被分割，将会溢出父元素。

4.2.3 作用

• 水平居中：当一个块要在环境中水平居中时候，设置其为 inline-block 则会在外层产生 IFC，通过 text-align:center 则可以使其水平居中。
• 垂直居中：创建一个 IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align:middle ,其他行内元素则可以在此父元素下垂直居中。

5 占满剩余部分

5.1 占满剩余宽度（两栏布局：左固右适）

5.1.1 float + BFC

    .left {
      width: 200px;
      height: 300px;
      float: left;
      background: yellow;
    }

    .right {
      height: 400px;
      background: orange;
      overflow: hidden;     /*触发BFC：BFC不与浮动元素重叠*/
    }
    
    <div class="container">
      <div class="left">左侧固定</div>
      <div class="right">右侧自适应</div>
    </div>

5.1.2 float + margin-left

    .left {
      width: 200px;
      height: 300px;
      float: left;
      background: yellow;
    }

    .right {
      height: 400px;
      background: orange;
      margin-left: 200px
    }
    
    <div class="container">
      <div class="left">左侧固定</div>
      <div class="right">右侧自适应</div>
    </div>

效果同上

5.1.3 absolute

    .left {
      width: 200px;
      height: 300px;
      background: yellow;
      position: absolute;
    }

    .right {
      height: 400px;
      background: orange;
      margin-left: 200px;
    }
    
    <div class="container">
      <div class="left">左侧固定</div>
      <div class="right">右侧自适应</div>
    </div>

效果同上

5.1.4 table

    .container {
      display: table;
      width: 100%;
    }

    .left {
      width: 200px;
      height: 400px;
      background: yellow;
      display: table-cell;
    }

    .right {
      height: 400px;
      background: orange;
    }
    
    <div class="container">
      <div class="left">左侧固定</div>
      <div class="right">右侧自适应</div>
    </div>

5.1.5 flex布局

    .container {
      display: flex;
    }

    .left {
      width: 200px;
      height: 400px;
      background: yellow;
    }

    .right {
      height: 400px;
      background: orange;
      flex: 1;
    }
    
    <div class="container">
      <div class="left">左侧固定</div>
      <div class="right">右侧自适应</div>
    </div>

效果同前几个

5.1.6 calc函数

5.2 占满剩余高度

5.2.1 绝对定位

    .container {
      width: 600px;
      height: 600px;
      position: relative;
    }

    .top {
      height: 50px;
      background: yellow;
    }

    .bottom {
      position: absolute;
      left: 0;
      top: 50px;
      bottom: 0;
      width: 100%;
      background: orange;
    }
    
    <div class="container">
      <div class="top">上册固定</div>
      <div class="bottom">下册适应</div>
    </div>

5.2.2 calc函数(父元素高度必须固定)

    .container {
      width: 600px;
      height: 600px;
      position: relative;
    }

    .top {
      height: 50px;
      background: yellow;
    }

    .bottom {
      height: calc(100% - 50px);
      background: orange;
    }
    
    <div class="container">
      <div class="top">上册固定</div>
      <div style="height: 100%;">
        <div class="bottom">下册适应</div>
      </div>
    </div>

效果同上

5.2.3 弹性布局

    .container {
      width: 600px;
      height: 600px;
      display: flex;
      flex-direction: column;
    }

    .top {
      height: 50px;
      background: yellow;
    }

    .bottom {
      flex: 1;
      background: orange;
    }
    
    <div class="container">
      <div class="top">上册固定</div>
      <div class="bottom">下册适应</div>
    </div>

效果同上

6 三栏布局

6.1 float

    .container {
      width: 600px;
      height: 600px;
    }

    .left {
      float: left;
      width: 100px;
      height: 100%;
      background: green;
    }

    .right {
      float: right;
      width: 100px;
      height: 100%;
      background: yellow;
    }

    .center {
      height: 100%;
      margin-left: 100px;
      margin-right: 100px;
      background: orange;
    }
    
    <div class="container">
      <div class="left">左固定</div>
      <div class="center">中间自适应</div>
      <div class="right">右固定</div>
    </div>

6.2 absolute

    .container {
      position: absolute;
      width: 600px;
      height: 600px;
    }

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/81292a8a627a4aae9c08be392f05ca1f~tplv-k3u1fbpfcp-watermark.image)
    .left {
      position: absolute;
      left: 0;
      width: 100px;
      height: 100%;
      background: green;
    }

    .right {
      position: absolute;
      right: 0;
      float: right;
      width: 100px;
      height: 100%;
      background: yellow;
    }

    .center {
      position: absolute;
      left: 100px;
      right: 100px;
      height: 100%;
      background: orange;
    }
    
    <div class="container">
      <div class="left">左固定</div>
      <div class="center">中间自适应</div>
      <div class="right">右固定</div>
    </div>

效果同上

6.3 弹性盒子

    .container {
      display: flex;
      width: 600px;
      height: 600px;
    }

    .left {
      width: 100px;
      height: 100%;
      background: green;
    }

    .right {
      float: right;
      width: 100px;
      height: 100%;
      background: yellow;
    }

    .center {
      flex: 1;
      right: 100px;
      height: 100%;
      background: orange;
    }
    
    <div class="container">
      <div class="left">左固定</div>
      <div class="center">中间自适应</div>
      <div class="right">右固定</div>
    </div>

6.4 圣杯布局(加上header与footer)

• 优点：不需要添加dom,兼容性好
• 缺点：中间部分<左边时布局会发生混乱

    .container {
      display: flex;
      flex-direction: column;
      width: 600px;
      height: 600px;
      text-align: center;
      color: white;
    }

    .header, .footer {
      height: 50px;
      background: purple;
    }

    .footer {
      clear: both;    /*清除浮动*/
    }

    .main {
      flex: 1;
      top: 50px;
      bottom: 50px;
      padding: 0 100px;
    }

    .left, .right, .center {
      float: left;
      position: relative;
      width: 100px;
      height: 100%;
      background: green;
    }

    .left {
      margin-left: -100%;
      left: -100px;
    }

    .right {
      margin-left: -100px;
      right: -100px;
    }

    .center {
      width: 100%;
      height: 100%;
      background: orange;
    }
    
    <div class="container">
      <div class="header">头</div>
      <div class="main">
        <div class="center">中间自适应</div>
        <div class="left">左固定</div>
        <div class="right">右固定</div>
      </div>
      <div class="footer">尾</div>
    </div>

6.4 双飞翼布局(加上header与footer)

    .container {
      display: flex;
      flex-direction: column;
      width: 600px;
      height: 600px;
      text-align: center;
      color: white;
    }

    .header,
    .footer {
      height: 50px;
      background: purple;
    }

    .footer {
      clear: both;
      /*清除浮动*/
    }

    .main {
      flex: 1;
      top: 50px;
      bottom: 50px;
    }

    .left,
    .right,
    .center {
      float: left;
      position: relative;
      width: 100px;
      height: 100%;
      background: green;
    }

    .left {
      margin-left: -100%;
    }

    .right {
      margin-left: -100px;
    }

    .center {
      width: 100%;
      height: 100%;
      background: orange;
    }
    
    .content {
      height: 100%;
      margin-left: 100px;
      margin-right: 100px;
    }
    
    <div class="container">
      <div class="header">头</div>
      <div class="main">
        <div class="center">
          <div class="content">
            中间自适应
          </div>
        </div>
        <div class="left">左固定</div>
        <div class="right">右固定</div>
      </div>
      <div class="footer">尾</div>
    </div>

效果同上

圣杯与双飞翼不同点：

• 圣杯布局：非主要元素占据其父元素的 padding 部分
• 双飞翼布局：非主要元素占据主要元素的 margin 部分

7 清除浮动

7.1 为什么要清除浮动？

float会导致父元素高度塌陷

7.2 请除浮动

1. 在需要清楚浮动的块后，添加带有clear属性的空元素；

• 优点：简单
• 缺点：不优雅

2. ⽗级 div 定义 height
3. ⽗级 div 定义伪类 :after
4. ⽗级 div 定义 overflow:hidden

8 margin

margin: 1px; 上下左右都为1px
margin: 1px auto; 上下,左右平均居中
margin: 2px 1px;  上下,左右
margin: 1px 2px 3px  上,左右,下边距
margin:1px 1px 1px 1px  上,右,下,左

9 绘制三角形

9.1 原理

div 宽高设置为0，设置各个方向的boder，即 boder-方向: 宽度 solid color;，三角形的底在哪个方向，哪个方向的color设置颜色，相邻两个方向颜色为transparent，下面例子可以更好帮助理解原理：

    #triangle {
      width: 0;
      height: 0;
      border-top: 50px solid black;
      border-right: 50px solid orange;
      border-bottom: 50px solid red;
      border-left: 50px solid pink;
    }
    
    <div id="triangle"></div>

9.2 例子

    #triangle {
      width: 0;
      height: 0;
      border-right: 100px solid transparent;
      border-left: 100px solid transparent;
      border-bottom: 200px solid red;     /*三角形底*/
    }
    
    <div id="triangle"></div>

9.2 旋转三角形

#sanjiaoxing {
  width: 0;
  height: 0;
  border-bottom: 100px solid red;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  animation: test 3s ease 0.5s infinite alternate;
} 

@keyframes test {
  25% {
    transform: rotateY(45deg);
  }
  50% {
    transform: rotateY(90deg);
  }
  75% {
    transform: rotateY(135deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

10 CSS3渐变

10.1 线性渐变

10.1.1 从上到下（默认）

    background-image: linear-gradient(orange, red);

10.1.2 其他方向

    background-image: linear-gradient(to top, orange, red);  /*向上*/
    background-image: linear-gradient(to right, orange, red);  /*向右*/
    background-image: linear-gradient(to left, orange, red);  /*向左*/
    background-image: linear-gradient(to bottom right, orange, red);  /*向右下*/

其中指定方向也可使用指定角度(单位为deg，角度是指水平线和渐变线之间的角度，逆时针方向计算)。

10.2 径向渐变

中间向外渐变

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

11 CSS2D转换

• transform: translate(x, y)：移动位置
• transform: rotate(90deg)：将元素顺时针旋转90度；度数<0，则逆时针
• transform: scale(x, y)：宽度为原来的x倍，高度为原来的y倍
• transform: skew(10deg,20deg)：元素沿X轴倾斜10度，沿Y轴倾斜20度
• transform: skewX(10deg)：元素沿X轴倾斜10度
• transform: skewY(20deg)：元素沿Y轴倾斜20度
• transform: matrix(n, n, n, n, n, n)：合并

12 CSS3D转换

• transform: translate3d(x,y,z)：还可分别移动x、y、z，即translateX(x)、translateY(y)、translateZ(z)
• transform: scale3d(x,y,z)：还可分别缩放x、y、z，即scaleX(x)、scaleY(y)、scaleZ(z)
• transform: rotate3d(x,y,z,angle)：还可分别旋转x、y、z方向，即rotateX(angle)、rotateY(angle)、rotateZ(angle)
• transform: perspective(n)：透视试图
• matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)：合并

13 过渡

13.1 属性

属性	描述
transition	合并四个属性
transition-delay	过渡效果延迟时间
transition-duration	过度效果持续时间
transition-property	过渡效果所针对的 CSS 属性名称
transition-timing-function	过渡效果的速度曲线

13.2 例子

    .gradient {
      width: 300px;
      height: 200px;
      background-color: orange;
      transition-delay: 1s;
      transition-duration: 3s;
      transition-property: background-color;
      transition-timing-function: linear;
    }

    .gradient:hover {
      background-color: red;
    }
    
    <div class="gradient"></div>

14 动画

菜鸟教程：https://www.runoob.com/css3/css3-animations.html

@keyframes	规定动画。	CSS3
animation	所有动画属性的简写属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。

14.1 例子

    .gradient {
      width: 30px;
      height: 30px;
      margin: 85px;
      border-radius: 50%;
      border: 20px solid orange;
      animation: test 3s ease 0.5s infinite alternate;
    }

    @keyframes test {
      25% {
        width: 50px;
        height: 50px;
        margin: 75px;
        border-radius: 50%;
        border: 20px solid orange;
      }

      50% {
        width: 100px;
        height: 100px;
        margin: 50px;
        border-radius: 50%;
        border: 20px solid orange;
      }

      75% {
        width: 150px;
        height: 150px;
        margin: 25px;
        border-radius: 50%;
        border: 20px solid orange;
      }

      100% {
        width: 200px;
        height: 200px;
        margin: 0;
        border-radius: 50%;
        border: 20px solid orange;
      }
    }
    
    <div class="gradient"></div>

效果为一个由半径为30px的圆放大到半径为100px的圆。

15 伪类与伪元素

15.1 定义

伪类与伪元素是用来修饰文档树内以外的部分。

• 伪类：为当时选定元素添加对应该当时状态的样式
• 伪元素：创建当前文档树不存在的元素

15.2 常见伪类

15.2.1 状态伪类

会随着用户操作而动态变化的

• :link 应用于未被访问过的链接；    
• :hover 应用于鼠标悬停到的元素；
• :active 应用于被激活的元素；
• :visited 应用于被访问过的链接，与:link互斥。
• :focus 应用于拥有键盘输入焦点的元素。

15.2.2 结构性伪类

CSS3新增，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。

• :first-child 选择某个元素的第一个子元素；
• :last-child 选择某个元素的最后一个子元素；
• :nth-child(n) 选择所有某个元素的父元素的第n个子元素；
• :nth-last-child(n) 选择所有某个元素的父元素的倒数第n个子元素；
• :nth-of-type(n) 选择所有某个元素的第n个元素；
• :nth-last-of-type(n) 选择所有某个元素的倒数第n个元素；
• :first-of-type 选择某个元素是其父元素的第一个元素；
• :last-of-type 选择某个元素是其父元素的最后一个元素；
• :only-child 选择的元素是其父元素的唯一一个子元素；
• :only-of-type 选择所有唯一子元素为该元素的元素；
• :empty 选择的没有子元素的某个元素。
• :checked 匹配被选中的input元素，这个input元素包括radio和checkbox。
• :default 匹配默认选中的元素，例如：提交按钮总是表单的默认按钮。
• :disabled 匹配禁用的表单元素。
• :enabled 匹配没有设置disabled属性的表单元素。
• :valid 匹配条件验证正确的表单元素。

15.2 常见伪元素

• ::first-letter 选择元素文本的第一个字（母）。
• ::first-line 选择元素文本的第一行。
• ::before 在元素内容的最前面添加新内容。
• ::after 在元素内容的最后面添加新内容。
• ::selection 匹配用户被用户选中或者处于高亮状态的部分
• ::placeholder 匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效