CSS 知识总结

涵卓

主要重点：border调试法不管写什么样式一定要写border

1.文档流:即文档中元素流动的方向，大致分为一下三种inline-block，inline，block，其中又分为三种：流动方向，高度，宽度

流动方向

inline：元素从左到右，直到最右边才换行
block：元素从上到下，吗，每一个都另起一行
inline-block：从做到右

高度

inline：宽度为内部元素的和，width无效
block：宽度默认自动结算，可以用width设置
inline-block：可用width设置

宽度

inline：高度由line-height决定，跟height无关
block：高度由内部文档流元素决定，可以用height设置
inline-block：可以用height设置

2.div溢出操作：

overflow

hidden：隐藏溢出
auto：自动
scroll：滑动
visible：显示溢出

3.div和span的高度差距

div：无内容高度为0
span：无内容有高度

4.如何脱离文档流

float
position:absolute/fixed

5.盒模型

content-box width=contetn

border-box（一般用这个） width=content+border+padding

6.外边距合并

父子外边距合并

解决方法：加一个padding/border、overflow：hidden、display：flex

兄弟外边距合并

解决方法：inline-block

7.float布局

不管怎么样先加一个.clearfix ,可以理解为清除浮动，因为元素添加float属性后.子元素会浮动（详细了解上下层叠文），使得父亲（block类型）里面没有了文档流元素，导致了父亲没有高度。

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

1.添加float属性

display：float；

小知识：

如何解决img中的图片下方有多余部分

vertical-align：top；

8.flex布局

/*父元素变成flex容器*/
.father{
   display:flex;
/*改变容器里item流动方向*/
.father{
    flex-direction:row|column; /*item row横排、column竖排  反响在后面加一个-revesre*/
/*换行*/
.father{
    flex-wrap:wrap; /* nowrap不换行  wrap-reverse 过来 */
/*item 纵向对齐方式*/
.item{
     justify-content:flex-start; /* 从头 */
     justify-content:flex-end; /*从尾 */
     justify-content:center; /* 居中 */
     justify-content:space-between; /* 子元素之间有空隙  平分*/
     justify-content:space-around; /* 子元素两边都有空隙   */
     justify-content:space-between; /* 所有子元素两边的空间空隙相等*/
/*item 横向对齐方式*/
.item{
     align-items:flex-start; /* 向上 */
     align-items:flex-end; /* 向下 */
     align-items:center; /* 居中 */
/*item 横向空间 */
.item{
     align-content:flex-start; /* 布局都放在上面*/
     align-content:flex-end; /* 布局都放在下面*/
     align-content:center; /* 吧多余的行高上下平分 */
     align-content:space-between; /* 子元素之间有空隙  平分*/
     align-content:space-around; /* 子元素两边都有空隙   */
     align-content:space-between; /* 所有子元素两边的空间空隙相等*/
/* 权重 */
.item{
     flex-grow:1;
}

9.grid布局

/*父元素变成grid容器*/
.father{
    display: grid;/* 或者是inline-flex*/
/*行列设置*/
.father{
    grid-template-columns:40px 50px auto 50px 50px;/* 列宽40px 50px 自动 50px 40px */
    grid-template-rows:25% 100px auto;/* 行宽25% 100px 自动 */
/*单元格的间隙*/
.father{
    grid-gap:12px /*每个格上下左右之间间隙12px*/
    grid-row-gap:12px /*每个格左右之间间隙12px*/
    grid-column-gap:12px /*每个格上下之间间隙12px*/
/*快速布局 grid-template-areas*/
.father{
    /* 相当于区分了 三行三列 第一行一列是A */
    grid-template-areas:
       "A B C"
       "D E F"
       "G H I";
.item{
    grid-area:A/B/C/D;   /* item就会占据A,B,C,D的区域位置 */
}

10.定位

层叠上下文：

一个div的分层，从上到下，可以分为：

内联子元素
浮动元素
块级子元素
边框
背景

哪些不正交的属性可以创建层叠上下文：层叠上下文。需要记忆的有z-index/flex/opacity(包住所有的东西显示为半透明)/transform。
其中z-index只对相同等级的元素有效

11.position

属性

static 默认
relative：相对定位，升起来，但是不脱离文档流
absolute：绝对定位一般跟relative配合使用
fixed：固定定位
sticky：粘滞定位

写了absolute，一定要加一个relative
写了absolute或者fixed ，一定要加top或者left
sticky兼容性很差

12.css动画

浏览器的渲染过程

根据HTML构建HTML树
根据CSS构建CSS树
将两颗树合并成一颗渲染树
lauout布局（文档流，盒模型，计算大小和位置）
paint绘制（根据边框，文字，阴影...）
compose合成（根据层叠关系展示画面）

13.css动画优化

JS优化：使用requestAnimationFrame代替setTimeout或setInterval
CSS优化：使用will-change或translate

14.transform属性

translateX(); 向x轴方向移动
translateY(); 向y轴方向移动
trandlateZ(); 向z轴方向移动
translate3d(X,Y,Z);
scale(); 放大
rotate（xdeg）；旋转
rotateX();
rotateY();
slcew(); 倾斜
slcewY();
sclewX();

15.transition过度:补充中间帧

变化位置	时间	过度方式	延迟
width	1s	linear	1s
height	...	ease	...
all	...	...	...

16.animation：声明关键帧，添加动画

第一种方法

时长
过渡方式(跟transition取值一样)
延迟
次数(3或2.4或infinite) |
方向(reverse|alternate|alternate-reverse) |
填充模式(none|forwards|backwords|both) |
是否暂停(paused|running) | 动画名；

第二种方法

animation: 1s infinite forwards xxx;
@keyframes xxx{
    transform:none;

主要重点：border调试法 不管写什么样式 一定要写border

主要重点：border调试法不管写什么样式一定要写border