5 most popular classic CSS properties tutorial

Source: Internet
Author: User
Tags format min relative
Here are some of the most commonly used CSS properties when writing Web site CSS styles, and mastering them is a must!

1. CSS Clip
The clip property is like a mask. It allows you to mask the contents of a rectangular element. To clip an element: You must specify position as absolute. Then, specify the Top,right,bottom, and left values, relative to the element.

Image Clip instance ( demo )
The following example shows how to use the Clip property to mask a picture. First, specify the <div> element position:relative. Then, specify the element Position:absolute and the corresponding margins.


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



image adjustments and clips (Demo)
In this example, I'll show you how to adjust and clip the image. My original image is in rectangular format. I want to shrink it by 50% to create a square format for the thumbnail gallery. So, I use the width and Height properties to adjust the image and use the Clip property to cover them up. Then I use the left property to move the image to the right 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 property allows you to specify the minimum height of the element. But it's useful when you need to balance the layout. I'm in myJob BoardUse it to make sure that the content area is always higher than the sidebar.


. With_minheight{
Min-height:550px;
}


IE6 's min-height hack
Note: Min-height does not support IE6, but here is amin-height hack

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



3. White-space ( demo )
The White-space property specifies how an element handles whitespace. For example, specifying WHITE-SPACE:NOWRAP will prevent text from wrapping to the next line.


em{
White-space:nowrap;
}


4. Cursor ( demo )
If you change the behavior of the button, 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 is not clickable. Therefore, the cursor property is useful for developing Web applications.


. Disabled{
Cursor:default;
}

. Busy{
Cursor: Wait;
}

. Clickable:hover{
Cursor:Pointer;
}


5. Display Inline/block ( demo )
You may not know that a block element renders in a new row, while an inline element is rendered on the same line. <div>,

. Block EM{
Display: Block;
}

. inline h4, inline p{
Display:inline;
}



Related Article

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.