我们习惯使用自己熟悉的CSS属性来定义页面的样式,虽然下面这些CSS属性虽然不是很常用,但掌握这些方法也许能让你如虎添翼。
1. clip 【预览】
类似于遮罩层的感念,只显示出指定位置及大小的矩形框中的内容,通过指定 top right bottom left 四个参数来决定矩形框的位置及大小。
使用Clip属性时须指定Postion属性值为absolute。
CSS代码:
.clip {
position: relative;
height: 130px;
width: 200px;
border: solid 1px #ccc;
}
.clip img {
position: absolute;
clip: rect(30px 165px 100px 30px);
}
2. min-height ﹑min-width ﹑max-height ﹑max-width 【预览】
这些属性指定元素的最小高度(min-height)﹑最小宽度(min-width)﹑最大高度(max-height)﹑最大宽度(max-width),常用来平衡页面布局。
CSS代码
.box-min-height {
min-height: 550px;
}
IE6不支持这些属性,可以使用下面CSS代码来代替
.box-min-height {
min-height:550px;
height:auto !important;
height:550px;
}
min-height min-width max-height max-width 这些属性指定元素长宽方向的极值。
height width指定元素的长 宽,其值为固定值,所包含的内容只能显示在指定的范围内。
3. White-space 【预览】
遇到空格时的换行方式。
CSS代码
em {
white-space: nowrap;
}
4. cursor【预览】
鼠标类型
[ crosshair | text | wait | default | help | e-resize | ne-resize | n-resize | nw-resize | w-resize | sw-resize | s-resize | se-resize | auto ]
CSS 代码
CSS代码
.default{
cursor: default;
}
.wait{
cursor: wait;
}
.pointer:hover {
cursor: pointer;
}
5. display inline block【预览】
块(block)元素,例如h div p,在显示的时候会单独占有一个新行,而内嵌(inline)元素,例如span em strong ,则会显示在相同行内。
CSS 代码
.block em {
display: block;
}
.inline h4, .inline p {
display: inline;
}
6. position:fixed 【预览】
元素的位置固定不随页面滚动
CSS 代码
.position{
position: fixed;
top: 200px;
right: 0px;
height: 200px;
width: 100;
}
7. background-imgage (css sprites) 【预览】
CSS 代码
.css-sprites-50 {
background-image: url(default-thumbnail.gif);
background-repeat: no-repeat;
background-position: 50px 50px;
height: 200px;
width: 200px;
background-color: #eee;
margin-bottom: 50px;
}
.css-sprites-150 {
background-image: url(default-thumbnail.gif);
background-repeat: no-repeat;
background-position: -50px -50px;
height: 200px;
width: 200px;
background-color: #eee;
}
8. text indent 【预览】
- 为了美观及方便阅读,段落开头一般都要缩进两个字。
- 网站logo部分定位也可以使用这种方式,将logo部分文字缩进-9999px,只显示logo图片,可参考 No.1 Web Design 。
CSS代码
.text-indent{
text-indent:50px;
}
9. Border Radius 【预览】
CSS 代码
.border-redius{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
10. z-index 【预览】
.z-index-1 {
z-index: 999;
}
.z-index-2 {
z-index: 1;
}
61 个评论