css3第六天

1.c3简介和私有前缀

        常见的私有前缀 -webkit -moz

2.c3新增长单位

px	像素
vm	视口宽度，移动端常用
vh	视口高度，移动端常用	width:20vm 宽度为视口宽度的20% hight:50vm 高度为视口宽度的50%
vmax , vmin	找宽和高中最大的来进行换算（了解）

3.c3盒子模型相关属性

        

浏览器缩放	当电脑缩放为125% 可以设置大小为80%为正常值
box-sizing	content-box 默认值	宽高设置的是内容区的大小
	border-box  怪异盒模型	宽高设置的是盒子总大小
resize  改变大小(了解)
box-shadow	盒子阴影	常用4个值 水平和垂直方向的位置 模糊程度（也写xxpx） 阴影颜色
opacity	不透明度	值为0~1之间，和颜色有区别，一个控制单个颜色，一个控制整个元素

4.背景相关属性

background-origin	设置背景图原点 origin:原点	padding-box 从padding区域开始显示（默认值） border-box 从border区域开始显示 content-box 从content区域开始显示
background-clip	设置背景向外裁剪方式	padding-box 从padding区域开始向往裁剪背景 border-box 从border区域开始向往裁剪背景 （默认值） content-box 从content区域开始向往裁剪背景  text  背景图只呈现在文字上，不过要加浏览器的私有前缀，前提是文字要透明
background-size	背景图尺寸	auto 默认值，真实大小 contain 等比例缩放，会造成部分区域没有背景图片 cover 等比例缩放，相对比较好的选择
background	背景复合属性	1.建议顺序 颜色 url  是否重复 位置/ 大小 原点 裁剪方式 2.原点和裁剪方式如果一样,就可写一个值 如不一样,原点在前,方式在后 3.大小的值必须写在位置后面,并用/ 分开
多张背景图	多个背景图用逗号隔开	例如 background: url(路径a)no-repeat ,url(路径b) no-repeat ,.....

5.c3边框属性

        1. border-radious 边框圆角

               可直接设置4个角的圆角,也可分开设置每个角的圆角 例如 左上角 border-top-left-radios:xxpx  右下角 border-bottom-right-radious:xxpx

                当写一个值是一个正圆的半径,2个值为椭圆的x和y

        2.边框外轮廓 border-outline

6.c3新增文本属性

        

text-shadow	文字阴影	和3中的盒子阴影一样的 4个值 水平 垂直位置 模糊程度 阴影颜色
whiite-space	文本换行	normal 超出边界自动换行(默认值) pre  原样输出,和pre标签效果相同 pre-wrap  pre-line  nowrap 强制不换行
text-overflow	文本溢出(d文本内容溢出时的呈现模式)	clip 溢出部分裁剪掉 ellipsis (:省略) 溢出部分替换为 .... 文本溢出搭配 overflow:hidden 使用,常搭配文本换行中的强制不换行 +省略一起使用
text-decoration	文本修饰	有复合属性 也能分开写 分别为 text-decoration-line 文本装饰线的位置 -style 样式 -color 颜色
text-stroke	文本描边	有 webkit浏览器支持,要写私有前缀

7.新增渐变

 

        1.线性渐变

                1.渐变可以理解为一个默认自上而下的自己写的背景图片, 格式为 background-image:linear-gradinent(颜色,颜色,颜色);

                2.可以修改渐变的方向  background-image:linear-gradinent(方向,颜色,颜色,颜色);

                        方向值为to +关键词 如 to top ;to left 或者 角度 30deg  (30°)

                3.可以修改渐变的位置 background-image:linear-gradinent(方向,颜色 apx,颜色 bpx,颜色 cpx);         

                        此位置为纯色位置

        

        2.径向渐变

                1.从圆心四扇,默认根据容器来判断是否正圆,格式 background-image:radial-gradintent(颜色,颜色,颜色)

                2.可修改原心位置 background-image:radial-gradintent(圆心位置,颜色,颜色,颜色)

                        at+关键词或者像素值修改 例如 at right top 在右上角 at 100px 50px 

                3.修改为正圆 

                        通过circle关键字或者像素值 例如 background-image:radial-gradintent(corcle,颜色,颜色,颜色)  background-image:radial-gradintent(apx bpx ,颜色,颜色,颜色) 

                 4.修改渐变区域  background-image:radial-gradintent(颜色 apx,颜色 bpx,颜色 cpx) 

        3.重复渐变

                1.定义:在没有发生渐变的区域,重新开始渐变

                2.格式:在线性渐变和径向渐变前加 repeating 例如 background-image:repeating-radial-gradient(颜色,颜色,颜色)

