css3新属性的学习使用

display

可选值：none隐藏元素；

block显示为块级元素；

inline显示为行级元素

inlineblock显示为内联块级元素，本身将是一个行级元素，但是拥有 块级元素的所有属性，比如宽度高度，margin padding等。。。

常见的inline-block级别的标签？

img input textarea td tr

 

隐藏一个元素的方式：

1、宽度或高度设为0，配合overfloat：hidden属性。

2、display：none显示为display：block。

3、opacity:0设为全透明，但是元素空间会占据。

4、visibility: hidden;只是看不见，但是元素所在空间依然会占据。与opacity：0效果很像。

 

【css3新增的属性前缀】

1、-webkit-:Chrome/safari浏览器

2、-moz-：火狐浏览器

3、-mz-：IE浏览器

4、-o-：opera欧朋浏览器

 

【css3长度单位】

1、px：像素长度是固定的，表示占分辨率的几个像素点。

2、%：表示相对于默认值得百分比

3、em：长度与元素的字号挂钩。

4、rem:长度与根元素的字号挂钩。即与html标签的font-size挂钩，如果不设置，则默认字号问16px

 

【em与rem区别】

1、em是与当前元素自身的font-size挂钩，如果当前元素没有设置，则向上查找最近的祖先元素字号。直到根字号。

2、rem与当前元素字号无关，直接与根元素字号挂钩。网页中有加减号调整全网页字体大小，用em或者rem。

 

【css3背景属性】

1 background-clip: 设置背景图或者背景色的裁切显示区域

①border-box从边框外缘开始显示

②padding-box从边框內缘开始显示，

③content-box从文字 内容区域开始显示，

如果不在显示区域的背景图或背景色会被裁切掉不显示。

 

【background-origin】

设置背景图从哪开始定位

border-box背景图左上角从边框外缘开始定位

padding-box背景图左上角从边框內缘开始定位

content-box背景图从文字内容区开始定位

background-origin不会改变背景图显示局域的大小，只会决定背景图左上角从哪开始定位

background-clip只负责裁切处显示区域，但是并不关心背景图定位在哪。

 

【background-attachment】

scroll:背景图跟随区域滚动，默认效果

fix：背景图从慢整个区域，而且是固定的，不随滚动条滚动*/

缩写形式

background-image

background-repeat

background-origin

background-attachment

background-position

background-size

 

 

【transition过度属性】

接受四个属性

①设置那个css属性参与过度。可以直接指定all或none

②过度多长时间完成，通常.3s .5s

③过度样式效果，通常选ease，

④过度延时几秒后开始。可以省略不写。

 

transition可以同时定义多个过度属性，用逗号隔开，

eg。

transition: width .5s ease,height 1s ease;

 

【transform】 定义变换函数：

1、常用

translate（10px，10px）平移第二个不写默认为0

scale（1.1）第二个不写默认等于第一个

rotate(90deg)旋转默认绕z轴转，可以使用rotatex（）等

skew（20deg，30deg）扭曲，水平、垂直方向扭曲多少度

 

2、可同时设定多个值

transform:skew(20deg) scale(1.3) translate(100px,-100px);

 

3、transform-origin,定义变换起点，常用于旋转变换，

可选值：left/center/right top/center/bottom 也可以指定xy轴坐标点

 

如transform：rotate（90deg）；

transform-origin:right buttom;

表示绕右下角旋转90deg。

 

1、声明一个关键帧

@keyframes name{

form{}

to

}

阶段的写法，可以直接使用from-to的写法：

可以设置0%-100%的写法，但是开头结尾必须是0%到100%。

2、在css选择器中使用animation调用声明好的动画。

 

animation缩写形式

Animation-name:动画名称

Animation-duration：动画持续时间

Animation-timing-function：动画速度曲线

Animation-delay：动画开始的时间，延迟

Animation-iteration-count：动画播放次数，默认为1.无限次数表示infinite

Animation-direction：动画在下一个是否逆向播放，默认为normal表示不进行逆向播放

alternate表示下一次将逆向播放（100%-0）

Animation-fill-mode：表示动画结束后，停留在何种状态，要使用这个属性，动画的在执行次数必须是有限次，forward表示动画停留在结束状态；backward表示动画停留在初始位置

 

Animation-name Animation-duration是必须设置的，其他的可以省略。

Animation可以同时设置多个动画，多个动画之间用逗号分隔。

animation：framel 1s,frame2 2s;