CSS-移动端第一篇
CSS-移动端第一篇这篇笔记主要总结了2D+3D+flex布局+CSS移动端
1.字体图标/平面转换/渐变
1.1 字体图标
作用：取代了精灵图， 展示的是图标，本质是字体
线下用法：
1.利用类名使用(重要)
2.利用伪元素使用
3.利用unicode使用
线上用法：线上的引入方式记得添加http:
1.2 平面转换
transform属性
1.2.1 位移
语法：transform:translate(水平移动,垂直移动)
位移在移动时不占位置，不脱标
取值：px 或者 百分比(参照物是以自身的大小)
盒子垂直水平居中
方法1：子绝父相+margin:left/top; 固定宽高的盒子居中
方法2：子绝父相+transfrom
方法3：子绝父相(子盒子上下左右都赋值为0)+margin:auto;1.2.2 旋转
语法：transform:rotate(角度)
角度单位：deg 度,turn 圈
正值是顺时针，负值是逆时针
1.2.3 转换原点
语法：transform-origin:原点水平位置，原点垂直位置;
取值：数值px，方位名词，百分比
1.2.4 缩放
语法：transform:scale(x轴缩放倍数,y轴缩放倍数)
一般情况，只为scale设置一个值，表示x，y轴等比缩放
语法：transform:scale(2)
倍数1以上和倍数-1以上的值是放大，倍数1以下和倍数-1以下的值是缩小，不管正负号，只比较值
倍数1和倍数-1效果一致，盒子不变
图片加了缩放，层级会比定位默认的层级大
1.2.5 倾斜transform:skew(50deg)
注意：
1.正值向右倾斜，负值向左倾斜
2.倾斜会把盒子撑大
3.倾斜的盒子不要为直角
transform复合写法：transform：translate() rotate() scale() skew();1.3 渐变
线性渐变色，默认从上往下，开始渐变
语法：
background-image:linear-gradient(颜色1,颜色2);
background-image:linear-gradient(to bottom,颜色1,颜色2);
background-image:linear-gradient(60deg,颜色1,颜色2);
常用写法：background-image:linear-gradient(transparent,rgba(0,0,0,.5));径向渐变background-image:radial-gradient(颜色1,颜色2);
形状1：正方形->圆形
形状2：长方形->椭圆
只能从内往外2. 空间转换/动画
空间转换(了解)位移
transform:translate3d(x,y,z)
z轴在默认状态下无法擦看
解决办法
perspective属性实现透视效果
透视的内容要居中，如果不放在盒子中间，会导致内容发生倾斜
加给父级
perspective：值； 数值一般在800-1200像素
透视不会使盒子变大旋转
transform:rotate3d(x,y,z,角度度数)
取值0-1之间的数字
x轴上下转，正值从下往上转，负值从下往上
y轴左右转，正值从左往右，负值从右往左
z轴，正轴顺时针，负值逆时针
开启3d
transform-style:preserve-3d;
推荐给父元素加
缩放transform:scale3d(倍数)
动画
补间动画
步骤
1.定义动画
@keyframes 动画名称 {
from {}
to{}
}
@keyframes 动画名称 {
0% {}
10%{}
30%{}
100%{}
}2.使用动画
animation:动画名称，动画花费时长
animation: 动画名称 持续时间 动画曲线 何时开始 动画重复次数 是否逆向播放 规定动画结束后状态
逐帧动画
steps(帧数)
配合精灵图使用3. 移动端布局
3.1 移动端需了解的知识
1.分辨率
物理分辨率是生产屏幕时就固定的，它是不可被改变的
逻辑分辨率是由软件（驱动）决定2.二倍图
3.视口
布局视口 980px 手机自带
视觉视口 手机设备的大小
理想视口 设备有多宽，网页显示多宽 布局视口+视觉视口保持一致<meta name="viewport" content="width=device-width, initial-scale=1.0">
移动端视口适配标签
viewport 视口
宽度=设备宽度 width=device-width
缩放倍数默认一倍 initial-scale=1.0
最大缩放倍数为一倍 maximum-scale=1.0
0和no表示不允许用户缩放，yes表示允许用户缩放 user-scalable=0
百分比布局:宽度使用百分比，高度固定3.2 flex布局
1.作用
避免浮动布局中脱离文档流现象发生
Flex布局非常适合结构化布局
2.不脱标
3.弹性容器 加入了display:flex;的盒子
弹性盒子是弹性容器的子元素
4.设置方式
给父元素添加 display：flex
5.弹性盒子不会区分你是否是块级/行内/行内块元素
flex排列方式
1.主轴排列方式justify-content属性
加在父元素上
flex-end 终点开始依次排列
center 水平居中
space-around 外边距1:2排列盒子，自适应
space-between 两边靠边，中间自适应
space-evenly 外边距1:1排列 自适应2.单行侧轴排列方式align-items属性
加在父元素上
center 沿侧轴居中排列
默认值 stretch 子元素未设高时，子元素高度默认和父元素一致
flex-end 侧轴终点开始排列
flex-start 默认值 侧轴起点排列align-self
加在子元素上
center 沿侧轴居中排列
默认值 stretch 子元素未设高时，子元素高度默认和父元素一致
flex-end 侧轴终点开始排列
flex-start 默认值 侧轴起点排列3.伸缩比
属性：flex:值；
取值：数值(整数)
在子元素没设置宽的情况下，这个属性是用来替换宽度的
注意
1.只占用父盒子剩余尺寸
2.给子盒子添加
3.比例会优先于宽度生效应用场景
圣杯布局
左右两边的大小固定不变，中间宽度自适应
给一个宽度最小值4.修改主轴方向flex-direction属性row：行, 水平(默认值)column：列, 垂直row-reverse：行, 从右向左column-reverse：列, 从下向上
5.弹性盒子换行flex-wrap：wrap；
弹性盒子默认是不换行的
换行的前提就是给子盒子设置固定的宽度
6.多行侧轴排列方式align-content:center 垂直居中space-around 垂直方向外边距1:2排列盒子，自适应space-between 垂直方向两边靠边，中间自适应space-evenly 垂直方向外边距1:1排列 自适应
4. 注意点
1.display无法触发过渡
使用display:none(block)对div的隐藏与显示应用于过渡属性上，但是transition完全失效，没有过渡效果。div元素使用display:none(block)实现隐藏与显示的时候，会与transition属性冲突，导致过渡效果无效。display会破坏transition。
原因:display:none的时候，页面文档流中将不会存在该元素，display:block的时候，文档流中才存在该元素。transition属性无法对一个从无到有的元素进行过渡显示。
解决方案
使用visibility替代display，或者opacity也可以
2.子级为伪元素，必须通过亲父亲进行查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.bigbox {
width: 1200px;
height: 300px;
margin: 0 auto;
}
.box {
position: relative;
float: left;
width: 390px;
height: 300px;
margin-right: 10px;
overflow: hidden;
}
.box img {
width: 100%;
height: 100%;
transition: all 1s;
}
.box:hover img {
transform: scale(1.2);
}
.box a::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(transparent,rgba(0,0,0,.5));
opacity: 0;
z-index: 99;
}
.box a:hover::before {
opacity: 1;
}
</style>
</head>
<body>
<div class="bigbox">
<div class="box">
<a href="">
<img src="../images/huawei.jpg" alt="">
</a>
</div>
<div class="box"><a href="">
<img src="../images/huawei.jpg" alt="">
</a></div>
<div class="box"><a href="">
<img src="../images/huawei.jpg" alt="">
</a></div>
</div>
</body>
</html>3. 涉及陌生单词
evenly 均匀的
space 空间
justify 使每行排齐
4. flex圣杯布局常用
min-width 最小值 min-with:100px 最小值不会小于100
max-width 最大值 min-with:500px 最大值不会大于500
