CSS3 简单又实用的5个属性


Posted in HTML / CSS onMarch 04, 2010

我并不是在谈论展望全新的 CSS3 属性,我指的是旧的 CSS2 中的属性,如:clip,min-height,white-space,curosr 和 display 等一些被所有浏览器广泛支持的属性。因此,千万不要错过这篇文章,因为你可能发现它们竟有如此之大的用途。

1、CSS Clip

剪辑 (clip) 属性就像一个面具。它允许你使用矩形掩盖页面元素的内容。要剪辑一个元素:你必须指定其 position 属性为 absolute,然后指定相对于元素的 top,right,bottom,left 值。

CSS3 简单又实用的5个属性

图片剪辑实例(演示

以下示例演示了如何使用 clip 属性掩盖一张图片。首先,指定 <div> 元素为 position:relative,然后指定 <img> 元素为 position:absolute,并且根据实际需要设定 rect 值。

CSS3 简单又实用的5个属性

.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 的距离。

CSS3 简单又实用的5个属性

.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 面板上,以确保内容区域高于侧边栏。

CSS3 简单又实用的5个属性

.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 会阻止文本自动换行。

CSS3 简单又实用的5个属性

em {
  white-space: nowrap;
}

4、Cursor(演示

如果你改变了按钮的行为,其指针也应该随之改变。比如,当一个按钮不可用时,指针应该改变为默认的箭头,来表明它不可点击。因此,cursor 属性在开发 Web 应用程序时相当有用。

CSS3 简单又实用的5个属性

.disabled {
  cursor: default;
}

.busy {
  cursor: wait;
}

.clickable:hover {
  cursor: pointer;
}

5、Display inline / block(演示

如果你不知道:块级元素是作为独立的一行来渲染的,而行内元素是在同一行被渲染的。<div>,<h1> 和 <p> 标签都是块级元素,<em>,<span>,<strong> 都是行内元素。通过 display:inline 或 block 的方式,你可以重设这些元素的 display 样式。

CSS3 简单又实用的5个属性

.block em {
  display: block;
}

.inline h4, .inline p {
  display: inline;
}

英文原稿:5 Simple, But Useful CSS Properties | WebDesignWall

HTML / CSS 相关文章推荐
CSS3 选择器 属性选择器介绍
Jan 21 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
Sep 25 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
HTML5本地存储和本地数据库实例详解
Sep 05 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 HTML / CSS
Html5定位终极解决方案
Feb 05 HTML / CSS
AmazeUI 缩略图的实现示例
Aug 18 HTML / CSS
聊聊CSS粘性定位sticky案例解析
Jun 01 HTML / CSS
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 #HTML / CSS
CSS3 网页下拉菜单代码解释 中文翻译
Feb 27 #HTML / CSS
CSS3模块的目前的状况分析
Feb 24 #HTML / CSS
让IE可以变相支持CSS3选择器
Jan 21 #HTML / CSS
玩转CSS3色彩
Jan 16 #HTML / CSS
需要知道的CSS3动画技术
Jan 01 #HTML / CSS
CSS3 倾斜的网页图片库实例教程
Nov 14 #HTML / CSS
You might like
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
Javascript 陷阱 window全局对象
2008/11/26 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
Python编程argparse入门浅析
2018/02/07 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
拖鞋店创业计划书
2014/01/15 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
培训班主持词
2014/03/28 职场文书
安全生产先进个人事迹材料
2014/12/30 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS