道岔示意图:CSS单位和CSS默认值大全 - TERRY的技术日志 - CSDN博客

这两天我对css做了较为深入的研究，更体会到了css的强大，由于我不是美工，所以我主要深入其中原理和一些常用的CSS。CSS默认值em
相对长度单位。相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。ex
相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。px
像素（Pixel）。相对长度单位。
像素是相对于显示器屏幕分辨率而言的。譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。pt
点（Point）。绝对长度单位。em vs pxem指字体高，任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。em有如下特点：
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。 长度单位优化方法：1. body选择器中声明Font-size=62.5%；2. 将你的原来的px数值除以10，然后换上em作为单位；简单吧，如果只需要以上两步就能解决问题的话，可能就没人用px了。经过以上两步，你会发现你的网站字体大得出乎想象。因为em的值不固定，又会继承父级元素的大小，你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em，但如果p属于content的子级的话，p的字体大小就不是12px，而是1.2em=1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em，这个em值继承其父级元素body的大小，也就是16px * 62.5% * 1.2=12px, 而p作为其子级，em则继承content的字体高，也就是12px。所以p的1.2em就不再是12px，而是14.4px。3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明，也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。4.以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。解决方法：只需在body选择器中把62.5%换成63%就能正常显示了。HTML的CSS默认值view plaincopy to clipboardprint?
01.html, address,   
02.blockquote,   
03.body, dd, div,   
04.dl, dt, fieldset, form,   
05.frame, frameset,   
06.h1, h2, h3, h4,   
07.h5, h6, noframes,   
08.ol, p, ul, center,   
09.dir, hr, menu, pre   { display: block }   
10.li              { display: list-item }   
11.head            { display: none }   
12.table           { display: table }   
13.tr              { display: table-row }   
14.thead           { display: table-header-group }   
15.tbody           { display: table-row-group }   
16.tfoot           { display: table-footer-group }   
17.col             { display: table-column }    
18.colgroup        { display: table-column-group }   
19.td, th          { display: table-cell; }   
20.caption         { display: table-caption }   
21.th              { font-weight: bolder; text-align: center }   
22.caption         { text-align: center }   
23.body            { margin: 8px; line-height: 1.12 }   
24.h1              { font-size: 2em; margin: .67em 0 }   
25.h2              { font-size: 1.5em; margin: .75em 0 }   
26.h3              { font-size: 1.17em; margin: .83em 0 }   
27.h4, p,   
28.blockquote, ul,   
29.fieldset, form,   
30.ol, dl, dir,   
31.menu            { margin: 1.12em 0 }    
32. 
33.h5              { font-size: .83em; margin: 1.5em 0 }   
34.h6              { font-size: .75em; margin: 1.67em 0 }   
35.h1, h2, h3, h4,   
36.h5, h6, b,   
37.strong          { font-weight: bolder }   
38.blockquote      { margin-left: 40px; margin-right: 40px }   
39.i, cite, em,   
40.var, address    { font-style: italic }   
41.pre, tt, code,   
42.kbd, samp       { font-family: monospace }   
43.pre             { white-space: pre }   
44.button, textarea,   
45.input, object,    
46.select          { display:inline-block; }   
47.big             { font-size: 1.17em }   
48.small, sub, sup { font-size: .83em }   
49.sub             { vertical-align: sub }    
50.sup             { vertical-align: super }   
51.table           { border-spacing: 2px; }   
52.thead, tbody,   
53.tfoot           { vertical-align: middle }   
54.td, th          { vertical-align: inherit }   
55.s, strike, del  { text-decoration: line-through }   
56.hr              { border: 1px inset }   
57.ol, ul, dir,   
58.menu, dd        { margin-left: 40px }   
59.ol              { list-style-type: decimal }   
60.ol ul, ul ol,   
61.ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }   
62.u, ins          { text-decoration: underline }   
63.br:before       { content: "\A" }   
64.:before, :after { white-space: pre-line }    
65. 
66.center          { text-align: center }   
67.abbr, acronym   { font-variant: small-caps; letter-spacing: 0.1em }   
68.:link, :visited { text-decoration: underline }   
69.:focus          { outline: thin dotted invert }   
70. 
71./* Begin bidirectionality settings (do not change) */   
72.BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }   
73.BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }   
74. 
75.*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }   
76.*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }   
77. 
78.@media print {   
79.  h1            { page-break-before: always }   
80.  h1, h2, h3,   
81.  h4, h5, h6    { page-break-after: avoid }   
82.  ul, ol, dl    { page-break-before: avoid } 
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/terryzero/archive/2009/08/23/4475264.aspx