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

1.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。

2.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的类型。

3.水平居中

• 文本、图片等行内元素的水平居中可以使用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;

5.竖直居中

• 父元素高度不确定的文本、图片和块级元素竖直居中是通过给父容器设置上下边距实现的。对父元素padding-bottom和padding-top设置相同的值。
• 父元素高度确定的单行文本竖直居中，是通过给父元素设置line-hignt等于父元素hight高度实现的。
• 父元素高度确定的多行文本、图片和块级元素竖直居中（1）直接使用表格，直接将文字放在tr中（2）对于支持display:table-cell的IE8和ff用display:table-cell和vertacil-align:middle实现居中。对于不支持则使用IE hack
• IE 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文字的高度。

6.水平垂直居中

<div class = "conter">

中间是块级元素

</div>

最外div，display：box；box-orient:horizontal;box:pack:center;box-align:center;

7.网格布局

• 同级下，哪块内容重要，在HTML就优先写到前面。
• 用于布局个人偏好子选择器

8.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下会有边框。

8.插入png图片

• IE6的png图片不支持透明，可以使用IE下私有的滤镜解决。

9.使用IETest进行多IE版本调试。

10.清除浮动

为了让浮动元素的父容易能根据浮动元素的高度而自适应高度。有3种办法：

• 让父容器同时浮动，<div class="fl"><div class = "fl"></div></div>
• 让浮动元素后面紧跟一个用于清除浮动的空标签,<div><div class="fl"></div><div class="cb"></div><div>
• 给父容器挂一个特殊class，直接从父容器清除浮动元素的浮动，<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;}