CSS 知识总结

浏览器的渲染原理

• 查看CSS各属性触发什么CSSTriggers.com
• 步骤

1. 根据HTML构建HTML树（DOM）
2. 根据CSS构建CSS树（CSSOM）
3. 将两棵树合并成一颗渲染树（render tree）
4. layout布局（文档流、盒模型、计算大小和位置）
5. Compose合成（根据层叠关系展示画面）

如何更新样式

一般用JS来更新样式

1. div.style.background = ‘red’
2. div.style.display = ‘none’
3. div.classList.add(‘red’)
4. div.remove()直接删掉节点

三种不同更新方式步骤 更新方式

1. 第一种，全部来一遍
   • div.remove()会触发当前消失，其他元素layout
2. 第二种，跳过layout
   • 比如改变背景颜色，会跳过layout
3. 第三种，跳过layout和paint
   • 比如改变transform，只需要composite

• CSS动画优化 完整内容可查看文档：动画优化

transition过渡动画

当元素的样式从一种状态变成另一种状态的时候，产生平滑的过渡效果

注意事项：transition只能在两种不同的状态之间产生过渡动画，不能有两种以上的状态

移动:

• x轴移动:transform:translateX(200px);
• Y轴移动:transform:translateY(200px);
• Z轴移动:transform:translateZ(200px);
• 缩写:
  • transform:translate3d(x,y,z)
  • transform:translate(x,y);

缩放

• 整体缩放:transform:scale(x,y?); => 当x=y时,可直接填写一个数
• x轴放大:transform:scaleX(1.5)
• y轴放大:transform:scaleY(1.5)

旋转

• X轴旋转:transform:rotateX(45deg);
• Z轴旋转:transform:rotateY(45deg);
• Z轴旋转:transform:rotateZ(45deg);
• Z轴旋转:transform:rotate(45deg);

倾斜

• transform:skewX(45deg);
• transform:skewY(45deg);

过渡

属性	描述
transition	过渡效果简写
transition-property	过渡的 CSS 属性的名称，默认值为all
transition-duration	过渡效果花费的时间。默认是 0。
transition-timing-function	过渡效果的时间曲线。默认是 “ease”。
transition-delay	延迟多少时间执行。默认是 0。

• 过渡方式:
  • linear：匀速
  • ease：慢速开始，然后变快，然后慢速结束的过渡效果
• ease-in：慢速开始的加速度过渡效果
• ease-out：以慢速结束的减速过渡效果
• ease-in-out：以慢速开始和结束的过渡效果,渐显渐隐

animation动画

动画效果参考

定义动画的两种方式

/*方式一：from...to...
-----------------------*/
@keyframs 动画名称 {
	from{
        /* 起始状态 */
    }
	to{
        /* 结束状态 */
    }
}

/*方式二：百分比显示进度，% 是对完成时间的划分
-----------------------*/
@keyframs 动画名称 {
	0%{
        /* 时间的0%时候的状态 */
    }
    50%{
        /* 时间的50%时候的状态 */
    }
	100%{
        /* 时间的100%时候的状态 */
    }
}

使用动画

/*
*选择器 {
*	animation:动画名称 duration timing-function？delay？ ...？
*}
*/

动画属性

属性	描述
animation	所有属性的缩写形式，除了animation-play-state
animation-name	* 动画名称
animation-duration	* 完成所需的时间，s | ms
animation-timing-function	速度曲线，默认是"ease"
animation-delay	延时开始时间，默认是0，不延时开始
animation-iteration-count	播放次数，默认为1，“infinite” 表示无限循环
animation-direction	是否在下一周期逆向地播放，默认是 “normal”
animation-fill-mode	结束时候的状态
[animation-play-state](#animation-play-state JS控制)	是否正在运行或暂停, paused(暂停) | running(运行)

animation-direction

• reverse：反方向执行
• alternate：来回执行
• alternate-reverse：反方向执行,并来回执行

animation-fill-mode

• normal：正常执行，结束后跳到起始状态
• reverse：从动画结束状态反向执行动画
• alternate：来回交替执行
• alternate-reverse：反向执行， 并且来回交替执行

animation-timing-function

• linear：匀速
• ease：低速开始，然后加快，结束前变慢
• ease-in：低速开始
• ease-out：低速结束
• ease-in-out：低速开始和结束
• steps（步数, <start | end>？)：分步完成 ，时间划分成块来执行
  • start：直接第二个关键帧开始，结束时超出位置
  • end：默认值，从第一个关键帧开始，走规定步数
  • 参考网站
