简单但很实用的5个css属性

站长资源 2024/11/24 佚名

71 1538 71

DDR爱好者之家 Design By 杰米

我提到的都是被所有浏览器支持的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;
}

二、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光标。例如，当一个按钮被禁用时，光标应改为默认（箭头），以表明它是无法点击因此，cursor属性对于网络应用程序开发是非常有用的。

代码如下：
.disabled {cursor: default;}
.busy {cursor: wait;}
.clickable:hover {cursor: pointer;}

五、Display inline / block（演示）
块状元素是自己单独在一行的，而内联元素则会出现同一行里面。div、h1、p标签是默认的块状元素。em、span和strong则是内联元素。你可以改变display的显示样式display:inline或display:block;改变它们的默认状态。

代码如下：
.block em {display: block;}
.inline h4, .inline p {display: inline;}

中文原文：5个简单，但很实用的css属性
英文原文：5 Simple, But Useful CSS Properties

实用,css属性

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“简单但很实用的5个css属性”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月24日

简单但很实用的5个css属性

DIV+CSS的叫法是不准确的

3个css框架分享网站

评论“简单但很实用的5个css属性”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接