Summary of CSS usage skills

Use line-height for vertical centering

line-height:24px;
When using a fixed-width container and need a row to be vertically centered, use line-height (the height is the same as the parent layer container) , more vertical centering summary can be seen here.

Clear container float

#main { 
overflow:hidden; 
}

This problem was also mentioned before. For more information, you can see here.

Do not allow links to wrap

a { 
white-space:nowrap; 
}

The above settings can prevent links from wrapping, but I personally recommend that long links have corresponding lines (regarding line breaks) For discussion, see the records of the center of the circle).

Always let Firefox display scroll bars

html { 
overflow:-moz-scrollbars-vertical; 
}

For more Mozilla/Firefox private CSS properties, please refer here. For cross-browser support, you can also use

body, html { 
min-height:101%; 
}

to center the block element horizontally

margin:0 auto;
is actually

margin-left: auto;
margin-right: auto;
Basically all CSS textbooks will explain this technique. Don’t forget to add a width to it. You can also use

body{ 
text-align: center; 
}

under Explorer and then define the inner container

text-align: left;
restore.

Hide the scroll bar of the Exploer textarea

textarea { 
overflow:auto; 
}

Exploer textarea has a vertical scroll bar by default (don’t ask me why).

Set printing paging

h2 { 
page-break-before:always; 
}

page-break-before attribute can set the paging when printing web pages.

Delete the dotted frame on the link

a:active, a:focus { 
outline:none; 
}

Firefox will add a dotted frame by default when the link gets focus (or clicked), which can be deleted using the above attributes.

The simplest CSS reset

* { 
margin: 0; padding: 0 
}

The above is the detailed content of Summary of CSS usage skills. For more information, please follow other related articles on the PHP Chinese website!