8.web字体(网络字体)

        1.字体是矢量图,放大不会失真,能代替图片,可以用字体图标

        2.用法

                @font-face { font-family:"自己取名字"; src:url("xx/xx.ttf")},路径可为网络,也可为网络,通常放字体的文件夹为 font

9.2D 变换

        1.位移 transform

                水平位移参考的是自己的大小,和绝对定位参考父元素不一样

               有translateX translateY 和translate复合属性,复合属性写一个值时为水平位移,写2个值中间必须要有逗号

                行内元素对位移无效

                浏览器对位移有优化,浏览器处理位移的效率比定位高

        2.缩放 scale

                有scaleX scaleY和scale复合属性,写一个值同时设置水平和垂直的缩放

                取值:大于1放大,小于1缩小,等于1不缩放

        3.旋转 rotate 

                rotate(xxdeg) 正值顺时针,负值逆时针

                在2D ,rotateZ 和rotate是一样的意思

        4.扭曲 skew

                值为角度值,会将元素进行拉扯

                有skewX skewY skew复合属性

        5.多重变换

                多个变换同时使用一个transform来编写

                旋转放最后面

        6.变换原点 transform-origin

                修改变换原点对位移没影响,只对旋转和缩放有影响

                只写一个值,若是像素值,表示横坐标,此时纵坐标取50% 若是关键词,另一个坐标取50%

10.3D变换

        1.开启3D变换  transform-style:preserve-3d

                元素要开启3D变换,父元素要开启3D空间,transform-style:preserve-3d(默认值flat 2D)

        2.景深  perspective:xxpx 有了透视效果,近大远小

                景深是观察者和z=0平面间的距离

                值建议设置为容器的一半左右

        3.透视点的位置(观察者的位置) perspection-origin

                默认透视点在 元素正中心

                例如 perspection-origin:400px 300px 相当于 向右移动400px ,再蹲下300px 看元素

        3.3D 位移

                有translateZ 不能写百分比,其他2个都可以 因为x的百分比可以找宽度,y的找高度,z的没的找,因为元素没有厚度

                 translate3d(x,y,z) 3个值都不能省略

                 

        4.旋转 

                rotateX,rotateY  面对着x轴/y轴正方向旋转 正值顺,负值逆时针

                rotate3d:(1,1,1,30deg) 分别表示坐标轴 x,y,z 第4个代表旋转角度

                

        5.缩放 

                scaleZ z轴方向的缩放比例,1不缩放 大于1 放大, 小于1 缩小  没有改变厚度,改变的是景深

                scale3d 分别对应x,y,z轴,参数不允许省略

        6.多重变换

                旋转放最后

        7.背部 backface-visibility

                不可见hidden

11.过渡 

        1.过渡属性 transition-property

                all过渡所有能过渡的属性

                能过渡的属性:值为数字,或值能转为数字的属性

                                        常见的有 颜色,长度值,百分比,z-dinx,opacity 2D 3D变换

        2.过渡时间 transition-duration

                        过渡持续时间,单位为s或者ms

        3.过渡延迟 transition-delay

                             过渡延迟时间,单位为s或者ms

        4.过渡类型 transition-timing-function

                只记得linear 线性过渡即可

        5.transition复合属性

                只设置一个时间,则为持续时间,2个时间,1为持续,2为延迟

12.动画

动画和过渡的区别,过渡需要触发条件,而动画不需要

        1.第一步:定义动画

        

                1)方式1

                @keyframe 动画名 {

                        form { xx}

                         to {xx}

                        }

                2)方式2

                         @keyframe 动画名 {

                        0%{ xx}

                        20%{xx}

                        100%{xx}

                        }

                2.第2步 给元素应用动画

animation-name	给元素指定具体的动画
animation-duration	动画所需时间
animation-delay	动画延迟

                3.动画的其他属性

animation-timing-function	过渡方式
animation-timing-count	播放次数
animation-direction	方向
animation-fill-mode	动画外的状态(不发生动画时候在哪里)
animation-play-state	动画的播放状态

                4.动画复合属性

                         只设置一个时间,则为持续时间,2个时间,1为持续,2为延迟 在设置上和过渡一样

13.过渡和动画的区别

        1.动画不需要触发条件,过渡必须要有触发条件

        2.动画全程都能进行设置,过渡只关注始末

14.多列布局

column-count:xx	指定列数
column-gap	调整列间距
column	复合属性	里面写列宽和列数,但是不推荐使用
column-rule	有复合属性,也可单独写  -width     -style     -color	复合属性 和border很像
column-span :all	跨列	不能写数值,只能写要不要跨 要单独找到标题元素来加