《CSS知识点总结》

CSS文档流

• display: inline; 设置元素为内联元素
• display: block; 设置元素为块级元素
• display: inline-block; 设置元素为块级-内联元素

1. 流动方向

• inline 元素从左到右，到达最右边会裂开换行
• block 元素从上到下，每一个都是另起一行
• inline-block 从左到右，但不会裂开换行

2. 宽度

• inline 不能用width 指定宽度，宽度为内部 linline 元素的和
• block 可用width指定宽度，默认自动计算宽度（width="auto",不是width="100%"）
• inline-block 可以width指定宽度，结合两者，默认宽度和inline一样

3. 高度

• inline 高度由line-height(行高)间接决定，跟height无关
• block 高度由内部文档流元素决定，可用height指定高度
• inline-block 和block类似，可以设置高度

3.溢出

overflow 来设置是否显示滚动条

• overflow: auto; 灵活设置，溢出就显示，否则就不显示
• overflow: scroll; 永远显示滚动条
• overflow: hidden; 隐藏溢出的部分
• overflow: visible; 显示溢出的部分
• overflow-x 和 overflow-y 指定X、Y轴滚动条

CSS盒模型

盒模型种类

• content-box 内容盒模型
• border-box 边框盒模型

两者区别：

• content-box的宽度只包含content(内容)
• border-box的宽度包含到border以内，border内部有内边距和内容
• content-box = content(内容)宽度
• border-box = content+padding+border

margin合并

• 父子 margin会合并
• 兄弟 margin会合并 阻止父子合并：

1. padding/border
2. overflow：hidden 阻止兄弟合并：
3. display: inline-block;

CSS布局

float布局

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

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

flex布局

• container 容器，加在父元素上
• item 项目，加在子元素上

container样式

• display: flex; 将容器变成flex容器
• display: inline-flex 和inline-block类似

1. 流动方向

• flex-direction: column; 从上往下
• flex-direction: column-reverse; 从下往上
• flex-direction: row; 默认值，从左往右
• flex-direction: row-reverse 从右往左

2. 折行

• flex-wrap: nowrap; 默认值，不折行
• flex-wrap: wrap; 折行
• flex-wrap: wrap-reverse; 从下往上折行

3. 主轴对齐方式

• justify-content: start; 默认值，往左靠
• justify-content: end; 往右靠
• justify-content: center; 居中
• justify-content: space-between; 两边靠边，中间居中
• justify-content: space-around; 包围式
• justify-content: space-evenly; 包围式，每个间隙相同

4. 次轴对齐方式

• align-items: stretch; 默认，拉伸成一样高
• align-items: flex-start; 向上靠
• align-items: flex-end; 向下靠
• align-items: center; 居中

5. 多行内容

• align-content: stretch; 默认，平均伸展开
• align-content: flex-start; 向上靠
• align-content: flex-end; 向下靠
• align-content: center; 居中
• align-content: space-between; 两边靠边，中间居中
• align-content: space-around; 包围式

items样式

• order 排列顺序，默认是0，给数字后从小到大排序
• flex-grow 变胖，分配多余的空间，默认是0
• flex-shrink 变瘦，默认是1，flex-shrink:0;防止变瘦
• flex-basis 控制基准宽度，默认是auto
• align-self 定制align-items，可以让单独一个向下对齐

grid布局

• container 容器，加在父元素上
• item 项目，加在子元素上
• display: grid; 将容器变成grid容器
• display: inline-grid

区域划分一

划分网格

grid-template-rows: 60px 300px 100px; 行，分为3行，以及每一行的高度

grid-template-columns: 40px auto 50px 40px; 列，分为4列，以及每一列的宽度

fr 自由空间

grid-template-rows: 1fr fr;
grid-template-columns: 1fr 1fr 1fr; 分为2行,3列

按线去划分

grid-row-start: 1; grid-row-end:2 ; 行的第一根线到第二根线

grid-column-start: 1; grid-column-end: 6; 列的第一根线到第六根线

宽高

• grid-template-rows: 60px auto 60px; 设置每一行的高度
• grid-template-columns: 100px auto 100px; 设置每一列的宽度
• rid-gap: 12px; 格子之间的间隙
• grid-row-gap: 10px; 设置每行之间的间隙
• grid-column-gap: 10px; 设置每列之间的间隙

区域划分二

grid-template-areas:
    "header header header"
    "aside main ad"
    "footer footer footer"

grid-area 告诉元素你是哪个区域

例子：

.container{
  display: grid;
  width: 600px;
  height:700px;
  grid-template-rows: 100px auto 100px;
  grid-template-columns: 100px auto 100px;  
  grid-template-areas:
    "header header header"
    "aside main ad"
    "footer footer footer"
}
header{
  border: 1px solid red;
  grid-area: header;
}
aside{
  border: 1px solid red;
  grid-area: aside;
}
main{
  border: 1px solid red;
  grid-area: main;
}
.ad{
  border: 1px solid red;
  grid-area: ad;
}
footer{
    border: 1px solid red;
    grid-area: footer;
}

CSS定位

• position：static; 默认值，待在文档流里

• position：relative; 相对定位，升起来，但不脱离文档流

  • 用于做位移
  • 用于给absolute 元素做爸爸
  • 配合z-index使用，默认值是auto

• position：absolute 绝对定位，定位基准是祖先里的非static，所以父辈需要position：relative;

  • 用于对话框的关闭按钮
  • 用于鼠标提示

• position：fixed 固定定位，定位基准是viewport

• position：sticky 粘滞定位

CSS动画

浏览器渲染原理

1. 根据HTML构建HTML树
2. 根据CSS构建CSS属
3. 将两颗树合并成一颗渲染树
4. Layout 布局（文档流、盒模型、计算大小和位置）
5. Paint 绘制（边框颜色、文字颜色、阴影等）
6. COmpose 合成（根据层叠关系展示画面）

transform 变形

1. 位移 translate

• transform: translateX(); X轴移动
• transform: translateY(); Y轴移动
• transform: translateZ(); Z轴移动
• transform: translate(x,y); X轴、Y轴
• transform: translate3d(x,y,z); X轴、Y轴、Z轴

2. 缩放 scale

• transform: scale();
• transform: scaleX(2); X轴缩放
• transform: scaleY(0.5); Y轴缩放

3. 旋转 rotate

• transform: rotate()
• transform: rotateX(10deg); 根据X轴旋转
• transform: rotateY(10deg); 根据Y轴旋转
• transform: rotateZ(10deg); 根据Z轴旋转

4. 倾斜 skew

• transform: skew();
• transform: skewX(); X轴倾斜
• transform: skewY(); Y轴倾斜

transition 过渡

作用：补充中间帧

• transition: 属性名 时长 过渡方式 延迟;
• transition: width 300ms linear 1s;
• transition: all 300ms ease-in 200ms;

animation 动画

设计动画

@keyframes heart{
  0%{
    transform: scale(1);     /* 正常大小 */
  }
  100%{
    transform: scale(1.2);   /* 变大1.2 */
  }
}

animation 中的属性

animation: xxx 3s linear infinite alternate running;

1. 时长: 1s 或 200ms
2. 过渡方式: 跟transition一样，如 linear
3. 次数：3 或 2.4 或 infinite（无限次）
4. 方向：
   • reverse 反方向
   • alternate 先正方向过去再原路返回
   • alternate-reverse 先反方向过去再原路返回
5. 填充模式：
   • none
   • forwards
   • backwards
   • both
6. 是否暂停
   • paused 暂停
   • running 运行