The simple and useful 3 properties of CSS3

This article describes 5 practical CSS properties. You should be familiar with it, but very likely to use it very rarely. I'm not talking about looking at the new CSS3 attribute, I mean the attributes in the old CSS2, such as CLIP,MIN-HEIGHT,WHITE-SPACE,CUROSR and display, which are widely supported by all browsers. Therefore, do not miss this article, because you may find that they have such a large use.

1, CSS Clip

Clip (clip) property is like a mask. It allows you to mask the contents of a page element using a rectangle. To clip an element: You must specify its position property as absolute, and then specify the Top,right,bottom,left value relative to the element.

Picture Clip instance ( demo )

The following example demonstrates how to use the Clip property to mask a picture. First, specify the <div> element as position:relative, then specify the element as Position:absolute, and set the RECT value according to the actual needs.

. clip {
  position:relative;
  height:130px;
  width:200px;
  Border:solid 1px #ccc;
}
. Clip img {
  position:absolute;
  Clip:rect (30px 165px 100px 30px);
}

Image sizing and clipping ( demo )

In this example, I'll show you how to resize the image and clip the picture. The footage is rectangular and I want to cut it to 50% size to create a square-formatted thumbnail. Therefore, I use the width and Height attributes to adjust the image and mask it with the clip clip properties. Then use the left property to move the picture away from the 15px on the left-hand side.

. 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 ( demo )

The Min-height property allows you to specify the minimum height of the element and applies to situations where the layout needs to be balanced. I use it on the Job panel to make sure that the content area is higher than the sidebar.

. with_minheight {
  min-height:550px
}

IE6 's min-height hack

Note: The magical IE6 native does not support min-height attributes, but fortunately there is a min-height hack.

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

3, White-space ( demo )

The White-space property specifies how whitespace is handled in the element. For example, specifying WHITE-SPACE:NOWRAP prevents text from wrapping automatically.

EM {
  white-space:nowrap;
}

4, Cursor ( demo )

If you change the behavior of the button, the pointer should change as well. For example, when a button is unavailable, the pointer should be changed to the default arrow to indicate that it is not clickable. Therefore, the cursor property is quite useful when developing WEB applications.

. Disabled {
  Cursor:default
}

. Busy {
  cursor:wait
}

. clickable:hover {
  cursor:pointer;
}

5, Display Inline/block ( demo )

If you don't know: block-level elements are rendered as separate lines, while inline elements are rendered on the same line. <div>,

. Block em {
  display:block;
}

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

English Manuscript:5 simple, But useful CSS Properties Webdesignwall