5个简单,但很实用的 css属性
这5个有用的css属性可能你是比较熟悉的,但是很少使用到它们。我这里讨论的不是css3的新属性
。我提到的都是被所有浏览器支持的css2属性比如:clip、min-height、white-space、cursor和display。千万别错
过这篇文章,因为你会惊讶的发现他们是很有用的。
一、css clip(裁切)
clip裁切这个属性有点像是遮罩。它允许你用特定的形状遮罩相应的内容。裁切某元素之前,你必须先给该元素指定绝对定位属性,然后给它的上下左右赋值。
图片裁切举例
(演示)
在接下来的这个例子里面,主要展示如何给一个图片应用裁切属性。首先,指定div元素相对定位,然后给图片赋予绝对定位属性和相应的属性值。
代码如下:
.clip {
position: relative;
height: 130px;
width: 200px;
border: solid 1px #ccc;
}
.clip img {
position: absolute;
clip: rect(30px 165px 100px 30px);
}
图片调整和裁切
在这例子里面,我们将展示你如何调整图片大小并裁切图片。这个图片的原始形状是长方形的,我想把图片缩小一半后在正方形里展示。我用width、
height属性改变图片大小,然后通过裁切属性让其显示为正方形,同时给left赋值使图片向左移动15px距离。
代码如下:
.gallery li {
float: left;
margin: 0 10px 0 0;
position: relative;
width: 70px;
height: 70px;
border: solid 1px #000;
}
.gallery img {
width: 100px;
height: 70px;
position: absolute;
clip: rect(0 85px 70px 15px);
left: -15px;
}
clip
其他相关文章
二、min-height最小高度
(演示)
最小高度属性允许你给某个元素指定最小高度,对于网站布局来说它是十分有用的。我就在我的job
board的内容区域应用了最小高度,确保内容区域的高度比边栏要高些儿。
代码如下:
.with_minheight {min-height: 550px;}
min-height(最小高度)在ie6下面的bug问题
注意:ie6是不支持min-height的,但是一下方法可以解决这个ie6 bug问题。
.with_minheight {
min-height:550px;
height:auto !important;
height:550px;
}
三、White-space折行
(演示)
White-space属性指定某一元素是如何自动折行的。比如,给一元素指定White-space属性后,如果一行内的空间无法容下该元素的话,它将
自动换到下一行。
代码如下:
em {white-space: nowrap;}
四、光标
(演示)
如果您更改按钮的行为,同时你也应该改变Cursor光标。例如,当一个按钮被禁用时,光
相关文档:
此文为网上收集~
给客户做站的时候遇到的问题,div层加了margin后 总宽度超过父级层宽度 就自动换行了 如何让浮动层加margin后不换行呢?
下面看浮动层加margin后换行的例子:
比如说有个DIV宽度为380px,它里面有一个菜单列表,每个宽度为60px,margin-right为20px。如果就按照下面的HTML结构来做的话,那么这个菜单列表能 ......
一、星号*
应该是个通配符。比如
<style type="text/css">
.roundBorder *
{
background: white;
display: block;
height: 1px;
overflow: hidden;
}
</style>
……
<b class="roundBorder">
<b class="round ......
盒子标签和属性对照
CSS语法(不区分大小写)
JavaScript语法(区分大小写)
border
border
border-bottom
borderBottom
border-bottom-color
borderBottomColor
border-bottom-style
borderBottomStyle
border-bottom-width
borderBottomWidth
border-color
borderColor
border-left
borderLeft
border ......
如果在用CSS设计布局时遇到BUG,请认真阅读以下内容,非常容易记忆的,不知道哪位高人把CSS BUG编成了顺口溜了!看看好不好记住呢?
一、IE边框若显若无,须注意,定是高度设置已忘记;
二、浮动产生有缘故,若要父层包含住,紧跟浮动要清除,容器自然显其中;
三、三像素文本慢移不必慌,高度设置帮你忙 ......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS边框阴影< ......