网页中CSS的细节处理大总结(八)

发布时间:2019-10-17编辑:脚本学堂
我们在css编写过程中遇到很多细节问题,下面针对这个问题,给大家总结归纳一下,细节打败一切,希望朋友认真的看一下。

1). display:inline-block;顾名思义,就是在内联情况下的块状,可以设定高度宽度。
 

复制代码 代码示例:
.element-class {
display: -moz-inline-stack; //Firefox only code
display: inline-block; //some standard browsers
zoom: 1; //IE only
*display: inline; //Only IE know this code (CSS Hack)
}

2).清理浮动
 

复制代码 代码示例:
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix {zoom:1;}

3).在地址栏添加自定义图标
首先,我们需要预先制作一个图标文件,大小为16*16像素。文件扩展名为ico,然后上传到相应目录中。在HTML源文件“<head></head>”之间添加如下代码:<Link Rel=”ICON
NAME” href=”http://图片的地址(注意与刚才的目录对应)”>,当然如果用户使用IE5或以上版本浏览时,就更简单了,只需将图片上传到网站根目录下,即可自动识别!
4).在IE6中设置display:block的空容器一个较小高度时,如<p style=”height:1px;”></p>,会发现其高度不能小于某个值。解决方案:设置overflow:hidden。
5).文字用省略号截断
 

复制代码 代码示例:
div{width:200px;height:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}