CSS3——知识点总结(学习笔记)
CSS3
Introduction
-
reference manual website: http://css.doyoe.com
-
Authoritative inquiry website : http://www.caniuse.com
-
pre-processor
e.g. sass/less next-css -
post-processor
e.g. Autoprefixer
Selector
-
Relationship Selectors
E+F E~F -
Attribute Selectors
E[attr~=“val”] E[attr |=“val”] E[attr^=“val”] E[attr$=“val”] E[attr*=“val”] -
Pseudo-Element Selectors
E::placeholder E::selection -
Pseudo-Classes Selectors
E:not(s) E:root E:target
E:first-child E:last-child E:only-child E:nth-child(n)
E:nth-last-child(n) E:first-of-type E:last-of-type E:only-of-type
E:nth-of-type(n) E:nth-of-last-type(n)
E:empty E:checked E:enabled E:disabled
E:read-only E:read-write -
homework
- Accrodion List手风琴效果
- Tabs 选项卡效果
Border & Background
-
border-radius
-
box-shadow
(x-offset,y-offset,blur,spread) -
border-image
border-image-source | [border-image-slice , border-image-width , border-image-outset ] | border-image-repeat -
background
background-color,
background-image(也可以生成渐变色),
background-repeat(round||space||repeat-x||repeat-y),
background-position,
background-origin(border-box||padding-box||content-box),
background-clip(border-box||padding-box||content-box||text),//这里的text值是webkit特有的 div{ -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-fill-color:transparent; }
background-attachment(scroll||local(相对于内容区)||fixed(相对于整个视口)),
background-size(cover(单张溢出一些)||contain(单张留白一些)), -
渐变色
linear-gradient(),
radial-gradient(),
repeating-linear-gradient(),
repeating-radial-gradient(), -
currentColor(中间值,中转色)
CSS1 CSS2 border-color:color
CSS3增加中转 currentColor = color, border-color:currentColor
Text
- text-shadow
(x-offset,y-offset,blur,color)
//浮雕
color:#ddd;
text-shadow:1px 1px #000,-1px -1px #fff;
//镂刻
color:#ddd;
text-shadow:-1px -1px #000,1px 1px #fff;
//错乱效果//火焰效果等
- text-stroke字体描边
//chrome实现的,配合字体simsun,70版本以上
-webkit-text-stroke:1px red;
font-family:simsun;
color:transparent;
-
font-face(与选择器并列写)
@font-face{ font-family:'abc'; src:url(''); }
-
word-break文字截断
-
column
columns(width,count),只用width不太好用,定宽不太好使,父级宽度变width也变;
column-rule就等于border的用法;
column-gap设置列间隙宽度;作业:小说左右翻页的效果:父级定宽,子级column-width同宽。(试着实现左右滑动)(实现了监听点击,拖动实现左右滑动)
Box
-
W3C standards mode
boxWidth = width + padding(2) + border(2) -
IE6 quirks mode
boxWidth = width -
box-sizing:content-box | padding-box | border-box
border-box需求场景:宽度不固定,但是内边距固定;input框;加border不想变宽等 -
overflow:visible | hidden | scroll | auto | clip(都不兼容)
e.g: 实现横向滑动,只需加overflow-x:auto -
resize:none | both | horizontal | vertical
必须与overflow同时使用!
一般不会给用户实现这种可随便调节大小的功能,每次变化都要重构和重排。 -
flex
父级display:flex,开始弹性盒。inline-flex,具备inline属性,同一行后面可以有其他内容。- 父级
- flex-direction:row | row-reverse | column | column-reverse
- flex-wrap:nowrap | wrap | wrap-reverse(不常用)
- flex-flow:<’ flex-direction ‘> || <’ flex-wrap '>(复合属性)
- justify-content:flex-start | flex-end | center | space-between | space-around(基于主轴的对齐方式)
- align-items:flex-start | flex-end | center | baseline | stretch(默认stretch,未设height时高度会撑满。一般用于单行的侧轴的对齐方式)
- align-content:flex-start | flex-end | center | space-between | space-around | stretch(默认stretch,未设height时高度会按行数平分撑满。一般用于多行的侧轴的对齐方式)
- 子级
- order:< integer >(默认0,按整数值来定义排列顺序,数值小的排在前面。可以为负值。)
- align-self:auto | flex-start | flex-end | center | baseline | stretch(子项单独在侧轴方向上的对齐方式)
- flex-grow:< number >(默认0,用数值来定义扩展比率,不允许负值。根据该权重来分配剩余空间。)
//父级600px,子元素3个100px宽 //1 : 2 : 3 300px剩余 //50 100 150 分配 //150 200 250 = 600px
- flex-shrink:< number >(默认1,用数值来定义收缩比率,不允许负值。根据该权重来收缩多出的空间。)
//是根据content-width来计算比例,要注意padding,border不参与计算 //父级600px,子元素3个,分别为200px,200px,400px(真实内容区content-width) //权重为1 : 1 : 3 //200*1 + 200*1 + 400*3 = 1600 // 200 *1 //-------- * (800-600)= 25px // 1600 // 200-25 : 200-25 : 400-150 // 175 175 250 = 600px
- flex-basis:< length > | < percentage > | auto | content
- 当设置了width时,如果basis有设值,且小于width,则真实宽范围:basis < realWidth < width
- 当未设置width时,或设置basis大于width,代表元素最小宽度,可被不换行单词撑开。且该被撑开的子元素,不参与shrink压缩。想压缩要设置换行word-break:break-word
- flex:none | <’ flex-grow ‘> <’ flex-shrink >’? || <’ flex-basis '>
复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。- 如果缩写「flex: 1」, 则其计算值为「1 1 0%」
- 如果缩写「flex: auto」, 则其计算值为「1 1 auto」
- 如果「flex: none」, 则其计算值为「0 0 auto」
- 如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」,即「flex」初始值
- flex作用:
- 居中
- 可动态增加的导航栏
- 等分布局(4等分,2等分,中间可加margin)
- 其中一个固定宽度的布局(固定一个或多个)
- 圣杯布局
- 流式布局
- 作业:神马搜索明星模块flex布局
- 父级
Transition & Animation
-
transition
transition:< single-transition>[,]*
< single-transition> = [ none | < single-transition-property> ] || < time> || < single-transition-timing-function> || < time>
(过渡属性 | 持续时间 | 过渡动画 | 延迟时间)- transition-property:检索或设置对象中的参与过渡的属性
- transition-duration:检索或设置对象过渡的持续时间
- transition-timing-function:检索或设置对象中过渡的动画类型
- linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
- ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
- ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
- ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
- ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
- cubic-bezier(< number >, < number >, < number >, < number >):特定的三次贝塞尔曲线类型,4个数值需在[0, 1]区间内。
- B(t) = P₀(1 - t)³ + 3P₁t(1 - t)² + 3P₂t²(1 - t) + P₃t³ ,t ∈ [0,1]
- 设定的4个值,为P1和P2点的坐标。靠这两个控制点控制方向。P1的Y值可以为负,P2的Y值可以大于1。
- step-start:等同于 steps(1, start)
- step-end:等同于 steps(1, end)
- steps(< integer>[, [ start | end ] ]?)
- transition-delay:检索或设置对象延迟过渡的时间
-
@keyframes < identifier > { < keyframes-blocks > }
- < keyframes-blocks >:[ [ from | to | < percentage > ]{ sRules } ] [ [ , from | to | < percentage > ]{ sRules } ]*
- from代表0%,to代表100%
- 过度浏览器版本都要写兼容性写法,加厂商前缀,如-webkit-,-moz-
-
animation:< single-animation > [ ,< single-animation > ]*
- < animation-name >:检索或设置对象所应用的动画名称
- < animation-duration >:检索或设置对象动画的持续时间
- < animation-timing-function >:检索或设置对象动画的过渡类型
- < animation-delay >:检索或设置对象动画延迟的时间
- < animation-iteration-count >:检索或设置对象动画的循环次数
- < animation-direction >:检索或设置对象动画在循环中是否反向运动
- < animation-play-state >:检索或设置对象动画的状态。w3c正考虑是否将该属性移除,因为动画的状态可以通过其它的方式实现,比如重设样式。
- < animation-fill-mode >:检索或设置对象动画时间之外的状态
- none:默认值。不设置对象动画之外的状态
- forwards:设置对象状态为动画结束时的状态
- backwards:设置对象状态为动画开始时的状态
- both:设置对象状态为动画结束或开始的状态
-
steps
- (< integer >[, [ start | end ] ]?
- 接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end。
- end:保留当前帧状态,直到当前这段动画时间结束
- start:保留下一帧状态,直到当前这段动画时间结束
- step-end:等同于 steps(1, end);step-start:等同于 steps(1, start)
-
transform
-
scale:
- scale():指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值
- scalex():指定对象X轴的(水平方向)缩放
- scaley():指定对象Y轴的(垂直方向)缩放
- scalez():指定对象的z轴缩放
- scale3d():指定对象的3D缩放。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略
- 注意:
- 是在坐标轴的刻度做伸缩;
- 多个scale可以叠加操作;
- 雁过留声:在某一个方向上伸缩之后,产生的影响会被一直保留,不会因为其他变换(旋转等)而消失。
-
skew:
- skew():指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0。
- skewx():指定对象X轴的(水平方向)扭曲
- skewy():指定对象Y轴的(垂直方向)扭曲
- 注意:
- 值为角度数(deg);
- 倾斜的时候,还会伴有拉伸,且不好得出拉伸倍数。
-
rotate:
- rotatex():指定对象在x轴上的旋转角度
- rotatey():指定对象在y轴上的旋转角度
- rotatez():指定对象在z轴上的旋转角度
- rotate3d():指定对象的3D旋转角度。前3个参数x,y,z确定的矢量作为旋转轴,第4个参数表示旋转的角度,参数不允许省略
-
translate:
- translate():指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
- translatex():指定对象X轴(水平方向)的平移
- translatey():指定对象Y轴(垂直方向)的平移
- translatez():指定对象Z轴的平移
- translate3d():指定对象的3D位移。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略
-
perspective
- < length >:指定观察者距离「z=0」平面的距离,为元素及其内容应用透视变换。不允许负值
- 指定观察者与「z=0」平面的距离,使具有三维位置变换的元素产生透视效果。「z>0」的三维元素比正常大,而「z<0」时则比正常小,大小程度由该属性的值决定。
- 当该属性值为「非none」时,元素将会创建局部堆叠上下文。
- 实现原理是根据物体在screen上的投影。
- 例如,当有translateZ时,且为负,随着perspective越小,图像反而越来越小,用投影原理解释的透彻。
- 该属性如果写在子元素的transform属性中,必须写在第一位。不推荐,不能调整origin。
-
perspective-origin
- [ < percentage> | < length> | left | center① | right ] [ < percentage> | < length> | top | center② | bottom ]?
- 默认值:50% 50%,效果等同于center center
- 指定透视点的位置。该属性提供2个参数值。如果提供两个,第一个用于横坐标,第二个用于纵坐标。如果只提供一个,该值将用于横坐标;纵坐标将默认为center。
-
transform-origin
- [ < percentage> | < length> | left | center① | right ] [ < percentage> | < length> | top | center② | bottom ]?
- 默认值:50% 50%,效果等同于center center
- 设置或检索对象以某个原点进行转换。
- 其实这里可以设置第三个值,即圆点在空间中变化位置,旋转轴XYZ轴跟着变化,但是还是平行于原来的XYZ轴。子元素旋转时候,直接用变换后的这个轴更方便。
-
backface-visibility
- visible | hidden
- 指定元素背面面向用户时是否可见。
-
matrix
- 矩阵是transform选中的计算规则
- matrix():以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵
- matrix3d():以一个4x4矩阵的形式指定一个3D变换
/* | a,c,e | | x | | ax + cy + e | | b,d,f | * | y | = | bx + dy + f | | 0,0,1 | | 1 | | 0 + 0 + 1 | matrix(1,0,0,1,e,f); === translate(x, y); matrix(a,0,0,d,0,0); === scale(x, y); matrix(cos(θ),sin(θ),-sin(θ),cos(θ),0,0); === rotate(θ); x1 = cos(θ)x - sin(θ)y + 0 y2 = sin(θ)x + cos(θ)y + 0 matrix(1,tan(θy),tan(θx),1,0,0) matrix(1,0,0,0,0,1,0,0,0,0,1,0,x,y,z,1) 缩放 matrix(x,0,0,0,0,y,0,0,0,0,z,0,0,0,0,1) 平移 */ /* 试验:镜像变换 | -1,0,0 | | x | | -x | | 0,1,0 | * | y | = | y | | 0,0,1 | | 1 | | 1 | transform:matrix(-1,0,0,1,0,0) */
- 作业:transform实现旋转魔方
-
上一篇: OpenGL3.3几何着色器
下一篇: 什么是Restful风格
推荐阅读
-
CSS3——知识点总结(学习笔记)
-
前端小知识点汇总,常忘记的知识点汇总(面试,笔试)学习笔记(一)
-
算法笔记学习(1)——一些简单易错的知识点
-
C语言指针 知识点 博客分类: 学习笔记 CC++C#D语言
-
h5学习笔记之CSS3过渡与CSS3动画
-
Java分布式应用学习笔记04JDK的并发包的集合总结---后篇 博客分类: 分布式集群 分布式集群并发包Java集合
-
Java分布式应用学习笔记04JDK的并发包的集合总结---前篇 博客分类: 分布式集群 分布式集群并发包集合Java
-
推荐系统学习笔记1 博客分类: 技术总结 推荐系统学习笔记
-
srt学习笔记零:srt总结帖 博客分类: ffmpegsrt ffmpegsrt
-
day02 -> java基础大神进阶学习总结之19天(知识点全面覆盖,细节)