css3优势:
1 新增实用的选择器,例如动态伪类,目标伪类,伪元素
2 新增更好的视觉效果
3 新增丰富的背景效果
4 新增全新的布局方案
5 新增web字体
6 新增颜色,hsl,hsla,rgba
7 新增2D和3D变换
8 新增动画和过渡效果
css3 私有前缀:
作用:w3c在浏览器正式支持某个新的属性前,浏览器根据浏览器的内核,使用此前缀测试新属性,正式上线后,不需要加上此前缀
查询浏览器是否兼容:Can I use... Support tables for HTML5, CSS3, etc
谷歌,edge,safari浏览器:--webkit--
firefox浏览器:--moz--
旧opera浏览器:--o--
旧Ie浏览器:--ms--
长度单位:
rem 字体大小倍数
vw 视口的宽度
vh 视口的高度
vmax 宽度或者高度最大值的百分比值
vmin 宽度或者高度最小值的百分比值
盒子模型:
box-sizing 设置盒子模型的类型
取值:
border-box 宽高设置为盒子大小
contentent-box 宽高设置为盒子内容区域大小,默认值
resize 自己调节盒子大小
必须和overflow搭配使用
取值:
horizontal 水平方向调节
vertioal 垂直方向调节
both 两个方向都可调节
box-shadow 盒子阴影
取值:
1 水平方向 垂直方向
2 水平方向 垂直方向 阴影颜色
3 水平方向 垂直方向 阴影模糊程度
4 水平方向 垂直方向 模糊程度 阴影颜色---常用
5 水平方向 垂直方向 模糊程度 阴影外延 阴影颜色
6 水平方向 垂直方向 模糊程度 阴影外延 阴影颜色 内阴影(inset)
opacity 不透明度
取值:
0-1 取值范围
0 完全透明
1 不透明
注意:修改的是整个元素的透明度
背景:
background-origin 设置背景图的原点
取值:
padding-box 默认值,按照内边距
content-box 按照内容
border-box 按照边框
background-clip 设置背景图的向外裁剪区域
取值:
border-box 默认值,按照边框
padding-box 按照内边距
content-box 按照内容
text 背景呈现在文字区域(需要添加前缀)
background-size 设置背景图大小
取值:
contain 包含
cover 等比例缩放
auto 默认值
background 复合属性:
background:颜色,url,重复,位置/大小,原点,裁剪方式;
多种背景图片设置:
background: url("") no-repeat left top,
url("") no-repeat right top,
url("") no-repeat left bottom,
url("") no-repeat right top,;
边框:
border-radius 边框圆角
取值:
像素
百分比
border-top-left-radius: 10px 5px;
border-top-left-radius: 20px 2px;
border-bottom-left-radius: 10px 30px;
border-bottom-right-radius: 30px 40px;
复合属性:
border-radius: 左上角,右上角,右下角,左下角;
outline 边框外轮廓
不计入盒子大小;不占位置;
取值:
outline-width: 20px;
outline-offset: 30px;
outline-style: solid;
outline-color: red;
复合属性
outline: width,style,color;
文本属性:
text-shadow:文本阴影
取值:
1 水平方向 垂直方向 模糊程度 阴影颜色
2 none 默认值,无文本阴影
white-space:文本换行
取值:
pre 按照原文格式显示
pre-wrap 按照原文格式显示,超出换行
pre-line 按照原文格式显示,首尾空格不显示
nowrap 不换行
normal 超出自动换行,默认值
text-overflow:文本溢出
使用时添加overflow:hidde;
取值:
ellipsis 溢出显示省略号
text-decoration 文本修饰
修改为复合属性
-webkit-text-stroke 文本描边
仅有webkit可以使用
-webkit-text-stroke:3px red;
渐变属性:
线性渐变:
background-image: linear-gradient(red,yellow,green);
background-image: linear-gradient(to right top,red,yellow,green);
background-image: linear-gradient(20deg,red,yellow,green);
background-image: linear-gradient(red 50px,yellow 80px,green 100px);
径向渐变:
background-image: radial-gradient(red,yellow,green);
background-image: radial-gradient(at left top,red,yellow,green);
background-image: radial-gradient(circle,red,yellow,green);
background-image: radial-gradient(100px,red,yellow,green);
background-image: radial-gradient(red 30px,yellow 60px,green 90px);
重复渐变:
前提:在线性渐变或者径向渐变的基础上 ,在纯色区域进行重复渐变
background-image:repeating-radial-gradient(red 30px,yellow 60px,green 90px);
字体:
图标库:iconfont-阿里巴巴矢量图标库
//引入字体
@font-face {
font-family: "ces";
src: url("");
}
//使用:
font-family: "ces";
//阿里使用
https://www.iconfont.cn/fonts/index?spm=a313x.7781069.1998910419.16
//字体图标
1 比图片清晰
2 灵活性好
3 兼容性好
变换transform:
2D变换:
语法:transform: translate(x,y);
位移
特点:
1 参考自身位置
2 不脱离标准文档流
3 行内元素使用效果不好
4支持链式操作
5 综合写法仅仅只写一个值代表X值
取值:
translateX x轴位移
translateY y轴位移
xy取值:px,%
translate(x,y)综合写法
缩放:
特点:
1 行内元素使用效果不好,可以改成行内块使用
2 支持链式操作
3 综合写法仅仅书写一个值时,代表两个方向
取值:
scaleX() x轴缩放
scaleY() y轴缩放
scale() 综合写法
旋转:
特点:
1 使用之后,xy轴修改
取值:
rotateZ() 正值顺时针;负值逆时针
rotate() 综合写法
扭曲:
特点:
1 综合写法仅仅写一个值时,修改是x轴
取值:
skewX()
skewY()
skew(x,y)
注意:使用链式操作时,最好把旋转放到最后
transfrom-origin 修改变换的圆心位置
影响功能:缩放,旋转
取值:
关键词(只写一个值时,另一个值取中间值)
px
3D变换:
前提:父元素开启3D空间(transform-style:preserve-3d;)
设置景深(perspective:500px;)
透视点:
含义:父盒子的中心点
修改:
perspective-origin:30px 30px;
位移:
translateX x轴位移
translateY y轴位移
translateZ z轴位移
xy取值:px,%
z取值:px
translate3d(x,y,z)综合写法,3值缺一不可
旋转 :
rotateX() 正值顺时针;负值逆时针
rotateY() 正值顺时针;负值逆时针
rotate3d(x,y,z,deg) 综合写法
缩放:
scaleX() x轴缩放
scaleY() y轴缩放
scaleZ() Z轴缩放--搭配旋转使用效果更好
scale(x,y,z) 综合写法
过渡:
//设置需要过渡的元素本身属性
transition-property: width,height,background-color;
transition-property: all; //所有可以过渡的属性进行过渡
//设置过渡的时间
transition-duration: 1s;
//设置过渡的延迟时间
transition-delay: 2s;
//设置过渡的样式
transition-timing-function:;
取值:
ease 平滑过渡,默认值(慢-快-慢)
linear 匀速过渡
ease-in 先慢后快
ease-out 先快后慢
ease-in-out 慢-快-慢
step-start 直达终点,不考虑过渡时间
step-end 直达终点,考虑时间,没有过渡效果
steps() 分布过渡
使用贝塞尔曲线:
官网:https://cubic-bezier.com/
例子:cubic-bezier(.17,.67,.83,.67)
//复合属性
transition:duration delay property timing-function;
动画:
//元素设置动画属性,初始化
animation-name: yufaname;
//定义动画1
@keyframes yufaname{
form{
}
to{
//设置动画名称
animation-name: yufaname;
//设置动画持续时间
animation-duration: 1s;
//设置动画延迟时间
animation-delay: 1s;
//设置动画的样式
animation-timing-function: ;
取值:
ease 平滑过渡,默认值(慢-快-慢)
linear 匀速过渡
ease-in 先慢后快
ease-out 先快后慢
ease-in-out 慢-快-慢
step-start 直达终点,不考虑过渡时间
step-end 直达终点,考虑时间,没有过渡效果
steps() 分布过渡
使用贝塞尔曲线:
官网:https://cubic-bezier.com/
例子:cubic-bezier(.17,.67,.83,.67)
//设置动画执行的次数
animation-iteration-count: 3;
取值:数字,infinite(无限循环)
//设置动画的方向
animation-direction: ;
取值:
normal 默认值
reverse 反转
alternate 交替来回播放
alternate-reverse 交替来回反转
//不发生动画
animation-fill-mode:;
取值:
forwards 留在最后一帧
backwards 返回到第一帧
//动画播放状态
animation-play-state: ;
取值:
paused 停止播放
running 运行
}
}
//定义动画2
@keyframes yufaname{
0%{
}
20%{
}
40%{
}
60%{
}
80%{
}
100%{
}
}
//复合属性
animation: name duration timing-function delay iteration-count direction fill-mode;
过渡和动画的区别:
1 动画不需要任何触发条件,过渡必须需要触发条件
2 动画可以实现内容精细化处理,过渡不行
布局技巧:
多列布局:
内容区域
//指定页面显示列数
column-count: 4;
//指定每一列的宽度,会自动计算列数
column-width: 200px;
//复合方法--不推荐使用
columns: count width;
//调整列间距
column-gap: 20px;
//每一列边框宽度
column-width: 2px;
//每一列边框颜色
column-rule-color: ;
//每一列边框样式
column-rule-style: ;
//边框的复合属性
column-rule: width style color;
标题
//设置是否横跨
column-span: ;
取值:
none
all
伸缩盒模型(弹性盒子):
特点:
1 轻松控制元素分布,元素对齐,元素视觉顺序
2 兼容性好,除部分ie不支持,其他全部支持
3 提供新的布局方案flex布局
语法:
//开启flex布局子元素成为块及化元素
display:flex; //开启flex布局
display:inline-flex //开启行内块flex--很少使用
flex-direction: ;//设置主轴方向
取值:
row 默认,从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上
flex-wrap: ; //设置主轴换行方式
取值:
nowrap 默认,不换行
wrap 换行
wrap-reverse 反向换行
//复合属性(设置主轴)---很少使用
flex-flow: direction wrap;
justify-content:; //设置主轴对齐方式
取值:
flex-start 默认值,主轴的起始位置
flex-end 主轴的结束位置
center 居中对齐
space-around均匀分布,元素之间距离是边缘距离的两倍
space=between均匀分布,元素之间距离是相等的,边缘没有距离
space-evenly 均匀分布
//设置侧轴对齐方式
一行内容
align-items:;
取值:
flex-start 侧轴起始位置
flex-end 侧轴结束位置
center 居中
baseline 基线对齐
stretch 默认值,拉伸到整个盒子高度(前提:子盒子没有高度)
多行内容
align-content: ;
取值:
flex-start 侧轴起始位置
flex-end 侧轴结束位置
center 居中
space-around 元素之间距离相等,是边缘的两倍
space-between 元素之间距离相等,没有边缘
space-evenly 元素之间距离相等
stretch 默认值,拉伸到整个盒子高度(前提:子盒子没有高度)
flex-basis: ;//设置元素在主轴的基准长度,主轴是横向宽失效, 纵向高失效
取值:
auto 默认值,自适应
px
flex-grow //设置子元素的拉伸比例,剩余空间/比例
取值:
0 默认值,不拉伸
flex-shrink//设置子元素的缩放比例,
前提:未设置主轴换行方式
取值:
1 默认值
复合属性:
flex:grow shrink basis;
取值:auto ===1 1 auto
1 ===1 1 0
none ===0 0 auto
0 auto ===0 1 auto
order //设置子元素的显示顺序
取值越小,元素顺序越靠前
取值:
0 默认值
负值
align-self //设置子元素在侧轴的单独对齐
取值:
auto 默认值
//元素水平垂直居中
1 父元素
display: flex;
align-items:center;
justify-content: center;
2父元素
display: flex;
子元素
margin:0 auto;
响应式布局:
媒体查询:
@media 值{
}
取值:
print 打印/打印预览时样式
screen 屏幕下使用的样式
all 检测所有设备
(width:800px) 视口为800时的样式 //例子
取值:
(device-width:1920) 设备宽度-宽度
运算符:
and 且
,/or 或
not 否定
only 肯定,处理ie浏览器兼容
calc动态设置宽高:
width: calc(100% - 100px);
注意:
使用时需要添加一个空格分开
BFC:
含义: 块及格式上下文,可以理解为元素的特异功能
默认是关闭状态,需要一定条件开启
作用:
1 子元素不会产生margin塌陷问题
2 自己不会被其他元素覆盖
3子元素浮动,元素自身高度不会塌陷
开启:
//设置根元素,浮动元素,绝对/固定定位,行内块,表格单元格,overflow不等于visible,多列布局,flex,colum:all,display:flow-root;--效果最好;ie不支持