CSS 知识总结

文档流布局：Normal Flow（默认）

行内（inline）

元素从左到右排列，一个有可能被分两段

1. inline 元素宽度能有多窄有多窄，不接受设定
2. 宽度由其inline元素宽度总和决定
3. 高度不接受设定，由height-line 间接决定
4. height-line 可以理解为 content’s height

border-box中height= content’s height+border+padding

块级（block）

每个元素占一行

1. 默认宽度能有多宽有多宽
2. 接受宽度设定，大部分情况下宽度不限死
3. margin默认为auto

4. 高度由里面的文档流元素决定，也接受设定

   行内块（inline-block）

   元素从左到右排列，一个元素不会被分成两段

5. 默认宽度能有多窄有多窄，但可以接受设定

6. 高度由里面的文档流元素决定，可以接受设定

区别表格

float布局

步骤一： 子元素CSS里 float ：left 和 设定宽度
步骤二： 父元素HTML加上 class=”clearfix”
步骤三： 清除浮动，CSS处写 .clearfix::after{

content:"
display: block;
clear:both;
}
//::after是伪元素，作为该选中元素的最后一个子元素，上述代码也是清除浮动的代码

技巧

• vertical-align:top;或vertical-align:middle; 可以除去图片下多余的东西
• 平均布局时采用负margin可以使子元素margin超出父元素的border
• border 改成 outline 可以使“边框”不占大小

flex布局

container就是容器，items就是内容

container属性

flex-direction

改变items的流向（items流向即为主轴）
属性值：

1. row（默认）
2. row-reverse
3. column

4. column-reverse

   flex-wrap

   换行调节
   属性值：

5. nowrap（默认）

6. wrap

7. wrap-reverse

   justify-content

   主轴的对齐方式
   属性值：

8. flex-start（ 默认）

9. flex-end
10. center
11. space-between
12. space-around

13. evenly

    align-items

    次轴的对齐方式
    属性值：

14. flex-start

15. flex-end
16. center

17. stretch（默认）

    align-content

    多行内容时次轴的对齐方式

18. flex-start

19. flex-end
20. center
21. stretch（默认）
22. space-between
23. space-around

items属性

.items:first-child{}表示第一个内容
.items:nth-child(2){}表示第二个内容
中间的以此类推
.items:last-child{}表示最后的内容

order

顺序
由小到大排序（负无穷~正无穷），默认值是0

flex-grow

分配多余空间（宽度）
默认0，即不额外分配
数值越大分配越多

flex-shrink

空间不足时按比例压缩各item的宽度
默认1，意思是各item1:1压缩
值为0，表示绝对不被压缩

flex-basis

指定了flex元素在主轴方向上的大小
默认auto（参照该元素的width和height）
值content : 基于元素内容自动调整大小
取值：auto | content | <’width’>

align-self

某一个item想要调节次轴对齐方式
.如果任何 flexbox 元素的侧轴方向 margin 值设置为 auto，则会忽略align-self

grid布局

同样也分container和items
让一个元素变成grid容器：在该元素的CSS处加上 display:grid; 或 display:inline-grid;

container属性

grid-template-areas:
“ header header header “
“ aside main ad “
“ footer footer footer”

grid-template-columns：竖直方向要划分的区域数量和尺寸
值：百分数，像素，fr
grid-template-rows: 水平方向要划分的区域数量和尺寸
值： 百分数，像素，fr
grid-gap: 网格之间的间隙
值： 像素

items属性

grid-column/row-start/end :
从竖直/水平多少开始/结束
简写形式 ： grid-column : 1 / 3 从竖直方向的第一根线开始到第三根线结束
grid-row： 1 / 3 从水平方向的第一根线开始到第三根线结束

浏览器渲染

1. 根据HTML构建HTML树（DOM）
2. 根据CSS构建CSS树（CSSOM）
3. 将两颗树渲染合并成一棵渲染树（render tree）
4. Layout布局（文档流、盒模型、计算大小和位置）
5. Paint绘制（把边框颜色、文字颜色、阴影等画出来）

6. Composite合成（根据层叠关系展示画面）

   样式更新后有三种渲染方式

7. javaScript——>Style——>Layout——>Paint——>Composite

8. javaScript——>Style——>Paint——>Composite
9. javaScript——>Style——>Composite

属性：Transition

值：

要过渡的属性名或all 过渡时间 过渡方式 延迟时间
并非所有属性都能过渡，如 display：none <——> display: block 就不行

#heart{
  display: inline-block;
  margin:100px;
  width: 200px;
  height: 300px;
  position: relative;
  transition: all 1s;
}
#heart:hover{
  transform:scale(1.2)
}

属性：animation

值：

动画节奏 次数（infinite无限次） 延迟 forwards（保持在最后位置） 方向（alternate）

#heart{
  display: inline-block;
  margin:100px;
  width: 200px;
  height: 300px;
  position: relative;
  animation: heart linear .5s infinite alternate-reverse;
}
@keyframes heart{
  0%{
    transform:scale(1)
  }
  100%{
    transform:scale(1.2)
  }
}