• step-start：等同于steps(1,start)
• step-end：等同于steps(1,end)

flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"

当为block类元素创建display:flex或者为inline内联元素创建display:inline-flex的时候，就创建了一个flex布局的容器。

一个flex布局的容器里面可以包含一个或者多个flex items子项。

flex布局只定义flex items子项在flex 容器里面的布局方式

容器默认存在两根轴：水平的主轴和垂直的侧轴

设置display:flex或者display:inline-flex的元素称为flex容器

.box{
display: flex;
}

容器的属性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction

作用：改变主轴的方向（即项目的排列方向）

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

• row：默认值，主轴为水平方向从左往右
• row-reverse：主轴为水平方向， 和row取反
• column ：主轴为垂直方向，从上往下排列。
• column-reverse ：和column取反。主轴为垂直方向，从下往上排列。

flex-wrap

作用：换行方式

flex-wrap: nowrap | wrap | wrap-reverse

• nowrap（默认）：不换行。

  注意事项：不换行，子项的宽度会自动压缩
  

• wrap：换行，第一行在上方。

• 

• wrap-reverse：换行，第一行在下方，从下到上排列
  

flex-flow

flex-direction和flex-wrap的缩写

flex-flow:flex-direction flex-wrap 

justify-content

子项主轴对齐方式

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

• flex-start：靠左（文档流方向相关）

• flex-end：靠右（文档流方向相关）

• center：居中

• space-between：两端贴边，空间在中间平均分布
  

• space-around：平均分布，第一个和最后一个左右的间距是中间间距的一半
  

• space-evenly：平均分布，每个间距都一样
  

align-items

只有一行元素时，垂直对齐方式

align-items: flex-start | flex-end | center | baseline | stretch;

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

align-content

多行元素时，垂直对齐方式

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

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。

项目的属性

• order
• align-self
• flex-grow
• flex-shrink

order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

order:-1

下方把第三个div 元素放置到最前面

align-self

单独设置侧轴的对齐方式

baselinecenteralign-self: auto | stretch | flex-start | flex-end | center | baseline;

• auto：继承父元素设置的align-items的值
• flex-start：顶部对齐（与文档流方向相关）
• flex-end：底部对齐（与文档流方向相关）
• center：垂直居中对齐
• baseline：基线（字母x的下边缘）对齐

flex-grow

宽度放大比例，默认为0，对剩余空间进行利用

下图把剩余的空间划分，2号占据1份，3占据2份

flex-shrink

主要处理当flex容器空间不足时候，单个元素的收缩比例,默认值是1

Grid布局

Grid布局是一种二维网格布局，由行和列构成

索引

作用在grid容器上	作用在grid子项上
grid-template-columns grid-template-rows grid-template-areas grid-template grid-column-gap grid-row-gap grid-gap justify-items align-items place-items justify-content align-content place-content grid-auto-columns grid-auto-rows grid-auto-flow grid	grid-column-start grid-column-end grid-row-start grid-row-end grid-column grid-row grid-area justify-self align-self place-self

常用值：

• px：像素
• fr：将剩余的空间划分的份数
• 百分比
• auto：占据剩余的空间
• repeat()：表示重复某个数值，
  • repeat(5,1fr)：剩余空间连续划分5等份
  • repeat(5,100px)：重复划分5次，每次值为100px
  • repeat(5,50px 25px)：50px 和 25px 重复划分5次，值分别为50px 20px 50px 20px …
• minmax()：函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值

1.声明网格

在父元素中添加display:grid 或 display:inline-grid

• display:grid ：容器元素都是块级元素
• display:inline-grid：容器元素都是行内块元素

.grid-container{
 display:grid;
}

2.划分网格

在父元素中，通过属性 grid-template-columns划分列数及列宽，每一个值表示一列

在父元素中，通过属性grid-template-rows划分行数及行高，每一个值表示一行

.container{
    display:grid;
    widht:800px;
    height:500px;
    
/* 划分列数
*第一列宽度为150px,
*第二列根据剩余宽度自适应 
*第三列宽度为100px
*/
   grid-template-columns:150px auto 100px;

/* 划分行数，
*第一行和第三行高度为100px
*第二行高度根据剩余高度自适应 
*/
    grid-template-rows:100px auto 100px;
}

3.给每条线添加自定义名称

• 每划分行或者列都将会有一条线，可以用编号表示，默认为1开始，如下所示
• 每条线也可以自定义名称，在划分网格时，在设置尺寸前添加[自定义名称]

