Collection of top classic and commonly used CSS properties_Experience exchange

Align text on both ends:

Copy code The code is as follows:

text-align:justify;
text-justify:inter-ideograph;

Clear float:

Copy code The code is as follows:

.clear{clear:both;line-height:0;height:0;font-size:0;}

Clear floating pseudo-class:

Copy code The code is as follows:

.clearfix: after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}

Set to prevent words from breaking

Copy code U> The code is as follows:

word-break : keep-all

Characters wrap

Copy code The code is as follows:

word-break:keep -all;word-break:break-all;word-wrap:break-word

Use line-height to center vertically

Copy code a> The code is as follows:

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

Clear container float

Copy code The code is as follows:

#main {overflow:hidden;}

Don’t let links wrap

Copy code The code is as follows:

a {white-space:nowrap;}

Always tell Firefox to show scroll bars

Copy code The code is as follows:

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

Center the block element horizontally

Copy code The code is as follows:

body, html {min-height:101%;} or margin:0 auto;

Hide the scroll bar of Explorer textarea

Copy code a> The code is as follows:

textarea {overflow:auto;}

Settings Print pagination

Copy code The code is as follows:

h2 {page-break-before:always ;}/*Set paging when printing web pages*/

Remove the dotted box on the link

Copy code The code is as follows:

a,area { blr:expression(this.onFocus=this.blur()) }
:focus { -moz-outline- style: none; }

The simplest CSS reset

Copy code The code is as follows:

* {margin: 0; padding: 0}/*Use this attribute with caution. Although it can eliminate the default attribute, it has an impact on browser rendering and is not good in semantic expression. . */

Print text after the image is entered requires attributes

Copy code The code is as follows:

img{vertical-align:top;}

Transparent attribute

Copy code The code is as follows:

filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;
cursor:hand;

Change the mouse into the shape of a hand

Copy code The code is as follows:

cursor:hand;