过渡：
transition-用来设置过渡效果
transition-delay 用来设置过渡的延时
transition-timing-function 用来指定过渡时间函数（运动的方式）
可选值：ease（默认值）
ease 默认值，向加速后减速
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速后减速
steps(*，￥)设置步进的效果 ---括号内参数为分几步进行
---￥内参数为 end：每秒读完才进行
start：每秒开始则进行
动画：
animation-用来设置动画效果
animation-name ：用来设置动画的名字
animation-duration ：动画持续的时间
animation-timing-function ：动画的时间函数
animation-delay ：动画的延时
animation-iteration-count ：动画重复执行的次数
-infinite 表示无限运行
animation: walk steps(4) .1s infinite;（上方函数可以用animation直接全部代替）
下方需配合@keyframes 动画的名字（自定义）{
from{background-position：0 0；}
to{background-position：-528px 0；}
}
变形：
transform-用来设置元素的变形效果
前提：如果需要设置Z轴变形，需要提前设置网页视距html{perspective：500px；}
设置变形时只会影响自身元素，不会影响页面布局，通过不同的变形函数来
实现元素的变形效果。
平移：
translateX（）沿着X轴平移
translateY（）沿着Y轴平移
translateZ（）沿着Z轴平移 ---很多人不知道Z轴是什么，其实就是你眼睛跟屏幕那一条直线。
旋转：
rotateX（）沿着X轴旋转
rotateY（）沿着Y轴旋转
rotateZ（）沿着Z轴旋转 单位：deg-表示角度 turn-表示圈（360deg）
transform-origin：用来设置变形的圆点
例：（transform-origin: bottom center;）设置沿着底部居中的位置变形
---------------------------------------------------------------------------------------------
弹性盒（flex）：
开启弹性盒容器：display：flex； （让所有的子元素都成为容器成员-简称弹性项）
------------------------------------------------------------------
弹性容器中分为两种排列方式：
主轴：弹性容器中默认的排列方式称为主轴.
flex-direction用来确定主轴的方向（☆）
可选值：
row ：默认值，自左向右
row-reverse ：主轴方向自右向左
column ：主轴方向自上向下
column-reverse ：主轴方向自下向上
副轴（侧轴）：
副轴是与主轴垂直的轴.（☆）
弹性容器中换行方式：
flex-warp用来设置元素的换行方式.
参数：
nowrap（默认值） ：不换行
wrap ：换行，第一行在上方
wrap-reverse ：换行，第一行在下方
（☆☆☆）flex-flow是以上两种方式的简写形式：默认值为：row nowarp
------------------------------------------------------------------
弹性容器在主轴上的对齐方式：
justify-content：定义了项目在主轴上的对齐方式
参数：
flex-start（默认值） ：左对齐
flex-end ：右对齐
center ：居中
space-between ：两端对齐，所有项目间隔相等
space-around ：每个项目两侧间隔相等，故而项目之间比项目两边间距更大
------------------------------------------------------------------
弹性容器在交叉轴（侧轴）上的对齐方式
align-items：定义了项目在侧轴上的对齐方式
参数：
flex-start ：侧轴的起点对齐
flex-end ：侧轴的终点对齐
center ：交叉轴的中点对齐（注意是中点不是终点）
baseline ：项目的第一行文字基线对齐
stretch（默认值）：如果项目（元素）未设置高度则默认占满整个高度.
------------------------------------------------------------------------------------------------------------------------------------
项目的属性：以下6个全部设置在元素（项目）上.
order：（数值）
定义在同一个弹性容器中的多个弹性项，数值越小，排名越前，如果不写默认为0，则按照代码执行方式依次排序.
flex-grow：属性定义项目的放大比例（生长系数），默认为0，如果存在剩余空间也不放大.
如果所有项目都为1，等分，如果有一个项目为2，其他项目都为1，生长系数为2的比其他项多1倍.
flex-shrink：属性定义了项目的缩小比例（缩小系数），默认为1，如果空间不足，则该项目缩小.
如果所有项目属性都为1，等缩小，如果一个项目的属性为0，其他项目都为1，空间不足，前者不缩小。
flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
flex ：该属性涵盖了以上三种属性的作用.
默认值：0 1 auto；
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
align-self ：align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------
响应式布局：
width 表示视口的大小
max-width 表示视口的最大宽度（小于等于指定宽度）
min-width 表示视口的最小宽度（大于等于指定宽度）
响应式布局中布局发生变化的点称为断点
常用的断点
微型设备 < 576px
小型设备 >= 576px
中型设备 >= 768px
大型 >= 992px
超大 >= 1200px
screen 表示带屏幕的设备
print 表示打印设备
speech 屏幕阅读器
all 表示所有设备
媒体查询时 , 表示或
@media screen, print {
body{
background-color: #bfa;
} （如果访问页面时有屏幕，则背景颜色改为绿色）
@media only screen and (min-width:1000px) {
body{
background-color: #bfa;
}
} （如果访问页面时有屏幕，且大于1000px时显示该布局）
扫一扫
1309
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
