CSS3_note

Css绝对定位和相对定位：

绝对定位：position:absolute;相对于最近单位已定位的父元素，若没有已定位父元素则以它相对于最初位置。移动时不会占空间
相对定位：position:relative;相对于在整个页面的初始位置。无论是否移动它都占据原来的空间，移动会覆盖其他框
什么时候需要清除浮动：
浮动元素会生成一个块级框，不论它本身是何种元素，float主要流行于页面布局，若没有清除浮动将后患无穷。

清除浮动方法：

方法一：添加一个空标签，给空标签添加clear:both;
方法二：给父级标签定义overflow:auto;
方法三：after方法（作用于浮动元素的父元素）它就是利用:after和:before来在元素内部插入两个元素块，从而达到清除浮动的效果。其实现原理类似于clear:both方法，只是区别在于:clear在html插入一个div.clear标签，而outer利用其伪类clear:after在元素内部增加一个类似于div.clear的效果。 其中clear：both；指清除所有浮动；content：‘.’;display：block；其中content()可以取值也可以为空。Visbility：hidden的作用是允许浏览器渲染它，但是不显示出来，这样才能实现清除浮动。

css3动画效果canvas和svg的区别：

svg定义：
1.可伸缩的矢量图形
2.是基于xml进行绘制图形
3.svg放大或者改变尺寸情况下图形质量不会有损。
canvas定义:
1.h5新增属性
2.基于js进行绘制图形
两者区别：
从时间上看：canvas是h5新增特性，svg被运用比较久远。
从功能上看：svg每个图形都可以看作是一个对象，如果对象属性发生变化，浏览器可自动重现图形。根据变化自动改变变化部分即可。canvas图形如果绘制完成，不会再得到浏览器的关注。如果图形位置改变，浏览器需要重新绘制。
从应用上比较：
canvas不依赖分辨率，svg依赖分辨率。
canvas支持事件处理器，svg不支持。
canvas适用于大型渲染区域区域程序（比如谷歌地图），svg适用于图像密集型游戏。

Css3新增伪类：

伪类用于向某些选择器添加特殊的效果。
p:last-of-type 选择其父元素的最后的一个P元素
p:last-child 选择其父元素的最后子元素(一定是P才行)
p:first-of-type 选择其父元素的首个P元素
p:first-child 选择其父元素的首个p元素(一定是p才行)
p:only-child　　选择其父元素的只有一个元素(而且这个元素只能是p元素，不能有其他元素)
p:only-of-type　选择其父元素的只有一个p元素(不能有第二个P元素，其他元素可以有)

Css3px和em和rem区别：

px：IE无法调整px作为单位的字体大小；px像素，相对长度单位，像素px相对于显示器屏幕分辨率而言。
em：相对长度单位，相对于当前对象内文本的字体尺寸，如相对行内文本的字体尺寸未被人为设置，则对于浏览器的默认字体尺寸。em的值相对不固定，汇集成父级元素的字体大小。
rem：是CSS3新增的一个相对单位，em与rem的区别在于使用rem为元素设定字体大小时，仍然时相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大，又可以避免字体大小逐层复合的连锁反应