利用text-align:justify完成單行文字兩端對齊
作者:admin 日期:2009-01-18
line-height屬性的繼承問題
作者:admin 日期:2008-07-30
程序代碼p {
line-height:17px;
}
</style>
<div class="mdse-detail">
<p>
<strong style="font-size:30px">
品牌：XZX<br />
市場價：145元<br />
顏色：黑色<br />
面料：棉<br />
尺碼：S M L<br />
衣長：S 89 M 90 L 91<br />
肩寬：S 35 M 36 L 37<br />
胸圍：S 88 M 92 L 96<br />
下擺：S 104 M 108 L 112<br />
袖長：S 17 M 17.5 L18<br />
由於測量方法不同，誤差在2CM左右！
</strong>
</p>
</div>
你會發現上面例子的文字會重疊在一起！這是什麼原因呢？
由於.detail-content 中的 p 元素繼承了默認設置的全局樣式 line-height:17px，而自定義區塊又是由商家自定義，其內字體被設置為了 font-size:30px;（可能為任意值），根據 Inline formatting model，得知該文字的 line-box 高為 17px，多出的字體部分上下溢出，所以會出現字體重疊的現象。
那這個問題如何解決呢？
解決方案：我們給 .mdse-detail 下的 p 元素設定樣式屬性 line-height:1.4。
為什麼解決方案裡的 1.4 不帶單位？
元素的 line-height 屬性值會繼承父元素（或祖先元素）的 line-height 屬性值，如果屬性值有單位，則繼承的值是換算後具體的 px 值而非原始的值（比如：em、%），而如果屬性值沒有單位，則瀏覽器會繼承數值（無單位），然後根據該元素的 font-size 值重新解析得到新的 line-height 值。這個和 table 的 tr 設置 display 屬性有一點點類似（tr.style.display = 」;，IE 顯示 block，而 Firefox 等標準瀏覽器顯示 table-row）。
還有另外一個相對低效的方法，但也不失為一個快捷的解決方案：
程序代碼line-height:140%;
}
參考閱讀：《Unitless line-heights》http://www.blueidea.com/tech/web/2008/6014.asp
個人會建議使用em這個單位來解決，例如：1.6em，另外關於繼承的問題，始於文字屬性的部份都是會繼承的，好比文字大小、字型、顏色、行距、字元間距等，這些都是會繼承的，其他屬性是不可以繼承的，好比寬度，一個DIV裡面又包了幾個DIV，外面DIV(父)設定寬度100PX，裡面(子)也繼承為100PX，這樣不就天下大亂了！
CSS的十八般技巧
作者:admin 日期:2006-12-01
用CSS在IE中顯示透明PNG圖像
作者:admin 日期:2006-10-19
如何正確實作出固定寬度且置中的版型
作者:admin 日期:2006-08-09
CSS 的 ID 和 CLASS 有什麼不同？
作者:admin 日期:2006-08-09
CSS 排版觀念：Position
作者:admin 日期:2006-08-09
CSS 排版觀念：Box Model
作者:admin 日期:2006-08-09
CSS 排版有一個很重要的觀念： Box Model 。它描述了元素之間的彼鄰關係，同時也左右了我們是否能夠成功透過 CSS ，完成整個頁面的呈現。
Box Model 的意思是說，每一個元素我們都可視它為一個 Box 。一個 Box 由以下屬性組成：margin 、 padding 、 border 、 content 。一個 Box 的實際寬度 (高度) 是由 padding + border + width (height) 所組成，如下圖 (取自 MSDN)：
所以一般我們指定的 width 和 height 是 content 的寬和高，而沒有包含 border 和 padding 。換句話說，一個元素真正佔用的視覺空間，應該是 content + padding + border ，這是標準的 CSS 規範。
CSS 排版觀念：Float
作者:admin 日期:2006-08-09
CSS 排版觀念：Float
如果說浮動 (float) 是 CSS 排版的重要技巧之一，實在一點也不為過；很多著名的 CSS 版型都會用到浮動技巧。本文就來介紹浮動所需要注意的地方，以及可能會碰到的問題。
浮動是設定元素的 float 屬性，我們能設定向左 (left) 或向右 (right) 浮動。浮動基本上會使得元素在有足夠的空間時，往父元素的左邊或右邊靠緊。接著原本跟在這個元素後面的其他元素，就會自動往上跑 (不過這裡會有部份要考量的地方，稍後再談)。當元素被設定浮動時，會自動變成區塊顯示元素 (display: block) ，這時候我們就可以設定元素的 width 和 height 了。
不過要注意一點：當我們把 position 設為 absolute 時，浮動會失效。
浮動會因為元素先後順序而有所影響，例如我們有 A 、 B 兩個區塊顯示元素如下圖，其中虛線部份的內部為父元素的內容區：
word-break屬性,實現換行
作者:admin 日期:2006-04-06
- 1
