CSS單位和CSS預設值大全

這兩天我對css做了較為深入的研究，更體會到了css的強大，由於我不是美工，所以我主要深入其中原理和一些常用的CSS。

 

CSS預設值

em
相對長度單位。相對於當前對象內文本的字型尺寸。
如當前對行內文本的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。

ex
相對長度單位。相對於字元“x”的高度。此高度通常為字型尺寸的一半。
如當前對行內文本的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。

px
像素（Pixel）。相對長度單位。
像素是相對於顯示器螢幕解析度而言的。譬如，WONDOWS的使用者所使用的解析度一般是96像素/英寸。而MAC的使用者所使用的解析度一般是72像素/英寸。

pt
點（Point）。絕對長度單位。

em vs px

em指字型高，任意瀏覽器的預設字型高都是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預設值

html, address,<br />blockquote,<br />body, dd, div,<br />dl, dt, fieldset, form,<br />frame, frameset,<br />h1, h2, h3, h4,<br />h5, h6, noframes,<br />ol, p, ul, center,<br />dir, hr, menu, pre { display: block }<br />li { display: list-item }<br />head { display: none }<br />table { display: table }<br />tr { display: table-row }<br />thead { display: table-header-group }<br />tbody { display: table-row-group }<br />tfoot { display: table-footer-group }<br />col { display: table-column }<br />colgroup { display: table-column-group }<br />td, th { display: table-cell; }<br />caption { display: table-caption }<br />th { font-weight: bolder; text-align: center }<br />caption { text-align: center }<br />body { margin: 8px; line-height: 1.12 }<br />h1 { font-size: 2em; margin: .67em 0 }<br />h2 { font-size: 1.5em; margin: .75em 0 }<br />h3 { font-size: 1.17em; margin: .83em 0 }<br />h4, p,<br />blockquote, ul,<br />fieldset, form,<br />ol, dl, dir,<br />menu { margin: 1.12em 0 } </p><p>h5 { font-size: .83em; margin: 1.5em 0 }<br />h6 { font-size: .75em; margin: 1.67em 0 }<br />h1, h2, h3, h4,<br />h5, h6, b,<br />strong { font-weight: bolder }<br />blockquote { margin-left: 40px; margin-right: 40px }<br />i, cite, em,<br />var, address { font-style: italic }<br />pre, tt, code,<br />kbd, samp { font-family: monospace }<br />pre { white-space: pre }<br />button, textarea,<br />input, object,<br />select { display:inline-block; }<br />big { font-size: 1.17em }<br />small, sub, sup { font-size: .83em }<br />sub { vertical-align: sub }<br />sup { vertical-align: super }<br />table { border-spacing: 2px; }<br />thead, tbody,<br />tfoot { vertical-align: middle }<br />td, th { vertical-align: inherit }<br />s, strike, del { text-decoration: line-through }<br />hr { border: 1px inset }<br />ol, ul, dir,<br />menu, dd { margin-left: 40px }<br />ol { list-style-type: decimal }<br />ol ul, ul ol,<br />ul ul, ol ol { margin-top: 0; margin-bottom: 0 }<br />u, ins { text-decoration: underline }<br />br:before { content: "/A" }<br />:before, :after { white-space: pre-line } </p><p>center { text-align: center }<br />abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em }<br />:link, :visited { text-decoration: underline }<br />:focus { outline: thin dotted invert } </p><p>/* Begin bidirectionality settings (do not change) */<br />BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }<br />BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override } </p><p>*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }<br />*[DIR="rtl"] { direction: rtl; unicode-bidi: embed } </p><p>@media print {<br /> h1 { page-break-before: always }<br /> h1, h2, h3,<br /> h4, h5, h6 { page-break-after: avoid }<br /> ul, ol, dl { page-break-before: avoid }