Day14_CSS3课堂笔记

Day14 CSS3 笔记

1 回顾

1. 变换
1.1 变换相关 CSS 属性
	transform
	transform-origin
	transform-style: preserve-3d
	perspective
	perspective-origin
	backface-visibility
1.2 变换的方法
	2D变换：
	位移：translateX() translateY() translate()
	缩放：scaleX() scaleY() scale()
	旋转：rotate()
	3D变换：
	位移：translateZ()	translate3D()
	缩放：scaleZ() scale3D()
	旋转：rotateX() rotateY() rotateZ() rotate3D()


2. 过渡
   transition-property
   transition-duration
   transition-delay
   transition-timing-function
   transition

3. 动画
3.1 关键帧
    @keyframes 名字 {}
    一个元素可以设置多个关键帧
    一个关键帧可以设置给多个元素
3.2 相关CSS属性
	animation-name
	animation-duration
	animation-delay
	animation-timing-function
	animation-iteration-count
	animation-direction
	animation-play-state
	animation-fill-mode
	animation

2 多列布局

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

CSS 属性名	含义	值
column-count	设置列数	数字
column-width	设置列宽	长度
columns	同时设置列数和列宽	1 到 2 个值
column-gap	设置列间距	长度
column-rule-style	列分隔线风格	none：无，默认值。 solid：实线。 dashed：虚线。 dotted：点线。 double：双实线。
column-rule-width	列分隔线宽度	长度
column-rule-color	列分隔线颜色	颜色
column-rule	列分隔线复合属性	多个值

column-count 和 column-width：

1. 单独设置列数，单独设置列宽，都能实现多列布局
2. 如果同时设置列数和列宽，会有冲突，谁计算出来列数少，就按照哪一个
3. 推荐使用 column-count 设置列数

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

CSS 属性名	含义	值
column-span	设置是否跨列	none：不跨列，默认值。 all：跨越所有列。
-webkit-column-break-before	设置元素前面的断列方式	auto：自动，默认值。 always：总是断列。 avoid：避免断列。
-webkit-column-break-after	设置元素后面的断列方式	auto：自动，默认值。 always：总是断列。 avoid：避免断列。
-webkit-column-break-inside	设置元素内部的断列方式	auto：自动，默认值。 aviod：避免断列。

3 伸缩盒布局

3.1 伸缩容器和伸缩项目

伸缩容器： 给元素设置 CSS 属性 display: flex 或者 display: inline-flex，该元素就会变为伸缩容器。

伸缩项目： 伸缩容器的子元素自动变为伸缩项目，注意：只有子元素，其他后代元素不算。

伸缩项目的特点：

1. 伸缩项目沿主轴排列，主轴默认是水平， 不会脱离文档流
2. 伸缩项目默认宽高被内容撑开，可以设置宽高和内外边距，且外边距不会塌陷和合并
3. 伸缩项目具有伸缩性
4. 一个元素既可以作为伸缩项目又可以作为伸缩容器

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

① 设置主轴方向

主轴： 伸缩项目沿着主轴进行排列和分布，默认主轴是水平的。

侧轴： 与主轴垂直的就是侧轴。

修改主轴方向，侧轴也会改变，侧轴永远与主轴保持垂直。

使用 CSS 属性 flex-direction 可以设置主轴方向，属性的值如下：

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

② 设置换行方式

给伸缩容器设置 CSS 属性flex-wrap，可以设置伸缩项目在主轴上的换行方式，属性的值如下：

nowrap			不换行，默认值
wrap			自动换行
wrap-reverse	自动换行并进行行翻转

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

给伸缩容器设置 CSS 属性 flex-flow，可以同时设置主轴方向和换行方式，可以认为 flex-flow 是 flex-direction 和 flex-wrap 的复合属性。

flex-flow: column;
flex-flow: wrap;
flex-flow: row-reverse wrap;
flex-flow: column wrap;

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

给伸缩容器设置 CSS 属性 justify-content，可以设置伸缩项目在主轴上的对齐方式，属性值如下：

