Several classic CSS techniques

web front end six thousand nine hundred and eight 13 years ago (2011-02-27)


1. Use line height to center vertically
line-height:24px;   
When a container with a fixed width is used and a row needs to be vertically centered, use line height (the height is the same as that of the parent container)

2. Clear container floating
#main { overflow:hidden; }

3. Do not allow link folding
a { white-space:nowrap; }

4. Always let Firefox display scroll bars
html { overflow:-moz-scrollbars-vertical; }  
body, html { min-height:101%; }

5. Center the block element horizontally
margin:0 auto;
Or margin left: auto; margin-right: auto;
This technique is basically explained in all CSS textbooks. Don't forget to add a width to it. It can also be used under IE
body{ text-align: center; }
Then define the inner container text align: left; Restore.

6. Hide the scroll bar of Explorer textarea
textarea { overflow:auto; }
IE has a vertical scroll bar for textarea by default (don't ask me why).

7. Set print pagination
h2 { page-break-before:always; }
The page break before property can set the page break when printing a web page.

8. Delete the dotted box on the link
a:active, a:focus { outline:none; }
By default, Firefox will add a dotted line box when the link gets the focus (or when it is clicked), which can be deleted by using the above properties.