Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "what are the commonly used CSS tips". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Clear the gap between several pixels at the bottom of the picture

Method 1:

The code is as follows:

Img {display:block;}

Method 2:

The code is as follows:

Img {vertical-align:top;}

In addition to the top value, it can also be set to text-top | middle | bottom | text-bottom, or even specific sum values

Method 3:

The code is as follows:

# test {font-size:0;line-height:0;}

# test is the parent element of img

two。 Align the text vertically to the text input box

Methods:

The code is as follows:

Input {vertical-align:middle;}

3. Centers a single line of text vertically in the container

Methods:

The code is as follows:

# test {height:25px;line-height:25px;}

Just set the line height of the text to be equal to the height of the container.

4. Make the color of the hyperlink different after access and before access, and retain the hover and active effects after access

Methods:

The code is as follows:

A:link {color:#03c;}

A:visited {color:#666;}

A:hover {color:#f30;}

A:active {color:#c30;}

Just set the hyperlink style in the order of L-V-H-A, and you can write shorthand as LoVe (like) HAte (hate).

5. Why can't IE set the color of the scroll bar under Standard mode?

Methods:

The code is as follows:

Html {

Scrollbar-3dlight-color:#999

Scrollbar-darkshadow-color:#999

Scrollbar-highlight-color:#fff

Scrollbar-shadow-color:#eee

Scrollbar-arrow-color:#000

Scrollbar-face-color:#ddd

Scrollbar-track-color:#eee

Scrollbar-base-color:#ddd

}

Define the scroll bar color style originally set on body to the html tag selector.

6. Make the text overflow boundary without wrapping to force it to be displayed on one line

Methods:

The code is as follows:

# test {width:150px;white-space:nowrap;}

Set the width and white-space of the container to nowrap, which is similar to the label.

7. Make the text overflow boundary appear as an ellipsis

Method (this method is not supported by Firefox5.0):

The code is as follows:

# test {width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

You first need to set up to force the text to be displayed on one line, then truncate the overflowed text through overflow:hidden, and display the truncated text as an ellipsis in text-overflow:ellipsis.

8. Make continuous long strings wrap automatically

Methods:

The code is as follows:

# test {width:150px;word-wrap:break-word;}

The break-word value of word-wrap allows word wrapping

9. Clear float

Method 1:

The code is as follows:

# test {clear:both;}

# test is the next sibling element of the floating element

Method 2:

The code is as follows:

# test {display:block;zoom:1;overflow:hidden;}

# test is the parent of the floating element. Zoom:1 can also be replaced with a fixed width or height

Method 3:

The code is as follows:

# test {zoom:1;}

# test:after {display:block;clear:both;visibility:hidden;height:0;content:'';}

# test is the parent of the floating element

10. Defines the cursor shape of the mouse pointer as a hand and is compatible with all browsers

Methods:

The code is as follows:

# test {cursor:pointer;}

If cursor is set to hand, only IE and Opera will support it, and hand is a non-standard attribute value

11. Centers a container of known height horizontally and vertically in the page

Methods:

The code is as follows:

# test {position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 00-100px;}

Know More: how containers of known height are centered horizontally and vertically in the page

twelve。 Centers a picture of unknown size horizontally and vertically in a container of known width and height

Methods:

The code is as follows:

# test {display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}

# test p {* position:absolute;*top:50%;*left:50%;margin:0;}

# test p img {* position:relative;*top:-50%;*left:-50%;vertical-align:middle;}

# test is the grandfather node of img, and p is the parent node of img. Know More: how a picture of unknown size is centered horizontally and vertically

13. Set the width and height of the span (that is, how to set the width and height of inline elements)

Methods:

The code is as follows:

Span {display:block;width:200px;height:100px;}

To enable inline elements to set width and height, simply define them as block-level or inline block-level elements. So there are a variety of ways to set the display property, the float property, or the position property, and so on.

14. Define multiple different css rules for an element

Methods:

The code is as follows:

.a {color:#f00;}

.b {background:#eee;}

.c {background:#ccc;}

Test 1

Test 2

Multiple rules are separated by spaces, and only class can use multiple rules at the same time, id cannot

15. Fill the page with an element

Methods:

The code is as follows:

Html,body {height:100%;margin:0;}

# test {height:100%;}

16. Make an element 10 pixels away from each of the top, lower right and left four sides of the window

Methods:

The code is as follows:

Html,body {height:100%;margin:0;}

Html {_ padding:10px;}

# test {position:absolute;top:10px;right:10px;bottom:10px;left:10px;_position:static;_height:100%;}

17. Remove the dotted frames of hyperlinks and focus elements

Methods:

The code is as follows:

A {outline:none;}

Because IE7 and earlier browsers do not support the outline attribute, it needs to be implemented through the blur () method of js, such as

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.