Web前端开发修炼之道-CSS篇2（转+改）

display:inline-block和hasLayout display:block,inline,list-item,table-cell,inline-bloack等等。
为了兼容IE6、IE7(不支持display:inline:block)，我们真正能使用的display类型只有inline,block和none. display:inline-block集块级元素和行内元素的特点于一身。
为了使IE6、IE7实现display:inline-block效果，可以在行内元素(如span)中定义display：inline-block，以触发hasLayout,可以使用vertical-align:-10px(具体数值还要自己调)和其他实现浏览器效果一样。对块元素使用display:inline-block不能实现应有的效果。它只能对行内元素实现display:inline-block；还要用到针对IE的hack,*vertical-align。
relative、absolute和float position可能的取值：relative、absolute、static(默认的)、fixed（相对浏览器窗口的绝对定位）、inherit。
position:relative，z-index>0,但会保留自己在z-index:0层的占位，left等是相对于自己在z-index:0层的位置。
position:absolute,完全脱离文档流，在z-index:0层不保留位置，left等值相对于距离自己最近的一个设置了relative或absolute的祖先元素，如果都有没有，就是相对于body的。
float让元素仍然在z-index:0层左右浮动。会改变正常的文档流排列。
position:absolute和float会隐式的改变display类型，不论之前是什么类型的元素（display:none除外），只要设置了postion:absolute、float；left和float:right中任意一个，都会让元素以display:inline-block显示，这也就是IE6下使用float产生双边距可以使用display:inline去除position:relative不会隐式改变display的类型。
水平居中文本、图片等行内元素的水平居中可以使用text-align:center。
确定宽度的块级元素的水平居中可以使用margin:0 auto;
不确定宽度的块级元素的水平居中
（1）.讲内容放入table标签，这是table标签margin:0 auto;
（2）将块级元素使用display:inline变成行内元素，在通过text-align:center实现；
（3）再父元素之外再加一个div然后对这个div设置width，height，position：relative，然后对父元素设置position:absolute和left:50%,子元素设置成position:reletive和left:-50%.
（4）设置父元素的width：fit-content;然后再对父元素margin-left:auto;margin-right:auto;对子元素float:left;(5)对父元素设置display:box;box-orient:horizontal;box-pack:center;对子元素float：left;
竖直居中, 父元素高度不确定的文本、图片和块级元素竖直居中是通过给父容器设置上下边距实现的。
对父元素padding-bottom和padding-top设置相同的值。
父元素高度确定的单行文本竖直居中，是通过给父元素设置line-hignt等于父元素hight高度实现的。
父元素高度确定的多行文本、图片和块级元素竖直居中
（1）直接使用表格，直接将文字放在tr中
（2）对于支持display:table-cell的IE8和ff用display:table-cell和vertacil-align:middle实现居中。
对于不支持则使用IE hackIE hack：最外层div，position：absolute；内层div（包含文字）height:100px;position：absolute;top:50%；margin-top:-(height/2);必须要设置高度。
或者：用3层嵌套，2个外div，1个内div（包含文字） #outer{position:relative;} #middle{position:absolute;top:50%;} #inner{position:relative;top:-50%;}。不用设置inner文字的高度。
水平垂直居中 <div class = "conter"> 中间是块级元素 </div>
最外div，display：box；box-orient:horizontal;box:pack:center;box-align:center;
网格布局同级下，哪块内容重要，在HTML就优先写到前面。用于布局个人偏好子选择器
Z-index的相关问题及flash和IE6下的select元素除了x,y轴，还有一个Z轴，z轴在元素设置position为reletive或absolute或被激活，其大小有z-index设置，z-index越大，元素位置越靠上。
z可以为负值，在body之下负边距也可造成元素位置重叠z-index只对非窗口的元素有效，而flash默认是窗口模式，我们要将flash中的womde设置成opaque或transpartent。
窗口类型，优先于非窗口类型的显示在页面最顶端。
select元素在IE6下也是默认以窗口形式显示的，这是IE6的一个Bug。
解决办法：用一个与div同样大小的ifream放在div之下，select之上，用ifream遮住select。
具体就是：设置div的z-index：2；ifream的z-index：1；同时ifream的frameborder=“0”否则在FF下会有边框
插入png图片 IE6的png图片不支持透明，可以使用IE下私有的滤镜解决。
使用IETest进行多IE版本调试。

清除浮动为了让浮动元素的父容易能根据浮动元素的高度而自适应高度。
有3种办法：让父容器同时浮动，<div class="fl"><div class = "fl"></div></div>;
让浮动元素后面紧跟一个用于清除浮动的空标签, <div><div class="fl"></div><div class="cb"></div><div>给父容器挂一个特殊class，直接从父容器清除浮动元素的浮动，

1
2

<div class="classfix"><div class="fl"></div></div>
.classfix:after{content:".";dispaly:block;height:0;clear:both;visibility:hidden;} .classfix{display:inline-block;} *html .classfix{height:1%;} .clearfix{dispaly:block;}