position定位
static：无特殊定位，对象遵循html定位规则
absolute：将对象从文档流出中拖出，使用left、right、top、botton、等属性进行绝对定位，而其叠层通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
relative：对象不可层叠，但仍依据left、right、top、botton等属性在正常文档流中偏移位置
fixed：ie5.5及ns6尚不支持此属性，固定定位方式，也会脱离文档流。通常情况下结合绝对定位和相对定位去使用（通常用在固定导航和固定侧边栏）
在制作页面时，通常将最顶层的图层设置为z-index：999；
clear：清除浮动影响
none：允许两边都可以有浮动对象
both：不允许有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象
folat：浮动
clip：auto|rect（x x x x（x代表数值））
auto：对象无剪切
rect：依据上右下左的顺序提供自对象左上角为（0,0）坐标计算的四个偏移数值，其中任一数值都可以用auto替换，此边不剪切
voerflow：viaible|auto|hidden|scroll
visible：不剪切内容也不添加滚动条，假如显式声明此默认值，对象被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto：此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden：不显示超过对象尺寸的内容
scroll：总显示滚动条
脱离文档流：overflow兼容
1、如果父级元素没有脱离文档流，子级元素脱离文档流，并且父级元素的高度或者宽度是auto，这时需要给父级元素添加overflow（脱离文档流），通常写法：auto，overflow：auto
2、如果上面的布局脱离了文档流，下面的内容会覆盖或者跑到上面的下面或者上面，这时可以给下面的内容加上clear：both
隐藏：visibility：inherit|visible|collapse|hidden
设置或检索是否显示对象，与display属性不同，此属性为隐藏的对象保留其占据的物理空间
inherit：继承上一个父级对象的可见性
visible：对象可视
hidden：对象隐藏
collapse：主要用来隐藏表格的行或列，隐藏的行或列能够被其他内容使用，对于表格的其他对象，其作用等同于hidden，IE5.5不支持此属性。
与display不同点：display：none是将位置和内容全部隐藏；visibility：hidden隐藏内容，物理位置不隐藏位置
web常用单位：px、em、%、vh、vw、wm、rem
移动端流体布局：css中的1px并不等于设备中的1px，
移动端注意事项：1、需要加移动端优先:
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
2、单位用相对布局（块%。文字em）
3、大于等于两列内容可以用float，但是附近元素要清除浮动，并且外面不需要content包裹
ideal viewport（理想视口）并没有一个固定的尺寸，不同的设备拥有不同的ideal viewport
/*绝对定位使div居中对齐*/
{
position:absolute;
left:50%;/*按照浏览器中间位置对齐*/
margin:-div宽度的一般;/*将div拉回原来的一半*/
}
相对定位：position：relative（子元素相对于父元素的位置，或者是相对兄弟元素的位置）
在做项目时：把每一个模块看成是一个容器，通常放在一个div里，如果是相对布局，通常每一个块级元素加上position属性
布局模式
相对浮动布局：position：relative，float
pc端布局：保证所有的浏览器都居中对齐：
*{
margin：0 auto；
}
body{
text-align：center
}（在浏览器顶端居中对齐）
<doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
*{
margin:0 auto;
padding:0px;
}
body{
text-align:center;
}
.header{
wdith:1000px;
height:100px
position:relative;
background:#fff;
}
.nav{
background:#ff0;
width:1000px;
height:100px;
position:relative;
}
.contents{
width:1000px;
height:1000px;
position:relative;
background:#eee;
}
.contents>.left{
width:400px;
height:1000px；
position:relative;
background:#f00;
float:left;
}
.contents>.right{
width:600px;
height:1000px;
position:relative;
background:#000;
float:left;
}
.footer{
width:1000px;
height:100px;
position:relative;
background:#00f;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="nav"><div>
<div class="contents">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
</html>
