06月07, 2013

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;

  4. 竖直居中, 父元素高度不确定的文本、图片和块级元素竖直居中是通过给父容器设置上下边距实现的。 对父元素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文字的高度。

  5. 水平垂直居中 <div class = "conter"> 中间是块级元素 </div> 最外div,display:box;box-orient:horizontal;box:pack:center;box-align:center;

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

  7. 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;}
    

版权声明:本文为博主原创文章,未经博主允许不得转载。

本文链接:https://imjiaolong.cn/post/14.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。