Getting started with CSS: five simple but useful CSS attributes

You may be familiar with these five CSS attributes, but you may rarely use them. this tutorial is not about the attributes of CSS3, but still describes the attributes of CSS2. These attributes are widely supported by various browsers: clip, min-height, white-space, cursor and display. so don't miss this tutorial, because you will find how useful they are.

1. CSS Clip

The Clip attribute is like a shadow. it can cover up the unwanted parts of the element content. first, you must specify the position of the element to locate it relative to position: absolute. then specify the value relative to the element: top, right, bottom, left.

Use clip for demonstration

The following uses an image as an example to describe how to use this attribute. First, relative positioning is performed for the div, And Then absolute position is specified for the image.

Copy to ClipboardReference: [www.bkjia.com]. clip {
Position: relative;
Height: 130px;
Width: 200px;
Border: solid 1px # ccc;
}
. Clip img {
Position: absolute;
Clip: rect (30px 165px 100px 30px );
}
Use clip to demonstrate video clip Protection

This example demonstrates how to use clip to reset the position and size of an image. the size of the original image. now we need to put this image in a square container and the size is half of the original size. now let's take a look at how to achieve this effect. First, use width and height to set the height and width of the image, and then use clip to edit the image. and make the image 15px to the left.

Copy to ClipboardReference: [www.bkjia.com]. 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 pages in total:
• Previous Page
• 1
• 2
• Next Page