css涉及较多，想到哪写到哪。
#css中的选择器。
元素选择器比如有p,h1,em,a,甚至可以是html本身。
类选择器是给多个元素起同样的class名，利用class名来统一进行css样式修改。
通配选择器 为*号，给所有标签样式，少用。
分组选择器将多个元素修改为同样的样式，利用元素名，一起来进行修改。
ID选择器给某元素起一ID名，此名唯一，权限最高。
属性选择器利用元素所特有的属性来进行修改样式，可以是class名，标签特有属性，比如href，title，src等等。也可以当p标签有class名为important warning的名时，也可以用p[class~=”important”]来进行样式的修改。
后代选择器利用父级对子级进行修改，比如对ol下的li进行修改，修改的样式为ol li｛color：red;｝。
子元素选择器与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素例如，如果您希望选择只作为ul元素子元素的li元素，可以这样写：ul>li{color:green;}
相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。如果要增加紧接在 h1 元素后出现的p元素，可以这样写：
h1 + p ｛font-size:10px;}
伪类选择器在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
*推荐顺序为link,visited,hover,active.
a:link {color: #FF0000} / 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
input:focus{background:yellow} / 当前指示输入框有焦点 /
a:hover {color: #FF00FF} / 鼠标移动到链接上 /
html:lang(en){color:red} / 选择语言为en的颜色设置为red /
a:active {color: #0000FF} / 选定的链接 /
a:link:hover{color:blue} / 鼠标停留在未访问的链接上为蓝色 /
以及p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
li:nth-child(1){color:red;}
伪元素选择器
::before
::after
::first-line 文本的第一行
::first-letter 第一个首字母
以上选择器为常用选择器，不常用的就不一一列举了。
#css引入方式
用link标签在头部引用，便于修改，页面更加整洁，可以复用。但是会多增加一次请求。实现内容与样式的分离。
用style在头部进行书写。不利于复用，不会发生请求。单一页面重复使用性低的情况推荐使用。
行间样式是在元素标签中进行书写,不利于后期维护，页面过于臃肿。优先级最高，不会被其它样式覆盖影响。不推荐使用，
#css盒模型
盒模型由内容，padding填充，border边框以及margin组成。
#css定位
CSS position 属性
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
浮动
float
声明权重
1.读者的重要声明
2.创作人员的重要声明
3.创作人员的正常声明
4.读者的正常声明
5.用户的代理声明
一般只用考虑前四个声明，因为任何声明都高于用户代理声明。
继承
文本相关属性：font-family,font-size,font-style,font-variant,
font-weight,font,letter-spacing,lin-height,text-align,text-indent
texttransform,word-spacing,color.
列表相关属性：list-style-image,list-style-position,list-style-type
list-style
inherit继承父级属性。例如a标签的父级div设定color为白色，a标签默认颜色为蓝色，写作div a{color:inherit}，a标签的字体颜色就会继承父级div的颜色为白色。
单位
px像素,em基于父级,rem基于html根目录
字体
在设置字体的时候，相应的要设置一个备用字体，以防首选字体未安装的情况下使用
文本
text-indet:可以为px,em,%为单位的值，是文本首行缩近。
text-align:left,right,center,justify,string,inheroit.决定文本的对象方式。
盒模型
标准盒模型
外盒模型
元素空间宽度 = content width + padding + border + margin的宽度
元素空间高度 = content height + padding + border + margin的高度
内盒模型
元素宽度 = content + padding + border的宽度
元素高度 = content height + padding + border的高度
－ IE盒模型 当IE6~8处于怪异模式下就会使用IE盒子模型，否则将使用W3C标准盒子模型。
外盒模型
元素空间宽度 = content width + margin的宽度
元素空间高度 = content height + margin的高度
内盒模型
元素宽度 = content width
元素高度 = content height
－box-sizing IE8+
box-sizing有三个值，默认是content-box（表示元素使用W3C盒子模型），而border-box（表示元素使用IE盒子模型），inherit（从父元素上继承）
－float 浮动
具有包裹性 本意作用是做文字环绕 float布局只是歪打正着的产物
- 清除浮动
－使用带clear属性的空元素
－使用CSS的overflow属性 给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。
在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
－给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。
-使用邻接元素处理 给浮动元素后面的元素添加clear属性。
－使用CSS的:after伪元素 结合 zoom
结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
.clearfix:after{
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/ 触发 hasLayout /
zoom: 1;
}
- IE hack 有IE就有hack hack主要是针对IE浏览器
所有 IE{property:value\9;}
大于或等于 IE 8{property:value\0;}
小于或等于 IE 7{*property:value;}
.IE 8/9{property:value\0;}
.IE 9{property:value\9\0;}
.IE 7{+property:value;}
.IE 6{_property:value;}
非 IE{property//:value;}
－ zoom 定义缩放比例。不允许负值 有兼容问题 主要用于IE67浏览器 触发haslayout 达到清除浮动等功能
zoom:1
－ 垂直居中
－ 使用绝对定位垂直居中
兼容性最好 absolute结合margin 需要知道尺寸
http://www.cnblogs.com/dojo-lzz/p/4419596.html
-自动换行
word-wrap 是控制换行的
break-word 是将强制换行
word-break 表明是否断开单词换行 面对长度较长单词
break-all 允许断开单词换行
white-space
pre :空白会被浏览器保留。其行为方式类似 HTML 中的
标签
nowrap: 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止
pre-wrap: 保留空白符序列，但是正常地进行换行
当文本溢出包含元素时发生的事情
- text-overflow: clip|ellipsis|string;
clip默认值 超出裁剪
ellipsis 超出显示…
－单行文本溢出显示省略号(…)
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap; 不换行
部分浏览器 需要带上width
－多行文本溢出显示省略号(…) 仅支持webkit内核浏览器 移动端
display: -webkit-box; 将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical; 伸缩盒对象的子元素的排列方式
-webkit-line-clamp: 3; 用来限制在一个块元素显示的文本的行数
overflow: hidden;
利用 after
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: “…”; position: absolute; bottom: 0; right: 0; padding-left: 40px;
-Opacity属性用来设置一个元素的透明度，取值范围是0~1之间，不可为负值。opacity取值为1是完全不透明，取值为0是完全透明
opacity:0.5;
filter:alpha(opacity=50);/ IE 4+ / ||
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; /i e 8+/
－Overflow
overflow属性有四个值：visible (默认),
hidden 将所有超出盒子的所有内容都给隐藏掉。
scroll 始终出现滚动条
auto 现代浏览器的默认属性 有超出内容 才有滚动条
overflow-x
overflow-y