职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
查看: 377|回复: 10

几个经典的css技巧

[复制链接]
jinchang 发表于 2011-7-25 09:53 | 显示全部楼层 |阅读模式
使用 line-height 垂直居中
line-height:24px;   
使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致)
清除容器浮动
#main { overflow:hidden; }   
不让链接折行
a { white-space:nowrap; }   
上面的设定就能避免链接折行
始终让 Firefox 显示滚动条
html { overflow:-moz-scrollbars-vertical; }   
body, html { min-height:101%; }   
使块元素水平居中
margin:0 auto;   
其实就是
margin-left: auto; margin-right: auto;   
这个技巧基本上所有的 CSS 教科书都会有说明,别忘记给它加上个宽度。Exploer 下也可以使用
body{ text-align: center; }   
然后定义内层容器
text-align: left;   
恢复。
隐藏 Exploer textarea 的滚动条
textarea { overflow:auto; }   
Exploer 默认情况下 textarea 会有垂直滚动条(不要问我为什么)。
设置打印分页
h2 { page-break-before:always; }   
page-break-before 属性能设置打印网页时的分页。
删除链接上的虚线框
a:active, a:focus { outline:none; }   
Firefox 默认会在链接获得焦点(或者点击时)加上条虚线框,使用上面的属性可以删除。
最简单的 CSS 重置
  
* { margin: 0; padding: 0 }   

* { margin: 0; padding: 0 }  


能文能武 发表于 2011-7-25 09:53 | 显示全部楼层
使块元素水平居中
margin:0 auto


好像如果是IE的话

页头要加什么协议的好像是xhtml

无处不在 发表于 2011-7-25 09:53 | 显示全部楼层
块元素居中不只是CSS设计的问题,在IE中要实现快居中,要在页面的顶部加上当前页面代码要遵循的协议,我一般会加上“http://www.w3.org/TR/html4/loose.dtd”.

shmilyyu 发表于 2011-7-25 09:53 | 显示全部楼层
引用
使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致),更多的垂直居中总结可以看这里。
期前也提到过这样的问题,更多信息可以看这里。

请问“这里”是哪里?

hxy 发表于 2011-7-25 09:53 | 显示全部楼层
zhengyutong
引用
使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致),更多的垂直居中总结可以看这里。
期前也提到过这样的问题,更多信息可以看这里。

请问“这里”是哪里?


对,请问“这里”究竟是指哪里呢?

天上智喜 发表于 2011-7-25 09:53 | 显示全部楼层
请问“这里”究竟是指哪里呢?

醉倚西风 发表于 2011-7-25 09:54 | 显示全部楼层
楼主灌水不敬业,从其他地方复制过来的,没把"这里"处理一下

broken 发表于 2011-7-25 09:54 | 显示全部楼层
呵呵,对啊,都没说清楚,把我们忽悠了

fl 发表于 2011-7-25 09:54 | 显示全部楼层
愿意分享就是好的,别打击别人。

已经来了吗 发表于 2011-7-25 09:54 | 显示全部楼层
text-align:center;width:100%;这个居中技巧还是非常有用的(图片亦适用),跨浏览器支持也非常不错。


broken 发表于 2011-7-29 10:51 | 显示全部楼层
嘿嘿......哈哈......呵呵.....哟~呼
您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点,并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是信息平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽造成漏登,请及时联系我们,我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-3-29 17:12 , Processed in 0.132719 second(s), 20 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表