Five Simple but useful CSS attributes

This articleArticleThese are five useful CSS attributes that you should be familiar with, but they are rarely used. I am not talking about the newly conceived css3 attribute. I am referring to attributes in the old css2, such as clip, Min-height, white-space, cursor, and display, which are widely supported by all browsers. So don't miss this article because you may be surprised how useful they are.

1. CSS clip

The clip attribute is like a mask. It allows you to mask the content of a rectangle element. To edit an element: You must specify position as absolute. Then, specify the top, right, bottom, and left values relative to the element.

Image editing instance (Demo)

The following example shows how to use the clip attribute to mask an image. First, specify the <div> element position: relative. Then, specify the element position: absolute and the corresponding margin.

 

  . Clip  {  
Position  :  Relative  ;  
Height  :  130px  ;  
Width  : 200px  ;  
Border  :  Solid 1px # ccc  ;  
  }  
. Clip img  {  
Position  :  Absolute  ;  
Clip  :  Rect (30px 165px 100px 30px) ;  
  }  
 

 

Image adjustment and editing (Demo)

In this example, I will show you how to adjust and edit images. My original image is in rectangular format. I want to scale it down by 50% to create a thumbnail library in square format. So I used the width and height attributes to adjust the image and use the clip attribute to mask them. Then, I used the left attribute to move the image to the left by 15px.

 

 . 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  ; </Span>
} 

2. Min-height (Demo)

The Min-height attribute allows you to specify the minimum height of an element. But it is useful when you need to balance the layout. I use it on my job board to ensure that the content area is always higher than the sidebar.

 

  . With_minheight{
Min-height:550px;
}
 

 

Min-height hack of IE6

Note: Min-height does not support IE6, but here is a min-height hack.

 

  . With_minheight{
Min-height:550px;
Height:Auto! Important;
Height:550px;
}
 

3. White-space (Demo)

The white-space attribute specifies how an element handles white spaces. For example, specifying white-space: nowrap will prevent text from being wrapped in the next line.

 

 
  Em{
White-space:Nowrap;
}
 

 

4. Cursor (Demo)

If you change the button behavior, you should also change the cursor. For example, when a button is disabled, the cursor should be changed to the default (arrow) to indicate that it cannot be clicked. Therefore, the cursor attribute is used to develop Web applications.ProgramVery useful.

 

  . Disabled  {  
Cursor  :  Default  ;  
  } 

. Busy  {  
Cursor  :  Wait  ;  
  }  

. Clickable: hover  {  
Cursor  :  Pointer  ;  
  } 

 

5. Display inline/block (Demo)

You may not know that the block element is displayed in a new row, while the inline element is displayed in the same row. <Div>,

 

  . Block em{
Display:Block;
}

. Inline H4,. inline P{
Display:Inline;
}
 

 

PS:

Chinese address:

Http://www.cnblogs.com/wiky/articles/5-simple-but-useful-css-properties.html 

English address:

Http://www.webdesignerwall.com/tutorials/5-simple-but-useful-css-properties/

DescriptionVicIf you have any reprinted documents, please indicate the source. If there are any translation errors or omissions, please leave a message. Thank you!