CSS layout style: The essence of CSS is layout, not style--three

Third day text-related styles
1. Units that are easily confused or forgotten
More interesting phenomenon: foreign designers like to use EM, percentages, keywords (small, xx-small, etc.) to set the font size of the Web page, the domestic like with PX and PT (note, if the page is used as a unit of EM, IE6 will appear a bug, you can specify any one percentage to resolve)
The browser default font size is 16px
In the Chinese window system, ie browser default Chinese font is the song or the new song body, English is Arial, other browsers are unknown (new browsers can specify the page down font, that is, fonts can be configured), the definition of font-family, as far as possible to spare several fonts, Because the user's operating system may not contain your defined font, such as: font-family: "Song Body", Arial,helvetica,sans-serif;
Xx-small (=9PX), X-small (=11px), Medium ( -16PX), Large (=19px), X-large (=23px), Xx-large (=27PX)
1em (= 100%), 0.5em (= 50%)
A 2em or 200% unit refers to the font size of twice times the parent element and, if the parent element has no font size, automatically inherits the font size of the ancestor element up.
The meaning of the font:italicsmall-caps bold 12px/1.6em is: text is italic, uppercase, bold, font size is 12 pixels, row height is 1.6 times times the font size, the font is Arial.
2) serif and Sans-serif
2-1) serif: Serif font, the more common line fonts are Georgia, Garamond, Times New Roman, Chinese song and so on. Serif fonts are very readable, so the most used place is the text of a publication or print that is in the form of a large piece of text.
2-2) Sans-serif: Non-serif fonts (sans not meant in "French"), common sans-i serif fonts have trebuchet MS, Tahoma, Verdana, Arial, Helvetica, Chinese XXFarEastFont-TW, official script, etc. No liner font is more smooth, the line is generally uniform thickness. More suitable for use as WordArt, headings, and so on. Because no serif font is usually thicker and more uniform, so in small font display, readability will be reduced, easy to cause visual fatigue.
The difference between the specific serif font and the non-liner font see: Click to open the link
3) Layout Alignment
3-1 is easier in the table by setting the Align "left,right,center,justify" alignment in the cell, or valign "top,bottom,middle,baseline", etc.
3-2) Layout Center
Text-align in the middle of the layout, often found that the text is centered, but the picture is not centered phenomenon, ie does not have this problem. Resolve this problem often with margin set auto property to resolve, as follows:
body{Text-align:center;}
div{margin-left:auto;margin-right:auto;width:60%}
3-3) Vertical Layout
Vertical-align can only be defined for cell or image display, all for text alignment, you need to make display:table-cell, but IE does not support Table-cell, So you can use line-height and height to solve the vertical alignment of IE text below
A) text alignment to the middle method such as Firefox:
Div{vertical-align:bottom;display:table-cell}
b) compatible with IE solutions:
DIV{LINE-HEIGHT:6EM;HEIGHT:6EM}
4 What row height is best for reading
Browser default is 120%, the most suitable is 160%~180%
Line-height are often ineffective in Firefox when doing distance stretching, so it is recommended to use a more secure padding and margin
5) Font Color
The 16-in-system shorthand is a shorthand for 16 in the system, such as #f00, equal to #ff0000; #112233, equal to #123
In addition to hexadecimal, abbreviated 16, English name, RGB, percent RGB, CSS3 also adds 3 description colors:
A) RGBA, that is, the RGB based on the addition of alpha channel, for Transparent
b) Hsl:h: Hue, S: saturation, L: Brightness, COLOR:HSL (0,100%,100%) indicates red
c) HSLA: Add alpha channel on HSL basis
PS: Center layout is more commonly used, but also more important. It is common to use the parent div relative property, the parent tag left and top set to 50%, and then with negative margin can be implemented. You can access the relevant information
This article links http://www.cxybl.com/html/wyzz/CSS/20121119/33952.html