CSS总结

浏览器渲染原理

根据html文件构建一棵html树

根据CSS文件构建一棵CSS树

然后将两棵树合并成一棵渲染树（render tree）

Layout布局（文档流、盒模型、计算元素的大小和位置）

Paint绘制（边框颜色、文字颜色、其他颜色）

Composite合成

文档流

流动方向

• inline：元素从左到右，到达最右才会换行
• block：元素从上到下，每一个都另起一行
• inline-block：元素也是从左到右，到达最后换行，但是不会把元素分成两块

盒模型

• content-box：内容盒，content-box的宽度就是内容的宽度
• border-box：边框盒，border-box的宽度是内容的宽度+padding的宽度+border的宽度

css布局

• Float布局

  • 子元素上加上float: left和width
  • 父元素上加.clearfix

  .clearfix:after{content:'';display:block;clear:both;}

• Flex布局

  • 父元素container的样式

    让一个元素变成Flex容器

    display:flex|inline-flex;

  • 改变items的流动方向（主轴）

    flex-direction:row|row-reverse|column|column-reverse

  • 改变折行

    justify-content:flex-start|flex-end|center|space-between|space-around|space-evenly

  • 次轴

    align-content:flex-start|flex-end|center|stretch|space-between|space-around

  • 多行内容

    align-content:flex-start|flex-end|center|stretch|space-between|space-around

  • 子元素items的属性

• Grid布局

CSS定位

• div的分层

  • 最底层：background
  • border
  • 块级子元素
  • 浮动元素
  • 内联子元素

• position属性

  • static
  • relative
  • absolute
  • fixed
  • sticky

CSS动画

• transform

  transition: 属性名 时长 过度方式 延迟

  可以用all代替所有属性

  过度方式：linear、ease等，其他查询MDN

• animation

  animation：时长|过度方式|延迟|次数|方向|填充模式|是否暂停|动画名

  • 时长：1s或者1000ms
  • 过渡：n或者infinite，infinite可以让它一直动
  • 方向；reverse|alternate|alternate-reverse
  • 填充模式：none|forwards|backwards|both
  • 是否暂停：paused|running
  • keyframs：

     @keyframes slidein{
         from{
             transform:translateX(0%)
         }
         to{
             transform: translateX(100%)
         }
     }
  
     @keyframes identifier{
         0%{
             top:0;
             left:0;
         }
         30%{
             top:50;
         }
         72%{
             left:50px;
         }
         100%{
             top:100px;
             left:100%;
         }
     }