Day15 CSS3 学习笔记在满足触发条件的时候，让元素的某些可以过渡的 CSS 属性发生变化。 column-cou

1 回顾

1.1 变换

① 变换涉及的 CSS 属性

transform	设置变换的方式
transform-origin	设置变换的原点。
transform-style	开启3d空间， 值： flat、perserve-3d，设置给父元素。
perspective	设置景深，值是长度； 设置给父元素。
perspective-ogigin	观察者位置；设置给父元素。
baceface-visibility	设置背面隐藏，值：visible、hidden。

② 变换的方式（变换方法）

2D变换：
	1. 位移： translateX() translateY() translate()
	2. 缩放： scaleX() scaleY()  scale()
	3. 旋转： rotate()

3D变换:
	1. 位移： translateZ()	translate3D()
	2. 缩放： scaleZ()	scale3D()
	3. 旋转： rotateX()  rotateY()  rotateZ()  rotate3D()

1.2 过渡

① 过渡涉及的 CSS 属性

transition-property	设置过渡的属性，默认值是 all
transition-duration	过渡持续时间，值带单位， 单位：s、ms
transition-timing-function	过渡的动画效果	值：ease linear ...
trnasition-delay	过渡延迟时间
transition	复合属性

① 过渡的触发条件

1. 伪类选择器
2. 媒体查询
3. JavaScript

在满足触发条件的时候，让元素的某些可以过渡的 CSS 属性发生变化。

1.3 动画

① 关键帧

@keyframes 关键帧的名字 {
    0% {
        
    }
    
    100% {
    }    
}

② 动画涉及的 CSS 属性

1. animation-name	指定关键帧的名字
2. animation-duration	指定动画持续时间
3. animation-timing-function	指定动画效果
4. animation-delay	动画延迟执行的时间
5. animation-iteration-count5	动画执行次数，设置个数字或者 infinte
6. animation-direction	动画运动方向	值： reverse、alternate、alternate-reverse
7. animation-play-state	设置动画的运行状态	值：running、paused
8. animation-fill-mode 设置动画结束之后的状态  值： none、forwards、backwards、both
9. animation	复合属性

2 多列布局

① 设置给包裹元素的 CSS 属性（共 8 个属性）

column-count 指定列数，值是数字。
column-width 指定列宽，值是长度。
columns 同时指定列宽和列数，复合属性；值没有数量和顺序要求。
column-gap 设置列边距，值是长度
column-rule-style 设置列与列之间边框的风格，值与 border-style 一致。
column-rule-width 设置列与列之间边框的宽度，值是长度，
column-rule-color 设置列与列之间边框的颜色。
coumn-rule 设置列边框，复合属性。

column-width 和 column-count 如果同时设置，会采用列数少的那个设置；建议这两个不要同时设置！

② 设置给子元素的 CSS 属性（共 4 个属性）

column-span 指定是否跨列；值: none、all。
-wekbit-column-break-before 设置元素前面的断列方式；值： auto、always、avoid。
-wekbit-column-break-after 设置元素后面的断列方式；值： auto、always、avoid。
-wekbit-column-break-inside 设置元素内部的断列方式；值： auto、avoid。

3 伸缩盒布局

3.1 伸缩容器和伸缩项目

伸缩容器： 伸缩项目的包裹元素就是伸缩容器；给一个元素设置属性 display:flex 或者 display:inline-flex 该元素就成为伸缩容器。

伸缩项目： 伸缩容器的子元素就是伸缩项目。

注意：

只有伸缩容器的子元素才是伸缩项目，其他后代元素不会自动成为伸缩项目。

一个元素可以即是伸缩容器也是伸缩项目。

inline-flex 这个值不常用，大部分推荐使用 display:flex

3.2 设置主轴方向和换行方式

主轴： 伸缩项目沿着主轴排列；主轴默认是水平的且方向是从左到右。

侧轴： 与主轴垂直的就是侧轴；侧轴默认是垂直且方向是从上到下。

① 设置主轴方向

flex-direction 属性：

值：
row	 默认值，主轴方向水平从左到右。
row-reverse	 主轴方向水平从右到左。
column	主轴方向垂直从上到下。
column-reverse	主轴方向垂直从下到上。

注意：

改变了主轴的方向，侧轴方向也跟着边。

② 设置换行方式

flex-wrap 属性：

值：
nowrap	默认值，不换行。
wrap	自动换行，伸缩容器不够自动换行。
wrap-reverse	反向换行。

③ 同时设置主轴方向和换行方式

flex-flow 属性，是一个复合属性，复合了 flex-direction 和 flex-wrap 两个属性。值没有顺序数量要求。

3.3 设置伸缩项目在主轴上的对齐方式

justify-content 属性：