flex-start			靠着主轴起始方向，默认值
flex-end			靠着主轴结束方向
center				居中
space-between		两端对齐，两端没有间距，中间有间距
space-around		两端间距是中间间距的一半
space-evenly		两端间距和中间间距一致

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

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

给伸缩容器设置 CSS 属性 align-items ，可以设置主轴方向不发生换行时，伸缩项目在侧轴上的对齐方式，该属性的值如下：

stretch			在侧轴方向拉伸，如果伸缩项目没有设置高度
flex-start		侧轴起始方向
flex-end		侧轴结束方向
center			居中
baseline		文字基线对齐

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

给伸缩容器设置 CSS 属性 align-content, 可以设置主轴方向发生换行时，伸缩项目在侧轴上的对齐方式，该属性的值如下：

stretch			在侧轴方向拉伸，如果伸缩项目没有设置高度
flex-start		靠着侧轴起始方向，默认值
flex-end		靠着侧轴结束方向
center			居中
space-between	两端对齐，两端没有间距，中间有间距
space-around	两端间距是中间间距的一半
space-evenly	两端间距和中间间距一致

3.5 伸缩项目的伸缩性

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

该属性的默认值是 auto，可以设置一个长度作为属性值； 概述属性设置的是伸缩项目在主轴上的实际长度，如果没有设置 flex-basis 或者 值设置为 auto，伸缩项目在主轴上的长度安装 width 或者 height 的设置。

flex-basis > width/height

② 扩展比率 flex-grow

1. 当伸缩容器在主轴方向有富余空间，才会进行扩展
2. 伸缩项目的默认扩展比率是 0，默认不会扩展
3. 以数字为值设置扩展比率，当满足扩展条件时，按照扩展比率进行扩展

③ 收缩比率 flex-shrink

1. 当伸缩容器在主轴方向长度不够，且不自动换行，才会进行收缩
2. 伸缩项目默认收缩比率是 1
3. 伸缩项目收缩的时候既考虑收缩比率，也考虑自己原来在主轴上的长度。

④ flex 复合属性

可以同时设置扩展比率、收缩比率、和基准长度

flex: grow shrink basis
flex: basis grow shrink

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 属性，可以单独设置自己在侧轴上的对齐方式，属性值如下：

auto			参照伸缩容器中 align-items 的设置，默认值
stretch			在侧轴方向拉伸，如果伸缩项目没有设置高度
flex-start		侧轴起始方向
flex-end		侧轴结束方向
center			居中
baseline		文字基线对齐

3.8 伸缩盒相关 CSS 属性总结

① 设置给伸缩容器的属性

CSS 属性名	含义	值
display	设置为伸缩容器	flex：块级伸缩容器。 inline-flex：行内伸缩容器。
flex-direction	设置主轴方向	row：水平从左到右，默认值。 row-reverse：水平从右到左。 column：垂直从上到下。 column-reverse：垂直从下到上
flex-wrap	设置换行方式	nowrap：不换行，默认值。 wrap：自动换行。 wrap-reverse：自动换行并翻转。
flex-flow	同时设置主轴方向和换行方式	两个子属性的值
justify-content	伸缩项目在主轴上的对齐方式	flex-start flex-end center space-between space-around space-evenly
align-items	伸缩项目在侧轴上对齐方式（单轴）	stretch flex-start flex-end center baseline
align-content	伸缩项目在侧轴上对齐方式（多轴）	stretch flex-start flex-end center space-between space-around space-evenly

② 设置给伸缩项目的属性

CSS 属性名	含义	值
flex-basis	设置伸缩项目在主轴上的基准长度	长度 默认值是 auto
flex-grow	设置扩展比率	数字，默认值是 0
flex-shrink	设置收缩比率	数字，默认值是 1
flex	同时设置 grow、shrink basis
order	伸缩项目排序	数字
align-self	单独设置自己在侧轴对齐方式	auto stretch flex-start flex-end center baseline