长度单位
- px:像素单位，不同显示器效果不同，手机像素一般比电脑显示器高，跟电脑显示器差不多是因为手机浏览器默认给*4处理了
- 百分比：按照父元素来计算长度
- em:和百分比类似，按照font-size来计算长度，1em=1font-size，text-indent设置首行缩进的时候可以用2em
font
font-size与line-height关系：
行间距 = “line-height” - “font-size”,
小技巧：对于单行文本，将line-height设置成父标签高度，可以使文本在父元素中上下居中
元素在文档流中的特点
块元素
- 块元素在文档流中会独占一行，自上而下排列；
- 块元素在文档流中的默认宽度是父元素的100%（auto）；
- 块元素在文档流中的默认高度是被内容撑开；
内联元素
- 内联元素在文档流中只占自身大小（不能指定宽高），默认自左向右排列，如果一行容纳不下，会另起一行继续自左向右排列；
- 内联元素在文档流中的默认宽度和高度都被内容撑开；
当元素的宽度设为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边框
元素浮动 float
- 开启float，元素会脱离文档流，它下面的元素会立即向上移动；
- 元素浮动以后，会尽量向页面的左上角或右上角漂浮，直到遇到父元素的边框或者其它的浮动元素；
- 如果浮动元素上面是没有浮动的块元素，则浮动元素不会超过该块元素（不能一样高）；
- 浮动元素不会超过他上面的兄弟元素，最多一样高；
3/4的限制可以通过改变元素顺序来处理 - 浮动的元素不会盖住文字，文字会环绕在元素周围，所以可以通过float设置文字环绕的效果（原本设计float的目的）；
- 块元素脱离文档流后，高度和宽度不指定的话默认被内容撑开。内联元素脱离文档流后，会添加块元素特性（可以指定宽高）。即脱离文档流后不分块和内联，会变成可以被内容撑开的块元素；
高度塌陷
定义
上面元素的子元素设置为float会导致父元素不能被撑开，下方元素上移后形成高度塌陷。
解决方式
BFC定义
根据W3C标准有个隐藏属性，block formatting content.该属性可以设置打开或关闭，默认关闭。（IE6及以下不支持，用haslayout实现：开启方式，zoom:1）
当开启元素bfc后，元素会有以下特性：
- 父元素的垂直外框边距不会和子元素重叠（正常情况下父元素和子元素垂直方向上边界重叠后，父元素会取子元素的margin上下边值）；
- 开启BFC 的元素不会被浮动元素所覆盖；
- 开启BFC的元素不会被浮动元素所覆盖；
解决高度塌陷：1-4开启元素BFC，5-6使用clear：
- 设置元素浮动；（不推荐）
- 设置元素绝对定位；（不推荐）
- 设置元素为inline-block;（不推荐）
- 设置元素的overflow为非visible的值；（推荐，副作用比较小）
- 在塌陷的父元素中子元素最后添加空白div，设置clear；（次终极方案，会添加没必要的div结构）
- 通过after伪类对5方案改进;（最终方案）
.clearfix:after{
content:"";
display:block;
clear:both;
}
元素定位
使用
- position开启定位（static,relative,fixed,absolute）；
- left/right/top/bottom 设值；
- relative不会脱离文档流，absolute和fixed会脱离文档流；
z-index注意事项
- z-index只对开启了position的元素有效
- 父元素层级再高，也盖不住子元素
opacity
IE8及以下用filter代替
IE兼容问题 （HACK都不推荐）
条件HACK
<!--[if <keywords>? IE <version>?]>
HTML代码块
<![endif]-->
属性HACK
selector{<hack>?property:value<hack>?;}
- 在属性前加_，IE6及以下能识别。如_background-color:yellow
- 在属性前加*，IE7及以下能识别。
- \0;
- \9;
选择符级HACK
不推荐
