首页 > 代码库 > css技巧总结
css技巧总结
一.自由布局的相关技巧
1.尽量不用指定像素宽度(width:300px)
用百分比或者auto(width:90%或者width:auto)
2.相对大小字体
{font-size:0.875em}
small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875) 默认是16px
3.流动布局
float:left; clear:both的活用
4.选择加载CSS
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="http://www.mamicode.com/tinyScreen.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="http://www.mamicode.com/smallScreen.css" />
@media screen and (max-device-width:400px) {
.column {float:none;width:auto;}
#sidebar {display:none;}
}
5.图片的自动缩放
这只要一行CSS代码:
img { max-width: 100%;}
这行代码对于大多数嵌入网页的视频也有效,所以可以写成
img, object { max-width: 100%;}
老版本的IE不支持max-width,所以只好写成:
img { width: 100%; }
此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令
img { -ms-interpolation-mode: bicubic; }
二.常用CSS技巧
1.容器的垂直居中
small要在big容器里垂直居中
- <div id="big">
- <div id="small">
- </div>
- </div>
- div#big{
- position:relative;
- height:480px;
- }
- div#small {
- position: absolute;
- top: 50%;
- height: 240px;
- margin-top: -120px;
- }
里面有2个技巧:
1.position:absolute定位的话会寻找第一个外层position为absolute或者是relative的。
2.内部元素如果要居中只要top父元素的50%,然后margin-top反方向自己的50%的高度就可以了,尤其是布局类似tabel最为有效
2.用icon来替代ul li的小黑点
ul {list-style: none} ul li { background-image: url("path-to-your-image"); background-repeat: none; background-position: 0 0.5em; }
3.去除float脱离文档流的方法
详细可以查看http://www.ruanyifeng.com/blog/2009/04/float_clearing.html
主要方法大致是在float元素后面加入clear:both;
或者在父级元素上加入style="overflow:hidden",也会自动消除子元素的float的脱离文档流的行文
三.CSS特效
1.CSS使button有3D效果
div#button { background: #888; border: 1px solid; border-color: #999 #777 #777 #999; }
2.CSS3水印字
.element { color: #222; text-shadow: 0px 2px 3px #555; }
css技巧总结