.grid-container{
    display:grid;
    
    /* 在定义宽度或高度前添加[名称]*/
    grid-template-columns:[line1] 150px [line2] auto [line3] 100px [line4];
    grid-template-rows:[line1] 100px [line2] auto [line3] 100px [line4];
}

合并单元格

<stye>
.container{
display:grid;
width:500px;
height:400px;
grid-template-columns:[line1] 150px [line2]auto [line3] 100px [line4];
grid-template-rows:[line1] 100px [line2] auto [line3] 100px [line4];
}
.container >div {
border:1px solid red
}

/*
.a{
     grid-row-start:1;
     grid-row-end:3;
     grid-column-start:1;
     grid-column-end:3;
}
*/

.a{
     grid-row-start:line1;
     grid-row-end:line3;
     grid-column-start:line1;
     grid-column-end:line3;
}
</stye>



<body>
<div class="container">
 <div class=a>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
</div>  
</body>

设置网格间隔

在父元素中，通过grid-row-gap设置行与行的间距
在父元素中，通过grid-column-gap设置行与行的间距
简写：grid-gap：<row-gap> <column-gap>,省略第二个值，默认两个值是相等的

注意事项

• 父容器设置了宽和高，

  • 设置间距有可能超出父容器的大小，超出部分会在其他周边元素的上方,

  • 父容器大小只是占据布局的位置,

    下方蓝色为父容器的大小
    

• 父容器只设置间距，没设置宽高

  • 单元格的大小如果设定固定值，单元格大小不变，只是扩大了间距
  • 父容器的大小根据单元格的大小撑开

网格区域命名

每一个划分出来的网格区域都可以用grid-template-areas属性命名
在子元素中使用grid-area来给元素指定放置区域

<style>
.container{
 display:grid;
 width: 550px;
 height: 400px;
 grid-template-columns:150px auto 100px;
 grid-template-rows:100px auto 100px;
 /* 网格区域命名， 
 *一个引号表示一样
 *一个名词表示一个单元格
 *不同单元格用空格隔开
 */
 grid-template-areas:
     "Q1 Q2 Q3"
     "Q4 Q4 Q4"
     "Q5 Q5 Q6"                      
}


.n1 {
 grid-area:Q1;
 background:red;
}
.n2 {
 grid-area:Q4;
 background:skyblue;
}
.n3 {
 grid-area:Q5;
 background:purple;
}
.n4 {
 grid-area:Q2;
 background:green;
}
.n5 {
 grid-area:Q3;
 background:orange;
}
.n6 {
 grid-area:Q6;
 background:cornflowerblue;
}
</style>
<body>
 <div class="container">
     <div class="n1">1</div>
     <div class="n2">2</div>
     <div class="n3">3</div>
     <div class="n4">4</div>
     <div class="n5">5</div>
     <div class="n6">6</div>
 </div>
</body>

** 区域划分效果**

** 代码执行效果**

• 把div元素放置在固定的单元格内
  

对齐方式

设置子元素在单元格内的对齐方式

在父容器中设置网格元素的对齐方式

指定了网格元素的水平呈现方式：justify-items: stretch | start | end | center

指定了网格元素的垂直呈现方式：align-items: stretch | start | end | center

• stretch：拉伸（默认值）
• start：左 / 上对齐（文档流方向相关）
• end：右 / 下对齐（文档流方向相关）
• center：居中对齐

简写：place-items：<align-items> <justify-items>?

设置网格内容区域在父盒子的对齐方式

水平对齐：justify-content: stretch | start | end | center | space-between | space-around | space-evenly

垂直对齐：align-content: stretch | start | end | center | space-between | space-around | space-evenly

• stretch：拉伸（默认值），拉伸效果需要在网格的目标尺寸有auto时生效
• start：左 / 上对齐（与文档流方向相关）
• end：右 / 下 对齐（与文档流方向相关）
• center：居中对齐
• space-between：两端对齐（两端贴边，中间平均分布）
• space-around：平均分布（单元格四周都有相同的间距）
• space-evenly：平均分布

简写：place-content: <align-content> <justify-content>?

子元素对齐方式

• 设置单元格内容的的对齐方式，跟justify-items 和align-items作用一样，区别在与该属性只作用于单个项目

水平对齐：justify-self: stretch | start | end | center

垂直对齐：align-self: stretch | start | end | center

• stretch：拉伸
• start：
• end
• center
  简写：place-self: <align-self> <justify-self>?