Css3

css全程曾叠样式表

@charset：“utf-8”；防止乱码

css3新增样式

圆角 border-radius：10px；

　　border-radius：10px 20px 30px 40px；

从左上角开始写顺时针方向，10左上角，20右上角，30右下角，40左下角

先写上下后写左右 border-top-left-radius:5px;

5px指的是半径

正圆圆角，宽高相等，设置border-radius事宽高值。

盒子阴影

box-shadow：0px 0px 5px 10px #999；

第一个值：盒子阴影水平位置，正右负左，0正中间

第二个值：阴影垂直位置，正上负下，0正中间

第三个值：模糊程度，值越大越模糊

第四个值：范围，值越大范围越大

文字阴影

text-shadow：0 0 5px #999；

没有范围，其他一样

背景渐变

线性渐变   background：linear-gradient（blue，orange）；

一边一半    background：linear-gradient（blue 50%，orange50%）

改变方向，从左到右  background：linear-gradient（to right，blue，orange）

linear直线 　　gradient渐变

径向渐变background：radial-gradient（blue，orange）；

过渡transition

transition：all 2s；写在父级

all所有是包括所有改变的属性

2d转换 transform

1.位移 translate（x轴正右负左，y轴正下负上）

2.旋转 rotate

3.缩放 scale

4.倾斜 skew

5.矩阵martix

转换基点 transform-origin：left/center/right/top/center/bottom;

3d转换xyz轴，需要3d环境

透视：模仿眼睛看到的真实环境

透视 perspective：400px；

透视基点 perspective-origin：100px 200px；

第一个水平位置，第二个垂直位置

3d环境 让子元素在3d空间显示

transform-style：preserve-3d；

3d转换

1.位移translate

transform：translate3d（100px，100px，100px）；

2.旋转rotate

transform：rotate3d（1，1，1，360deg）

3.倾斜skew

倾斜之有两个轴xy，没有z轴，也只有2d右倾斜

4.缩放scale

transform：scale3d（2，2，2）

 

动画

动画animation （动画名称）
1.动画组成
关键帧@keyframes，用于定义动画的每个状态（k负瑞目四）
①from…to…
@keyframes circle{
from{
}
to{
}
}
②0% 50% 100%
@keyframes circle{
0%{
}
50%{
}
100%{
}
}
调用动画
animation:动画名称 时间s；（爱你没什）
动画播放方式
1.默认播放一次
2.infinite循环播放
动画方向animation-direction
1.正序 animation-direction:normal；
2.倒序 animation-direction:reverse；（瑞我司）
3.交替 animation-direction:alternate;（奥特内特）
4.反向交替 animation-direction:alternate-reverse;

动画延迟animation-delay
动画填充模式
animation-fill-mode：forwards保持最后一帧
：backwards返回第一帧
动画播放状态
animation-play-state：running播放
：paused暂停
动画时间函数
animation-timing-function：
ease 默认
ease-in
ease-in-out
ease-out
linear 匀速
自定义

弹性盒子

弹性盒子是由弹性容器和弹性子元素组成，弹性容器设置display：flex或者inline-flex，会让容器变成弹性盒子。
父级容器属性：
1.主轴方向flex-direction
-row行 横着
-column 列 竖着排列
-row-reverse 横着反向
-column-reverse 竖着反向
2.换行flex-wrap
默认 不换行flex-wrap:nowrap;
换行 flex-wrap：wrap；
（将方向和换行合并 flex-flow:row nowrap;）
3.项目主轴对齐方式justify-content
justify-content
：flex-start 默认 row靠左 column靠上
：flex-end 默认 row靠右 column靠下
：space-between 两端对齐，中间平分
：space-around 两边的空隙之和是中间的空隙
4.项目侧轴对齐方式align-items
：flex-start row靠上 column靠左
：center 居中
：flex-end row靠下 column靠右
：baseline 与flex-start相似，（一个有图片一个没有图片时）baseline是一文字基线为基准
：stretch 拉甚至父级（不设置高度具体值）
5.交叉轴align-content
：flex-start row靠上 column靠左
：center居中
：flex-end row靠下 column靠右
：space-between 两端对齐，中间平分
：space-around 上下有间距，中间平分上下的空隙之和是中间的空隙
：stretch

子元素属性：
align-self：
flex-start row时子元素靠上，column时子元素靠右
center居中
flex-end row时子元素靠下，column时子元素靠左
stretch 子元素height：auto；高度拉甚至父级
baseline与flex-start相似，但不同

排序
order：1/2/3/4/5/6/7/8/9/10/...；
order；-1；排到第一个

弹性盒子会脱离文档流，
设置弹性盒子之后，子元素css中float，clear，vertical-align这些属性失效

响应式布局

@media多媒体查询

 

布局方式
div+css 浮动布局
弹性盒子
响应式布局（一个页面适用于多个设备）@media多媒体查询

 

@media多媒体查询
关键词
only 只有仅仅
not 没有 除了
and 和

手机尺寸
最小320px最大640px

ipad平板
最小641px-979px

电脑
最小980px-1200px
1200px以上

公式：@media only screen and (min-width: 641px) and (max-width: 979px) {

}

移动端适配：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

viewport 视口 view视图 port端口
device-width 设备宽度
initial-scale 默认缩放
maximum-scale 最大缩放
user-scalable 用户缩放

1.什么是响应式布局
答：通过@media多媒体查询实现一个页面适用于多个设备，例如智能手机、iPad或平板、pc笔记本或者台式机

2.响应式布局实现方式
答：通过@media多媒体查询响应式布局

3.响应式布局优缺点
答：优点 一个页面适用于多个设备
缺点 代码冗余