7-14：HTML学习#8

今日学习：CSS布局和动画效果。学习时长：5h。

弹性布局

flex-direction 属性规定灵活项目的方向。

flex-wrap 属性规定 flex 容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

值	描述
nowrap	默认值。规定灵活的项目不拆行或不拆列。
wrap	规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

实例：

 布局对齐方式

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

值	描述
flex-start	默认值。项目位于容器的开头。
flex-end	项目位于容器的结尾。
center	项目位于容器的中心。
space-between	项目位于各行之间留有空白的容器内。
space-around	项目位于各行之前、之间、之后都留有空白的容器内。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

align-items 属性定义 flex 子项在 flex 容器的当前行的侧轴（纵轴）方向上的对齐方式。

align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项，容器内必须有多行的项目，该属性才能渲染出效果。

order 属性设置或检索弹性盒模型对象的子元素出现的順序。

align-self 属性定义 flex 子项单独在侧轴（纵轴）方向上的对齐方式。

flex-basis 属性用于设置或检索弹性盒伸缩基准值，如果元素不是弹性盒对象的元素，则 flex-basis 属性不起作用。

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

flex-grow 属性用于设置或检索弹性盒子的扩展比率。

值	描述
number	一个数字，规定项目相对于其他灵活的项目进行扩展的量。默认值是 0。
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

栅格布局

grid-template-columns 属性规定网格布局中的列数（和宽度）。

值	描述
none	默认值。在需要时创建列。
auto	列的尺寸取决于容器的大小以及列中项目内容的大小。
max-content	根据列中最大的项目设置每列的尺寸。
min-content	根据列中最小的项目设置每列的尺寸。
length	设置列的尺寸，通过使用合法的长度值。参阅长度单位。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

实例：

 grid-template-rows 规定网格布局中的行数（和高度）。

grid-template-areas 属性在网格布局中规定区域。

实例：

 

 文本

text-indent 属性规定文本块中首行文本的缩进。

letter-spacing 属性增加或减少字符间的空白（字符间距）。

line-height 属性设置行间的距离（行高）。

text-align 属性规定元素中的文本的水平对齐方式。

vertical-align属性设置一个元素的垂直对齐。

text-shadow属性连接一个或更多的阴影文本。

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

text-decoration 属性规定添加到文本的修饰。

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	规定应该从父元素继承 text-decoration 属性的值。

字体

font-family 规定元素的字体系列。

font-style 属性定义字体的风格。

过渡

transition-delay 属性指定何时将开始切换效果。

transition-duration 属性规定完成过渡效果需要花费的时间。

transition-property 属性规定应用过渡效果的 CSS 属性的名称。

transition-timing-function属性指定切换效果的速度。

实例：

 旋转

transform属性应用于元素的2D或3D转换。

动画

使用@keyframes规则，可以用来创建动画。

滤镜

filter 属性定义了元素的可视效果。