053288628280
您的当前位置:首页 > 技术支持 > 建站知识 >

5个不常用的但很有用的css属性解析

时间:2017-09-08

这5个事css2属性,它们是clipmin-heightwhite-spacecursor, and display

下面分别说明一下;

 

CSS clip 属性

定义和用法

clip 属性剪裁绝对定位元素。

当一幅图像的尺寸大于包含它的元素时会发生什么呢?"clip" 属性允许您规定一个元素的可见尺寸,这样此元素就会被修剪并显示为这个形状。

说明

这个属性用于定义一个剪裁矩形。对于一个绝对定义元素,在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大,也可能比内容区小。

默认值: auto
继承性: no
版本: CSS2
JavaScript 语法: object.style.clip="rect(0px,50px,50px,0px)"

实例

剪裁图像:

img
  {
  position:absolute;
  clip:rect(0px,60px,200px,0px);
  }

TIY

浏览器支持

所有主流浏览器都支持 clip 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

可能的值

描述
shape 设置元素的形状。唯一合法的形状值是:rect (toprightbottomleft)
auto 默认值。不应用任何剪裁。
inherit 规定应该从父元素继承 clip 属性的值。

TIY 实例

设置元素的形状
本例演示如何设置元素的形状。此元素被剪入形状中,然后显示出来。

 

2.最小高度

 

5个不常用的但很有用的css属性解析
.with_minheight {
  
min-height: 550px;
}

Min-height hack for IE6

Note: min-height is not supported by IE6, but there is a min-height hack.

.with_minheight {
  min-height:550px;
  height:auto !important;
  height:550px;
}

 

3.white-space

The white-space property specifies how white-space is handled in an element. For example, specify white-space: nowrap will prevent the text from wrapping to next line.

 

5个不常用的但很有用的css属性解析
em {
  
white-space: nowrap;
}

 

4. 光标 

如果您更改一个按钮的行为,你应该改变光标以及。例如,当一个按钮被禁用,光标应改为默认(箭头),以表明它是不可点击。因此,该 光标属性是非常有用的用于开发Web应用程序。

 

5个不常用的但很有用的css属性解析
.disabled {
  
cursor: default;
}


.busy {
  
cursor: wait;
}


.clickable:hover {
  
cursor: pointer;
}

 

5. 显示嵌入式/块 

如果你不知道:块元素呈现一个新行,而内联元素呈现在同一行。 <div><h1>,和 <p>标记的块元素的例子。标签内嵌的例子有: <em><span>,和<strong>。您可以通过指定重写式显示器 显示:内联.

 

5个不常用的但很有用的css属性解析
.block em {
  
display: block;
}


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

 
块级元素和行元素的转换方式。

相关文章

Copyright © 2009-2017 千龙网络 版权所有  鲁ICP备09004053号 TAG SITEMAP