一、CSS补充
1、字体图标
-
字体图标展示的是图标，本质是字体
-
处理简单、颜色单一的图片
-
优点
- 灵活地修改样式，如：尺寸、颜色
- 体积小、渲染快、降低服务器请求次数
- 几乎兼容所有主流浏览器
- 使用方便：下载字体包，使用字体图标
使用：引入样式表，调用类名，必须同时调用iconfont和icon-xxx图标对应的类名
2、平面转换
使用transform属性实现元素的位移、旋转、缩放等效果
① 位移
transform:translate(水平移动距离，垂直移动距离); /* 像素或百分比 */
- transform()只给一个值表示按x轴方向移动
- 单独设置某个方向移动：
transformX()或者transformY() - 使用
left:50%;top:50%;和transform:translate(-50%，-50%);实现盒子在父容器中定位居中
② 旋转
transform:rotate(角度); /* 角度单位是deg，正顺负逆 */
③ 转换原点
transform:origin:原点水平位置 原点垂直位置;
- 默认圆点是转换原点
- 取值可取方位名词：left、top、right、bottom、center
- 该属性添加给标签本身，不要加给hover
④ 多重转换
transform:translate() rotate();
rotate()会改变坐标轴向，位移方向会受影响，所以一般translate()写在前面，坐标轴向就不会受影响
⑤ 缩放
transform:scale(X轴缩放倍数,Y轴缩放倍数);
- 一般只设置一个值，表示X和Y轴等比缩放
- scale＞1表示放大，＜1表示缩小
3、渐变
渐变一般用来设置盒子的背景
background-image:linear-gradient(颜色1,颜色2);
常用的半透明渐变：
background-image:linear-gradient(
transparent,
rgba(0,0,0,.6)
);
4、空间转换
① 位移
transform:translate3d(x,y,z);
transform:translateX();
transform:translateY();
transform:translateZ();
/* 取值是像素或百分比 */
② 透视
perspective:像素; /* 一般在800-1200 */
透视距离就是人的眼睛到屏幕的的距离
③ 旋转
transform:rotateZ();
transform:rotateY(); /* 正右边向屏幕内 */
transform:rotateX(); /* 正上边向屏幕内 */
④ 空间旋转
rotate3d(x,y,z,角度度数);
- 设置自定义旋转轴的位置及旋转的角度
- x，y，z取0-1之间的数字
⑤ 立体图形
transform-style:preserve-3d;
- 使子元素处于真正的3D空间
- 默认值
flat，表示处于2D平面展现
⑥ 缩放
transform:scaleX(倍数);
transform:scaleY(倍数);
transform:scaleZ(倍数);
transform:scale3d(x,y,z);
5、动画
① 动画的基本使用
/* 定义动画 */
@keyframes ani_name{
from{
} to {
}
}
/* 定义动画 */
@keyframes ani_name{
/* 根据动画时长占比来分配不同状态 */
0% {}
10% {}
50% {}
100% {}
}
.box{
/* 使用动画 */
animation:ani_name 2s;
}
② 动画属性
animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
-
动画名称和时长必须赋值
-
取值不分先后
-
若有两个时间值，第一个表示动画市场，第二个表示延迟时间
-
step(n)将动画分为 n 步执行，即逐帧动画，一般配合精灵图使用 -
重复次数设置为
infinite表示无限循环 -
动画方向
alternate表示反向执行 -
执行完毕时状态
- backwards：默认值，动画停留在最初状态
- forwards：动画停留在结束状态
- 多组动画：
animation:动画1 动画2 动画n;
实现走马灯：
二、移动网页
1、视口
通过添加meta属性适应移动端窗口
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2、flex布局
- 是一种浏览器提倡的布局模型
- 布局网页更简单、灵活
- 避免浮动脱标的问题
父级元素添加dispaly:flex，子元素可以自动的挤压或拉伸
① 主轴对齐方式
justify-content
② 侧轴对齐方式
align-items：添加到弹性容器
align-self：添加到弹性盒子，可以单独控制某个盒子在侧轴的对齐方式
③ 弹性伸缩比
flex:整数
- 只占用父盒子剩余尺寸
④ 修改主轴方向
flex-direction:;
row：行，水平，默认值column：列，垂直row-reverse：行，从右向左column-reverse：列，从下向上
⑤ 弹性盒子换行
- 弹性盒子默认不换行，会产生挤压
- 可以添加
flex:wrap;来实现换行效果
⑥ 行对齐方式
align-content:;
- center
- space-around
- space-between
移动适配
rem：目前vw/vh：未来
3、rem
实现屏幕宽度不同，网页元素尺寸不同
- px是绝对单位，百分比布局只能宽度自适应，高度固定
- rem是相对单位，是相对于HTML标签的字号计算结果
1 rem = 1 HTML标签字号大小
手机屏幕大小分辨率不同，如何设置不同的HTML标签字号？
① 媒体查询
媒体查询能够检测视口的宽度，然后编写差异化的CSS样式
@media (媒体特性){
选择器 {
CSS属性
}
}
/* 如 */
@media (width:375px){
html {
font-size:40px;
}
}
设备宽度不同，HTML标签字号设置多少合适？
② rem选单位
- 目前rem布局方案中，将网页等分成十份，HTML标签的字号为视口宽度的1/10
③ 确定具体标签rem值
？？px除以十分之一视口宽度，即该标签的rem值
④ flexible移动适配
详见JS
4、less
less是一个CSS预处理器，文件后缀是.less- 扩充了
CSS语言，使CSS语言具备一定的逻辑性，计算能力（CSS不能直接计算） - 浏览器不识别
less代码，要引入对应生成的CSS
① 运算
// 加减乘直接写表达式，除法需添加`()`或`.`
width:(100 / 20rem);
height:100 ./ 20rem;
② 嵌套
.father{
width:100px;
.son{
color:pink;
// & 表示当前选择器
&:hover{
color:green;
}
}
}
// 等价于下面的
.father{
width:100px;
}
.father .son{
color:pink;
}
.father .son:hover{
color:green;
}
③ 变量
// 定义
@colora:pink;
// 使用
.box{
color:@colora;
}
④ 导入
@import 'base.less'
@import 'index' // less文件可以省略后缀名
⑤ 导出
插件导出：
// 在less文件开头添加
// 单独导出
// out:路径/(文件名，可选)
// 禁止导出
// out:false
5、vw/vh
即view width、view height
- 是相对视口的尺寸计算的结果
1 vw = 1/100 视口宽度1 vh = 1/100 视口高度- 不可以混用
vw、vh，在全面屏会出问题（因为vh很大）
三、响应式网页
1、媒体查询
@media (媒体特性){
选择器{
样式
}
}
-
媒体特性常用写法
- 视口宽高：
width、height - 视口最大宽高：
max-width、max-height - 视口最小宽高：
min-width、min-height - 屏幕方向：
orientation:portrait/landscape，即竖屏/横屏
- 视口宽高：
-
CSS具有层叠性，min-width从小到大写，max-width从大到小写 -
外链式引入
<link rel="styleshert" href="" media="(min-width:900px)">
2、BootStrap
① 栅格系统
- container：版心样式，自带左右各
15px的padding - row：自带左右
-15px的padding，可抵消container的padding - container-fluid：宽度100%，自带左右各
15px的padding
