• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 简单但很实用的5个css属性

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含实用,css属性等相关知识,佚名 希望在学习及工作中可以帮助到您
我提到的都是被所有浏览器支持的css2属性比如:clip、min-height、white-space、cursor和display。千万别错过这篇文章,因为你会惊讶的发现他们是很有用的。
一、css clip(裁切)
clip裁切这个属性有点像是遮罩。它允许你用特定的形状遮罩相应的内容。裁切某元素之前,你必须先给该元素指定绝对定位属性,然后给它的上下左右赋值。
css01
图片裁切举例(演示)
在接下来的这个例子里面,主要展示如何给一个图片应用裁切属性。首先,指定div元素相对定位,然后给图片赋予绝对定位属性和相应的属性值。
css02
代码如下:
.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距离。
css03
代码如下:
.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的内容区域应用了最小高度,确保内容区域的高度比边栏要高些儿。
css04
代码如下:
.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属性后,如果一行内的空间无法容下该元素的话,它将自动换到下一行。
css05
代码如下:em {white-space: nowrap;}

四、光标(演示)
如果您更改按钮的行为,同时你也应该改变Cursor光标。例如,当一个按钮被禁用时,光标应改为默认(箭头),以表明它是无法点击因此,cursor属性对于网络应用程序开发是非常有用的。
css06

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

五、Display inline / block(演示)
块状元素是自己单独在一行的,而内联元素则会出现同一行里面。div、h1、p标签是默认的块状元素。em、span和strong则是内联元素。你可以改变display的显示样式display:inline或display:block;改变它们的默认状态。
css07
代码如下:
.block em {display: block;}
.inline h4, .inline p {display: inline;}

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

您可能想查找下面的文章:

  • 简单但很实用的5个css属性
  • 最常用和实用的CSS技巧

相关文章

  • 2017-08-06用条件注释判断浏览器版本解决页面兼容问题
  • 2017-08-06W3标准不变 清除浮动实现代码
  • 2017-08-06背景图片随屏幕大小变化问题的解决方法
  • 2017-08-06浏览器默认样式
  • 2017-08-06IE8样式不正确显示问题
  • 2017-08-06ie兼容性测试不用IE Test依然可以办到
  • 2017-08-06火狐和谷歌兼容性问题示例探讨
  • 2017-08-06CSS两种水平垂直居中示例介绍
  • 2017-08-06CSS盒子模型是什么
  • 2017-08-06CSS伪元素before、after设置特殊效果:制作时尚焦点图相框

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • div+css让div内部元素如单选按钮均匀分布
    • 解析width:100%;与width:auto;的区别
    • CSS左右两列自适应高布局示例代码
    • 纯CSS打造兼容各种浏览器的几何图形打包
    • 关于交互设计中的默认值的设计要点
    • CSS3 实用技巧:实现黑白图像效果示例代码
    • css实现半透明效果基本原理
    • 利用label标签和CSS美化文件上传表单(不兼容IE6)
    • CSS制作可输入内容的table表格
    • CSS 三栏等高布局实现方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有