css3:
属性选择器(^ $ *)
伪类选择器(root、not、empty、target)
伪元素选择器(selection)
伪元素 after before first-letterfirst-line
层次选择器(> + ~)
盒模型 box-sizing
伸缩盒子display:flex
多列布局:column-(count width gap rulespan)
变形transform(translate、scale、rotate、skew、matrix)
过渡动画transtion(property、duration、timing-function、delay)过渡属性,过渡时间过渡函数 延迟时间
动画铺垫animation可以按指定的帧状态过渡执行(0-100%)
渐进增强,优雅降级
先考虑低端设备能否看到所有内容,在此基础上为高端用户带来更好的体验
对应不同级别的浏览器,有不同的页面,主要内容要表示出来
渐进增强,
对于支持css3的浏览器,做出适当的css3属性
不支持css3的浏览器,做出模拟css3的样式
本质上让低级浏览器渲染页面好看一些,但是没有得到实质性的提高
CSS3 属性选择器
class中出现的字符 ^开头 $结尾 *任意位置出现
div[class*='jc']
伪类选择器
1.根标签选择器:root 相当于html
2.否定选择器div:not([class*= 'a'])
3.空标签选择器 选择标签里没有任何内容的
<div class="1jcDy1"></div>
<div class="1Dyjc1"></div>
<div class="aaa"></div>
<div></div>
4.目标元素选择器
:target{
display: block;
background-color: yellow;
}
<a href="#anchor">12222</a>
<div id="anchor">1111</div>
伪元素选择器
1. p::selection 该标签被选中的时候,背景可以改变颜色,火狐下要加-moz
层次选择器
E>F直接子元素
EF
E+F后面紧跟着的兄弟节点
E~F通用选择器
动态伪类选择器
:link
E:hover
E:focus
E:visted
E:active
目标伪类选择器
E:target
UI 元素伪类元素选择器
E:check
E:enabled
E:disabled
E :first-child
:last-child
:nth-child(n);
:nth-last-child(n);
:nth-of-type()
:last-of-type()
伪元素
::after
::before
::first-letter
::first-line
CSS3 盒模型
W3C标准和模型
内盒width =content
IE 传统盒模型 IE6以下
width = content + padding + border
CSS3 盒模型
box-sizing:
content-box标准盒模型
border-box IE盒模型
inherit继承父级盒模型
outline
border
伸缩布局盒模型(float不能用,在移动端不能定宽,用伸缩盒子可以自适应)
display:flex;
flex 设置伸缩盒子
flex-grow 将盒子剩余部分按比例分配
flex-shrink 设置或检索弹性盒的收缩比率
flex-basis 设置或检索弹性盒伸缩基准值。
flex-flow 复合属性。设置或检索伸缩盒对象的子元素排列方式。
flex-direction 设置或检索伸缩盒对象的子元素在父容器中的位置。
flex-wrap 设置或检索伸缩盒对象的子元素超出父容器时是否换行。
align-content 设置或检索弹性盒堆叠伸缩行的对齐方式。
align-items 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
align-self 设置或检索弹性盒子元素自身在侧轴(纵轴)方向上的对齐方式。
justify-content 设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
order 设置或检索伸缩盒对象的子元素出現的順序。
// /父级
justity-content center 水平居中
align-content:center 垂直居中//多行元素起作用
align-items:center
css3多列布局
column-conut:2 两列
column-width:400px; 每一列的宽度
这两个不能混着用
column-gap:200px 列与列之间的宽度
-webkit-column-rule:10px solid red; 列边框,不会影响宽度
column-span:all; 跨越列,当标题栏
如果给容器大小,超过容器大小,就会变成一列,默认沟壑宽度是font-size
50px 400px 16px conut
column - width = (width-(n-1)*font-size)/n
div {
width: 400px;
border:2px solid black;
-webkit-column-width:195px;
-webkit-column-rule:10px solid red;
-webkit-column-count:2;
-webkit-column-gap:0;
}
渐变
linear-gradient(top color color )
变形
transform
translate() 移动
scale() 缩放
rotate() 旋转
skew() 倾斜
matrix()
transform-origin 指定元素中心点的位置
transfrom-style :flat / preserve-3d
perspective 景深
translate3d(tx,ty,tz)3d 位移
translateZ()
scale3d(x,y,z) >0 缩小 <1>1 放大
scaleZ() -1表示对称点
rotate3d(x,y,z,deg)
rotateX
torateY
rotateZ
css过渡
transtion 过渡属性,过渡时间 过渡函数 延迟时间
触发过渡
伪元素触发
:hover
:focus
:check
媒体查询触发
@media
JavaScript触发
触发过渡
有起始点
有终止点
利用transtion 完成过渡
通过硬件加速使得过渡更流畅
transform translateZ(0);
带有硬件加速的过渡
CSS3 动画
animation 关键帧动画名字 播放时间 动画播放方式
延迟 循环次数 播放方向 播放状态
animation-fill-mode :forwards(播放完 保持在最后一针)
@key-frames name {
from{}persent{}to{}
}
媒体查询
引入方式
<Link media="screen"></Link>
@import URL() screen
@media
max-width
min-width
屏幕输出宽度device-width