二.弹性布局(重点)
- 什么是弹性布局
主要解决某个元素中,子元素(仅仅是子元素不是后代元素)的布局方式
为布局提供非常大的灵活性 - 弹性布局的相关概念
- 容器
要发生弹性布局的子元素的父元素叫做容器
即:定义了display:flex;
的元素 - 项目
要发生弹性布局的子元素们叫做项目
即:定义了display: flex
的元素的儿子们 - 主轴(4条)–x轴正负方向,y轴正负方向
项目们的排列方向,称之为主轴
项目们在主轴上的排列顺序,称为主轴的起点和终点
例:x轴正方向称为:主轴方向x轴,主轴起点-左侧,主轴重点-右侧 - 交叉轴(2条)–x轴正方向,y轴负方向
永远与主轴垂直的方向
项目们在交叉轴上的排列,称为交叉轴的起点和终点
以图中3个元素为例:3个子元素做弹性布局,主轴方向x轴,主轴起点-左侧,交叉轴y轴,在交叉轴的终点对齐
- 容器
- 语法
设置弹性容器
display:
取值:
flex;
把块级变为弹性容器
inline-flex;
将行内元素变为弹性容器
注意:- 当一个元素设置为容器之后,这个容器的
text-align
,vertical-align
失效,项目没失效 - 当元素变为弹性项目时(即父元素设置了display:flex),这个弹性项目float,clear失效
- 当一个元素设置为容器之后,这个容器的
- 容器的样式属性
- 设置主轴的方向
flex-direction:
取值:
row
默认值,主轴为x,主轴起点在左侧
row-reverse
主轴为x,主轴起点在右
column
主轴为y,主轴起点在顶部
column-reverse
主轴为y,主轴起点在底部 - 设置项目换行
当容器在主轴方向,空间不够时,用来设置项目是否换行
flex-wrap:
取值:
no-wrap;
: 默认值,不换行(项目压缩)
wrap;
:换行
wrap-reverse;
:反转换行 - 上面两个属性的简写方式
flex-flow: 主轴方向 换行;
- 定义项目在主轴上对齐方式
justify-content:
flex-start;
: 默认值,主轴起点对齐
center;
: 主轴的中间对齐
flex-end;
: 主轴终点对齐
space-around;
: 每个项目左右外边距相同 (两端有空间)
space-between;
: 每个项目之间间距相同,两端对齐(两端没有空间)
- 交叉轴对齐方式
align-items:
取值:
flex-start
交叉轴起点
center
中间
flex-end
交叉轴终点
baseline
每个项目的文本,基线对齐(很少用)
stretch
前提,是项目(不是容器)在交叉轴方向不写尺寸,项目充满交叉轴
- 设置主轴的方向
- 项目的样式属性
只能设置在一个项目上,不影响其他项目-
单独设置一个项目交叉轴对齐方式
align-self:
取值:
flex-start
交叉轴起点
center
中间
flex-end
交叉轴终点
baseline
每个项目的文本,基线对齐(很少用)
stretch
前提,是项目(不是容器)在交叉轴方向不写尺寸,项目充满交叉轴
auto
使用容器align-items
定义的值 -
设置项目在主轴的排列顺序
order:
取值为无单位数字,默认值为0。值越小,离主轴起点越近! -
项目缩小
当主轴空间不够时,项目是否缩小,怎么缩小
flex-shrink:取值为不带单位的数字
默认值:1;
取值规则,子元素总溢出宽度,根据flex-shrink
取值,按比例*总溢出宽度,分配给各个项目做缩小(减法)。
举例:
为父元素命名为div0,1-5五个子元素分别命名为div1、div2、…、div5。
父元素需要设定:display:flex,width:500px
所有子元素需要设定:
flex-basis:120px; 即不发生收缩时子元素原本的宽度
以上为先决条件。子元素宽度之和与父元素宽度的差值:
120*5-500=100px
这时通过设定子元素的flex-shrink属性来决定100px总缩减量如何分配给5个子元素。
预设:前三个div设置flex-shrink: 1;
后两个div设置flex-shrink: 2;div1占总收缩比例的1/7,所以div1需要被移除的溢出量为
100*(1/7)≈14px
则,最后div1的实际宽度为
120-14=106px
-
项目放大
当主轴空间过大,项目是否放大,怎么放大
flex-grow:取值为不带单位的数字
默认值:0;
取值规则,多出的空间,按照取值,分配给各个项目进行放大(相加) -
项目的样式属性(重要属性)
flex-basis
单独设置每个项目在主轴上的占据空间(不管主轴是x,还是y)
flex-basis:
取值①% 容器主轴方向尺寸的百分比;②px固定数字
注意,定义了flex-basis,优先级高于项目本身宽高- 简写方式
是flex-grow
、flex-shrink
、flex-basis
的简写
flex:0 1 25%;
-
三.CSS hack
由于不同的浏览器对css的解析不同,会导致同一份css在不同浏览器生成不同的效果
开发人员需要针对不同浏览器写不同的css
这个行为,就叫做写css hack
-webkit-
谷歌的
-o-
欧朋的
-ms-
微软的
-moz-
火狐的
四.转换(重点)
- 什么是转换
改变元素在页面中的位置,大小,角度,以及形状
2D转换:只在x轴和y轴上发生转换效果
3D转换:增加了z轴的效果。但是3D都是模拟的! - 转换属性
transform:转换函数;
- 2D转换
- 位移(改变元素在页面中的位置)
transform: translate()
转换函数translate(x)
和translateX(x)
设置元素在x轴上位移的距离:取正数元素→移 ,取负数元素←移translateY(y)
设置元素在y轴上位移的距离:取正数元素↓移 ,取负数元素 ↑移translate(x,y)
同时设置x和y轴位移距离
面试题
要求一个200px*200px的div,不管浏览器多大,都在浏览器正中心显示div{ width: 200px;height: 200px; background: #000; position: absolute; top: 50%;left: 50%; transform: translate(-100px,-100px); }
- 缩放(改变元素的大小)
transform:scale()
取值- 参数为一个值
scale(v1)
同时设置x轴和y轴的缩放倍数
v1>1 x轴和y轴都放大倍数
0<v1<1 x轴和y轴都缩小
-1<v1<0 x轴和y轴都缩小,并反转(x轴y轴都反转)
v1<-1 x轴和y轴都放大,并反转 - 参数为两个值,分别设置x轴和y轴的缩放
- 单独设置x轴缩放
scalex()
- 单独设置y轴缩放
scaley()
- 参数为一个值
- 旋转(改变元素的角度)
transform:rotate(ndeg);
n取值:正–顺时针, 负–逆时针
注意:- 旋转原点会影响旋转效果
transform-origin:x y
取值
①以px为单位的数字
②%
③关键字 x(left/center/right);y(top/center/bottom) - 旋转与位移的配合,注意旋转会带着坐标轴一起转,位移是在旋转之后的坐标方向位移
- 旋转原点会影响旋转效果
- 倾斜(项目中用的较少)
skewX(ndeg)
和skew()
让y轴向着x轴倾斜n度
n:正数 逆时针 负数 顺时针
skewY(ndeg)
让x轴向着y轴倾斜n度
n:正数 顺时针, 负数 逆时针
- 同时设置x轴和y轴的倾斜
练习
在一个transform属性中,写多个转换函数
div 200*200.背景随意,鼠标悬停时,该元素发生以下效果
向右偏移100px,向下偏移100px,旋转135deg,向着x轴倾斜78度,放大1.5倍
- 位移(改变元素在页面中的位置)
- 3D转换(3D旋转)
页面中所有的3D转换都是模拟的- 透视距离
模拟人眼到3d转换元素之间的距离,
距离不同,效果不同
perspective:透视距离
:此属性要加载到3D转换元素的父元素上 - 3D转换
transform:
取值:- rotateX(xdeg)
以x轴为中心轴,旋转元素(现实中烤羊腿,老式爆米花机的旋转方式)
2 rotateY(ydeg)
以y轴为中心轴,旋转元素(现实中旋转门,旋转木马,钢管舞,土耳其烤肉的旋转方式) - rotateZ(zdeg)
以z轴为中心轴,旋转元素角度(现实中风扇,大风车,摩天轮的旋转方式) - 3D旋转 rotate3D(x,y,z,ndeg)
x,y,z 取值为不带单位的数字。0 代表不参与。其他数字代表角度的倍数。负数代表反方向转
- rotateX(xdeg)
- 透视距离
五.过渡(重点)
- 什么是过渡
让css的值,在一段时间平缓变化的效果 - 语法
- 指定参与过渡的属性
transition-property:
取值
①一个或多个css属性,多个属性间用空格分开(写或者不写transform属性,该属性都参与过渡)
②all 所有支持过渡的属性
支持过渡的属性- 颜色属性
- 大多数取值为具体数字的属性
- 阴影
- 转换
- 设置过渡持续时长
transition-duration: s/ms;
- 过渡时间曲线函数
transition-timing-function:
取值:- 贝塞尔曲线(自学)
cubic-bezier(0,0,1,1)
ease
默认值,慢速开始,加速,减速,慢速结束linear
匀速ease-in
慢速开始,一直加速ease-out
快速开始,减速结束ease-in-out
慢速开始,先剧烈加速,再剧烈减速,慢速结束
- 贝塞尔曲线(自学)
- 过渡前的延迟时间
transition-delay: s/ms
- 过渡代码的编写位置
过渡写在原始样式中,过渡效果,有去有回
过渡写在伪类hover中,过渡效果,有去无回 - 过渡的简写方式
transition: property duration timgin-function delay;
最简方式:transition: duration;
练习:1.翻滚吧球 2.魔力转圈圈
PS:过渡和动画的使用区分过渡 动画 两个css值之间的变化 至少两个,或者两个以上css值之间的变化 必须使用伪类激活 可以使用刷新页面激活,也可以使用伪类
- 指定参与过渡的属性
六.动画(重点)
- 什么是动画
使元素从一种样式逐渐变为另外一种样式
就是过渡的升级,将多个过渡效果放到一起 - 使用关键帧来控制动画每一个状态
关键帧的组成:- 这一帧执行的时间点
- 这一帧的样式
- 动画的使用步骤
- 使用关键帧,来定义动画
@keyframes 动画名称{ 0%/from{样式} ..... 100%/to{样式} }
举例:/* 1.定义动画 */ @keyframes change{ 0%{ background-color: #00f; border-radius: 0; } 50%{ background-color: #f00; border-radius: 50%; } 100%{ background-color: #afa; border-radius: 0; } }
- 调用定义好的动画
- 指定调用动画的名称
animation-name:动画名称;
- 指定动画播放时长
animation-duration: s/ms;
- 设置动画的时间曲线函数
animation-timing-function:
取值:
ease
linear
ease-in
ease-out
ease-in-out
贝塞尔曲线
- 设置动画的延迟
animation-delay: s/ms
- 指定调用动画的名称
- 使用关键帧,来定义动画
- 动画的其他属性
- 设置动画的播放次数
animation-iteration-count:
取值:
具体的数字
infinite 无限 - 定义关键帧的播放顺序
animation-direction:
normal
:0%—>100%
reverse
:100%–>0%
alternate
: 轮流播放,奇数次正向,偶数次逆向 - 动画简写
animation: name duration timing-function delay count direction;
最简方式animation:name duration;
- 动画的填充状态
animation-fill-mode
取值:
none
:默认值,不填充
backwards
: 动画的延迟时间内,填充第一帧
forwards
: 动画结束后,填充最后一帧
both
:前后都填充 - 设置动画的播放状态
animation-play-state:
取值:
paused
:暂停
running
:播放
- 设置动画的播放次数
- 动画的兼容性
如果低版本浏览器兼容动画效果,需要在声明动画的时候,添加前缀
正常写动画:@keyframes 动画名称{}
添加兼容的写动画:
@-webkit-keyframes 动画名称{}
@-o-keyframes 动画名称{}
@-moz-keyframes 动画名称{}
@-ms-keyframes 动画名称{}
练习:坤坤打篮球
- 动画的第三方包使用
animate.css的使用
https://daneden.github.io/animate.css/下载animate.css文件
在页面中使用link引入这个css
在样式中直接调用动画名称
七.css优化
- css优化的目的
减少服务器端压力
提升用户体验 - css优化的原则
尽量减少http的请求个数(缓存,精灵图)
页面的顶部引入css文件
将css和js文件,放在独立的文件中 - css代码优化
合并样式(能简写,就不单独写)
减少样式重写(能重用就重用)
避免出现空的href和src
代码压缩
八.css reset和normalize.css
- 什么是
css reset
由于不同浏览器,给元素定义的默认样式不同,导致一份css有可能产生不同的效果。为了统一,在开发之前,我们把所有有差异的默认样式,清除或统一
css reset没有标准,项目中使用哪个版本,听领导安排
注意:css reset存在的问题:css reset 比较霸道,不管是不是违背语义,都要把样式清除和统一 normalize.css
他是css reset一种替代方案,比较温和
他在默认的html元素的样式上,提供跨浏览器的高度一致性,还修改了不同浏览器的bug