1.平面转换
改变盒子在平面内的形态(位移,旋转,缩放)
2D
1.1位移
目标:使用translate实现元素位移效果
语法:transform: translate (水平移动距离,垂直移动距离);
取值:像素单位数值 百分比(参照物为盒子自身) X轴往右为正 Y轴往下为正
四种水平垂直居中
①定位子绝父相
②transform:translate(x,y);
③calc函数
④top=bottom,left=right.子盒子不能给宽高.就会垂直居中
1.2 旋转
使用rotate实现元素旋转效果
transform:rotate
角度单位是deg
取值正负都可以(顺逆时针)
取正顺时针 取负逆时针
1.2.1转换原点
transform-orign:原点水平位置 原点垂直位置;
取值: 方位名词(left, top, right, bottom, center)
像素单位数值
百分比 (参照盒子自身尺寸计算)
1.3 缩放
使用scale改变元素的放大倍数
transform:scale(x轴缩放倍数,y轴缩放倍数);
一般只设置一个值表示x轴和y轴等比例缩放(可以写小数)
1.4 渐变
渐变背景background-image
和背景图片互斥
上下渐变
/* 从上往下 */
background-image: linear-gradient( pink,red);
/* 从左往右渐变 或者 90deg */
/* background-image: linear-gradient( to right, pink,red); */
}
/* 从左到右 */
/* .box {
transform: rotate(-90deg);
} */
2. 3D转换 transform
2.1空间转换(了解)
目标:使用transform属性实现元素在空间内的位移,旋转,缩放等效果
空间:是从坐标轴角度定义的。x,y和z三条坐标轴构成了一个立体空间,z轴位置与视线方向相同
空间转换也叫3D转换
属性 : transform
2.1.1空间位移 translate(加透视)
语法:trasform:translate3d(x,y,z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
透视
目标:使用perspective属性实现透视效果
思考:生活中,同一个物体,观察距离不同,视觉上有什么区别 ?
答:近大远小、近清楚远模糊
思考:默认情况下,为什么无法观察到Z轴位移效果?
答:Z轴是视线方向,移动效果应该是距离的远或近,电脑屏幕是平面,默认无法观察远近效果
属性(添加给父级)
perspective: 值;
取值:像素单位数值,数值一般在800~1200。
透视距离也称为视距(人的眼睛到屏幕的距离)
2.1.2 空间旋转 rotate(加透视)
语法:
transform:rotateZ(值);
transform:rotateX(值);
transform:rotateY(值);
不指定默认为Z轴
拓展:
rotate3d(x,y,z,角度度数):
用来设置自定义旋转轴的位置及旋转的角度
x,y,z取值为0~1之间的数字
2.1.3 立体呈现
目标:使用transform-style:preserve-3D
呈现立体图形
思考:使用perspective透视属性能否呈现立体图形?
答:不能,perspective只增加近大远小、近实远虚的视觉效果。
实现方法:
- 添加
transform-style: preserve-3d;
- 使子元素处于真正的3d空间
- 默认值flat,表示子元素处于2D平面内呈现
呈现立体图形步骤:
1.盒子父元素添加transform-style: preserve-3d
2.按需求设置子盒子的位置(位移或旋转)
注意:
空间内,转换元素都有自已独立的坐标轴,互不干扰
2.2 动画
目标:使用animation添加动画效果
动画效果:实现多个状态间的变化过程,动画过程可控(重复播放,最终画面,是否暂停)
动画的本质:快速切换大量图片时在人脑中形成的具有连续性的画面
构成动画的最小单元:顿或动画帧
实现步骤:
1.定义动画
from是初始状态(可省略),to是结束状态
2.使用动画
目标:使用animation相关属性控制动画执行过程
animation: 动画名称 动画时长 速度曲线 迟时间 重复次数 动画方向 执行完毕时状态;
注意:
1.动画名称和动画时长必须赋值(不能省略)
2.取值不分先后顺序
3.如果有2个时间值,第一个时间表示动画时长,第二个时间表示延迟时间
infinite 无限循环 alternate 反向 linear 运动曲线循环
暂停动画:
div:hover {
animation-play-state: paused;
}
动画属性:
目标:使用steps实现逐动画
逐帧动画:开发中,一般配合精灵图实现动画效果
animation-timing-function: steps(N)
将动画过程等分成N份
精灵动画制作步骤:
1.准备显示区域
设置盒子尺寸是一张小图的尺寸,背景图为当前精灵图
2.定义动画
改变背景图的位置(移动的距离就是精灵图的宽度
3.使用动画
添加速度曲线steps(N),N与精灵图上小图个数相同
添加无限重复效果
分辨率:
思考:制作网页参考物理分辨率还是逻辑分辨率?
逻辑分辨率
1.移动端特点
1.1视口viewport
建议不要调
目标:使用meta标签设置视口宽度,制作适配不同设备宽度device-width
的网页
1.手机屏幕尺寸不同,网页宽度为100%
2.网页的宽度和逻辑分辨率尺寸相同
默认情况下,网页的宽度和逻辑分辨率不同,默认网页的宽度是980px
目标:网页宽度和设备宽度(分辨率)相同
解决办法:添加视口标签
视口:显示HTML网页的区域,用来约束HTML尺寸
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport:视口
width=device-width: 视口宽度 = 设备宽度
initial-scale=1.0:缩放1倍(不缩放)
1.2 二倍图
目标:能够使用像素大厨软件测量二倍图中元素的尺寸
2.百分比布局
目标:能够使用百分比布局开发网页
百分比布局,也叫流式布局
效果:宽度自适应,高度固定
3.Flex布局(弹性布局)
目标:
能够使用Flex布局模型灵活,快速的开发网页
是一种浏览器提倡的布局模型
布局网页更简单,灵活
避免浮动脱标的问题
作用:
基于Flex精确灵活控制块级盒子的布局方式,避免浮动布局中脱离文档流现象发生
Flex布局非常适合结构化布局
设置方式
父元素添加 display: flex
,子元素可以自动的挤压或拉伸
组成部分
弹性容器,弹性盒子,主轴(水平方向),侧轴/交叉轴(垂直方向)
弹性容器里面的弹性盒子(弹性容器内的第一级)没有设置宽高的话,高度默认为弹性容器的高度,宽度为内容的宽度
3.1主轴对齐方式
给弹性容器加
/* 调整主轴的对齐方式 */
justify-content: flex-start;/*居左对齐 */
justify-content: flex-end;/* 居右对齐 */
justify-content: center;/*居中对齐*/
/* 弹性盒子左右的间距是相同的 */
justify-content: space-around;
/* 第一个盒子靠左,最后一个靠右 */
justify-content: space-between;
/* 均分间隙 */
justify-content: space-evenly;
3.1.1目标:
使用justify-content
调节元素在主轴的对齐方式
修改主轴对齐方式属性: justify-content
3.2侧轴对齐方式
3.2.1目标:
使用align-items
调节元素在侧轴的对齐方式
/* 调整侧轴的对齐方式 */
/* 居上对齐 */
align-items: flex-start;
/* 局下对齐 */
align-items: end;
/* 居中对齐 */
align-items: center;
/* 不给子盒子高度时就会拉伸到和父盒子一样长 默认高度*/
align-items: stretch;
align-items
控制全部弹性盒子在侧轴的对齐方式( 添加到弹性容器)
align-self:
控制某个弹性盒子在侧轴的对齐方式(添加到弹性盒子)
盒子水平垂直居中方法:主轴侧轴全部center
3.3伸缩比
/*子盒子没有宽度时,把父盒子分成四份,每个盒子占一份 */
flex: 1;
3.3.1目标:
使用flex属性修改弹性盒子伸缩比
3.3.2属性:
flex:值;
3.3.3取值分类:
数值(整数)
3.3.4注意:
只占父盒子剩余尺寸
1.当弹性盒子的宽度之和大于弹性容器的宽度,弹性盒子宽度会等比例压缩
2.给父盒子设置了display:flex;
之后,所有弹性盒子里 float浮动 position定位 clear vertical-align是失效的
css书写顺序
位置相关 字体大小 背景 其他
3.4.主轴方向
3.4.1目标:
使用flex-direction改变元素排列方向
主轴默认是水平方向,侧轴默认是垂直方向
修改主轴方向属性: flex-direction
3.5 弹性盒子换行
3.5.1 目标:
使用flex-wrap实现弹性盒子多行排列显示
弹性盒子换行显示:flex-wrap: wrap;
调整行对齐方式 :align-content
,取值与justify-content
基本相同
移动适配
1.rem:目前多数企业在用的解决方案
1.1 长度单位
目标:能够使用rem单位设置网页元素的尺寸
网页效果:屏幕宽度不同,网页元素尺寸不同(等比缩放)
px单位或百分比布局不能实现移动适配
px单位是绝对单位 百分比布局特点宽度自适应,高度固定
1.1.1 rem单位
rem是相对单位 相对根标签()
rem单位是相对于HTML标签的字号计算结果
1rem = 1HTML字号大小
1.1.2 媒体查询
手机屏幕大小不同,分辨率不同,用媒体查询设置不同的HTML标签字号
目标:媒体查询可以设置差异化的CSS样式
媒体查询能够检测视口的宽度,然后编写差异化的CSS样式
写法:
@media 声明媒体查询
目前rem布局方案中,将网页等分成10份,html标签的字号为视口宽度的1/10。
1.1.3 rem适配原理
目标:实现在不同宽度的设备中,网页元素尺寸等比缩放效果
1.1.4 flexible
目标:使用flexible js配合rem实现在不同宽度的设备中,网页元素尺寸等比缩放效果
代替媒体查询的效果
flexible.js
是手淘开发出的一个用来适配移动端的js框架
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size
2.vw / vh:未来的解决方案
目标:能够使用vw单位设置网页元素的尺寸
相对单位 相对视口的尺寸计算结果
vw : viewport width
1vw = 1/100视口宽度
vh : viewport height
1vh=1/100视口高度
2.1 vw适配原理
目标:实现在不同宽度的设备中,网页元素尺寸等比缩放效果
2.1.1 vw单位尺寸
1.确定设计稿对应的vw尺寸 (1/100视口宽度)
2. vw单位的尺寸 = px单位数值 /(1/100 视口宽度)
开发中,不要把vw和vh混用
vh是1/100视口高度(ipad),全面屏视口高度尺寸大,如果混用可能会导致盒子变形
响应式
1.响应式网页
1.1.1 媒体查询
目标:能够根据设备宽度的变化,设置差异化样式
1.1.2 书写顺序
min-width( 从小到大)
max-width( 从大到小)
完整写法:
媒体是用来区分设备类型的
媒体特性主要用来描述媒体类型的具体特征
外链式CSS引入
<Link rel="stylesheet" media="逻辑符 媒体类型 and (媒体特性) href="xx.css">
服务器
UI框架
1.UI框架概念
将常见效果进行统一封装后形成的一套代码,例如:BootStrap.
作用:
基于框架开发,效率高,稳定性高
2.BootStrap简介
目标:使用 BootStrap框架快速布局响应式网页
3.BootStrap栅格系统
目标:使用BootStrap栅格系统布局响应式网页
栅格化是指将整个网页的宽度分成若干等份
BootStrap3默认将网页分成12等份
1…container是 Bootstrap 中专门提供的类名,所有应用该类名的盒子,默认已被指定宽度且居中
2…container-fluid也是 Bootstrap 中专门提供的类名,所有应用该类名的盒子,宽度均为 100%
3.分别使用row类名和col类名定义栅格布局的行和列。
注意:
1.container类自带间距15px;
2.row类自带间距-15px
BFC:块级格式化上下文
BFC(Block formatting context)
把BFC理解成一块独立的染区域,BFC可以看成元素的一种属性。当元素拥有了BFC属性以后,这个元素就可以看作隔离了的独立容器,容器内的元素不会影响容器外的元素。
开启BFC
1.浮动
2定位
3.display: inline-block table-cell table-caption table table-row table-row-group table-header-grouptable-footer-group inline-table flow-root flex inline-flex grid inline-grid
4.overflow
5.
BFC规则
1:内部的box一行一行排列
2:属于同一个BFC的两个box在垂直方向的margin会发生重叠
3:每个元素的margin box的左边,与包含块borderbox的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此
4:BFC区域与外部的float box不会发生重叠
5:BFC就是页面上的一个隔离的独立容器,容器内外的元素不会相互影响
6:在BFC内部的浮动元素也计算在BFC的宽度之内
BFC作用
1避免外边距塌陷
2.清除浮动
3.可以防止浮动元素遮盖
4.可以调整元素的位置(定位)
js学习方法:
重在理解,重在问为什么