Day2

一：css 中的 px em rem 长度单位的区别？

px：绝对单位，页面按精确像素展示。

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加性，chrome/firefox/IE9+支持。

 

二：css3新增伪类

:root 选择文档的根元素，等同于 html 元素

:empty 选择没有子元素的元素

:target 选取当前活动的目标元素

:not(selector) 选择除 selector 元素以外的元素

:enabled 选择可用的表单元素

:disabled 选择禁用的表单元素

:checked 选择被选中的表单元素

:after 在元素内部最前添加内容

:before 在元素内部最后添加内容

:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n

:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数

:nth-child(odd)

:nth-child(even)

:nth-child(3n+1)

:first-child

:last-child

:only-child

:nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n

:nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数

:nth-of-type(odd)

:nth-of-type(even)

:nth-of-type(3n+1)

:first-of-type

:last-of-type

:only-of-type

::selection 选择被用户选取的元素部分

:first-line 选择元素中的第一行

:first-letter 选择元素中的第一个字符

三：css选择器优先级顺序以及判定标准

1.id选择器（#myid）

2.类选择器（.myclassname）

3.标签选择器（div,h1,p）

4.子选择器（ul < li）

5.后代选择器（li a）

6.伪类选择（a:hover,li:nth-child）

引入样式级别：1行内样式2内部样式3外联样式

最高的还是!important

四：position 几个属性的作用

1：fixed固定定位：固定在位偏移的位置，不管页面怎么动，都在那里（脱标）

2：relative相对定位：相对于自己之前的位置定位，一般作用是子绝父相（不脱标）

3：absolute绝对定位：相对于相对定位定位，如果父级元素没有相对定位就根据浏览器窗口定位，通过位偏移来调整为位置（脱标）

4：static粘性定位：元素默认位置（不脱标）

垂直水平居中一般是left：50%，top：50%，然后margin-left：元素负的一半宽，margin-right：元素负的一半高，或者translate（负一半，负一半）

五：绝对定位和固定定位的区别？

绝对定位是根据相对定位而定位，父元素如果没有相对定位就会按着层次关系一直找，直到找到body

固定定位是根据屏幕来进行位偏移，注意ie6不兼容固定定位；

六：浮动的作用和影响

作用：浮动元素会使元素脱标，改变块级元素的排列方式，并且不占据页面位置

影响：

1：块级元素：会被浮动元素所覆盖

2：行内元素：会围绕浮动元素的周围，为浮动元素留出空间

3：会造成浮动元素的父元素塌陷

清除浮动：通过clear：both，或者触发BFC增加overflow：hidden，

空标签清除浮动 放置在浮动子元素之后吗

伪元素清除浮动：利用 ::after ::before