CSS中简单实用的属性
2019-10-08 08:50:48来源：爱站网 阅读 ()
在CSS3属性中有clip，min-height，white-space等一些被所有浏览器广泛支持的属性，但是有很多都不了解并无法完全发挥它的作用，那么下面爱站小编就为大家介绍CSS中简单实用的属性。
1、CSS Clip
剪辑 (clip) 属性就像一个面具。它允许你使用矩形掩盖页面元素的内容。要剪辑一个元素：你必须指定其 position 属性为 absolute，然后指定相对于元素的?top，right，bottom，left 值。
图片剪辑实例（演示）
以下示例演示了如何使用 clip 属性掩盖一张图片。首先，指定
?
.clip {
position: relative;
height: 130px;
width: 200px;
border: solid 1px #ccc;
}
.clip img {
position: absolute;
clip: rect(30px 165px 100px 30px);
}图像调整尺寸和剪辑（演示）
在这个示例中，我将展示如何调整图像尺寸和剪辑图片。素材图片是矩形的，我想将其削减至 50％ 的尺寸，用来创建一个正方形格式的缩略图。因此，我用宽度和高度属性来调整图像，并使用 clip 剪辑属性予以掩盖。然后用 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;
}2、Min-height （演示）
min-height 属性允许你指定元素的最小高度，适用于需要平衡布局的情况。我将它用于 Job 面板上，以确保内容区域高于侧边栏。
.with_minheight {
min-height: 550px;
}IE6 的 Min-height hack
注：神奇的 IE6 原生不支持 min-height 属性，不过幸好有一个?min-height hack。
.with_minheight {
min-height:550px;
height:auto !important;
height:550px;
}3、White-space（演示）
white-space 属性指定了元素中空白的处理方式。比如，指定 white-space:nowrap 会阻止文本自动换行。
em {
white-space: nowrap;
}4、Cursor（演示）
如果你改变了按钮的行为，其指针也应该随之改变。比如，当一个按钮不可用时，指针应该改变为默认的箭头，来表明它不可点击。因此，cursor 属性在开发 Web 应用程序时相当有用。
.disabled {
cursor: default;
}
.busy {
cursor: wait;
}
.clickable:hover {
cursor: pointer;
}5、Display inline / block（演示）
如果你不知道：块级元素是作为独立的一行来渲染的，而行内元素是在同一行被渲染的。
和
标签都是块级元素，，， 都是行内元素。通过 display:inline 或 block 的方式，你可以重设这些元素的 display 样式。
.block em {
display: block;
}
.inline h4, .inline p {
display: inline;
}上文中介绍的CSS中简单实用的属性相信大家在平时都是非常少使用的吧，大家认真看玩内容后是不是惊讶的发现它们竟有如此之大的用途。
原文链接:https://js.aizhan.com/web_authoring/css/9280.html
如有疑问请与原作者联系
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：css中让元素隐藏的方法
下一篇：如何将两个div并排一行
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点，学前端，基础不好一切白费！ 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
