，
vw 1vw = 视口宽度的 1% 1vh = 视口高度的 1%
vmin
vmax
@media
@media screen
@media print
@media screen print
@media only screen and (max-width: 500px) 如果浏览器窗口小于 500px,
orientation：portrait | landscape 竖屏 | 横屏
@media only screen and (orientation: landscape){
viewport http://www.cnblogs.com/2050/p/3877280.html
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a:hover, li:nth-child）
10.组合选择器 #myid , h1
11. 同时 拥有2个类 .classA.classB
组合选择符
h1,h2,h3 和
div p 所有后代 p
div>p 所有子元素p
div+p 之后的第一个兄弟p
div~p 之后的所有兄弟p
伪类
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
a.red:visited {color:#FF0000;} 配合使用
p:first-child 1. 选中所有p 2. 1中的第一个
p>i:first-child p中的所有i 的第一个
p>first-child i 所有p中的第一个 中的所有i
所有伪类
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动链接
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个元素的第一个字母
:first-line p:first-line 选择每个元素的第一行
:first-child p:first-child 选择匹配 属于某元素的第一个子元素的 p 兄弟中排第一的p
:nth-child(n) p:nth-child(2) 选择匹配 属于某元素的第 n 个子元素的 p 兄弟中排第 n 的 tr:nth-child(even) 奇数行
li:first-child:nth-last-child(n+4)
:last-child
:first-of-type
:nth-of-type(n) p:nth-of-type(2) 同类型 兄弟中 排第 n 的 p
:last-of-type
:only-child
:only-of-type
:before p:before Insert content before every element
:after p:after 在每个元素之后插入内容
:lang(language) p:lang(it) 为元素的lang属性选择一个开始值
empty enabed disabled checked
selector:not(selector) div:not(#container) 反取
:not(selector): not(p)选择每个并非p元素的元素
::selection ::selection匹配元素中被用户选中或处于高亮状态的部分
属性选择器
[title]
[title=titlename]
[title~=titlename]
[lang |=titlename]
[attribute^=value] a[src^="https"] src属性的值以"https"开头的元素 正则表达式
[attribute$=value] a[src$=".pdf"] src属性的值以".pdf"结尾的元素
[attribute*=value] a[src*="runoob"] src属性的值包含子字符串"runoob"的元素
CSS Display - 块和内联元素
块级元素 会独占一行，其宽度自动填满其父元素宽度，在前后都是换行符。 h1 p div ul li
内联元素 只需要必要的宽度，不强制换行，一行排不下，才会换行，其宽度随元素的内容变化：span a img label input
块级元素可以设置 width, height属性，行内元素设置width, height无效 【注意：块级元素即使设置了宽度，仍然是独占一行的】
块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）
相互转换 display:inline; display:block;
display: inline | block | none | inline-block
行内元素是无法设置其宽和高的,行内块元素实际就是把块元素以行的形式展现,保留了块元素可以设置的对应CSS属性
行内样式 > id声明的样式 >class声明的样式
css文件 中 后面class 覆盖前面 class
子元素样式 覆盖 继承来的样式
行内样式 > id声明的样式 >class声明的样式 border:red; 会覆盖 继承来的 border-color:black; 以及 border-width:5px;
width height 是指 content 的高宽 只有在 ie6 是指 内容、内边距和边框的宽度的总和
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
IE8 及更早IE版本不支持 填充的宽度和边框的宽度属性设。
解决IE8及更早版本不兼容问题可以在HTML页面声明 即可。
pointer-events 让元素不捕获事件，可以理解为让他看得见摸不着
user-select: none; 禁止选择文本
will-change gpu 加速
quirks standard !doctype