值：
flex-start	默认值，主轴起点对齐。
flex-end	主轴终点对齐。
center		居中对齐
space-between	均匀分布，两端对齐。（最常用）
space-around	均匀分布，两端距离是中间距离的一半。
space-evenly    均匀分布，两端距离与中间距离一致。

3.4 设置伸缩项目在侧轴上的对齐方式

① 一条主轴线（伸缩项目在主轴上不换行）

align-items 属性：

值：
stretch		默认值，伸缩项目在侧轴方向的长度拉伸。如果设置了伸缩项目在侧轴方向的长度就没有拉伸效果。
flex-start	侧轴起点对齐。
flex-end	侧轴终点对齐。
center		侧轴中间对齐。
baseline	基线对齐。

注意事项：

align-items 对于一条主轴线和多条主轴线情况，都会起作用；但是主要用于单条主轴线的情况。

② 多条主轴线（伸缩项目在主轴上发生换行）

align-content 属性：

stretch		默认值，伸缩项目在侧轴方向的长度拉伸。如果设置了伸缩项目在侧轴方向的长度就没有拉伸效果。
flex-start	侧轴起点对齐。
flex-end	侧轴终点对齐。
center		侧轴中间对齐。
space-between	
space-around
space-evenly

注意事项：

align-content 设置的其实是主轴和主轴之间（在侧轴方向上）的对齐方式。只适用于多条主轴线的情况。

3.5 伸缩项目的伸缩性

① 伸缩项目在主轴上的基准长度 flex-basis

flex-basis 默认值是 auto, 可以设置一个长度作为值。

用于设置伸缩项目在主轴方向上的长度，如果设置了 flex-basis,会导致伸缩项目的宽或者高失效，按照 flex-basis 的设置。

② 扩展比率 flex-grow

默认值 0，所有默认伸缩项目不会扩展。

发生扩展的条件：

伸缩容器在主轴上的长度有富余。

扩展的计算规则：

根据每个伸缩项目的扩展比率来瓜分伸缩容器的富余空间；与每个伸缩项目原来在主轴上的长度没关系。

③ 收缩比率 flex-shrink

默认值 1，所以默认伸缩项目会收缩。

发生收缩的条件：

伸缩容器在主轴上的长度不够。

收缩的计算规则：

根据每个伸缩项目原来在主轴上的长度和收缩比率进行计算。

注意：

伸缩项目无论怎么收缩，都会保证内容的完整；伸缩项目不会无限收缩。

④ flex 复合属性

flex: grow shrink basis;

简写：

flex: 1 相当于 flex:1 1 0

flex: auto 相当于 flex: 1 1 auto

flex: none 相当于 flex:0 0 auto

flex: 0 auto 相当于 flex: 0 1 auto; 默认自。

3.6 伸缩项目排序

使用属性 order，值设置为数字，值越小排序越靠前，可以是负值。

3.7 单独设置伸缩项目在侧轴上的对齐方式

使用属性 align-self ，值与 align-items 基本一致。

auto(默认值): 表示继承父元素的 align-items 属性。
flex-start：侧轴的起点对齐。
flex-end：侧轴的终点对齐。
center：侧轴的中点对齐。
baseline: 伸缩项目的第一行文字的基线对齐。
stretch：如果伸缩项目未设置高度或设为auto，将占满整个容器的高度。

3.8 伸缩盒相关 CSS 属性总结

① 设置给伸缩容器的属性

1. display	设置伸缩容器；值： flex、inline-flex

2. flex-direction	设置主轴方向；值：row、row-reverse、column、column-reverse

3. flex-wrap	设置换行方式；值： nowrap、wrap、wrap-reverse

4. flex-flow	同时设置主轴方向和换行方式，复合 flex-direction 和 flex-wrap

5. justify-content	主轴方向对齐方式；值 flex-start、flex-end、center、space-between、space-around、space-evenly

6. align-items	设置侧轴对齐方式； 值： stretch、flex-start、flex-end、center、baseline

7. align-content 设置侧轴对齐方式（适合多条主轴）； 值：stretch、flex-start、flex-end、center、space-between、space-around、space-evenly

② 设置给伸缩项目的属性

1. flex-basis	设置伸缩项目在主轴方向的基准长度；值可以设置长度，默认值 auto。

2. flex-grow	设置扩展比率；值是数字，默认值 0。

3. flex-shrink	设置收缩比率，值是数字，默认值 1。

4. flex	 复合属性，同时设置扩展比率、收缩比率、基准值。

5. order	设置伸缩项目的排列顺序；值是数字，值越小越靠前。

6. align-self	单独设置伸缩项目在侧轴上对齐方式； 值： auto、stretch、flex-start、flex-end、center、baseline

Day15 CSS3 学习笔记