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提交意见输入框样式代码
Oct 30 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
socket.io 和canvas 实现的共享画板功能
May 22 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 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
如何分别全角和半角以避免乱码
2006/10/09 PHP
php简单静态页生成过程
2008/03/27 PHP
php AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
php实现两个数组相加的方法
2015/02/17 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
python中map、any、all函数用法分析
2015/04/21 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
Django添加feeds功能的示例
2018/08/07 Python
python-opencv颜色提取分割方法
2018/12/08 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
IE兼容css3圆角的实现代码
2011/07/21 HTML / CSS
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
remote接口和home接口主要作用
2013/05/15 面试题
商场消防演习方案
2014/02/12 职场文书
寒假家长评语大全
2014/04/16 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书
话题作文之自信作文
2019/11/15 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python