在製作頁面的時候，經常會遇到文字需要居中的情況，這時候，只要設定下文字的line-height屬性等於包裹該文字的元素的高度即可讓文字居中顯示了，先來看看這個現象。
1doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>行高
title
>
6<
style
type
="text/css"
>
7.line-height-demo
12style
>
13head
>
14<
body
>
15<
div
class
="line-height-demo"
>
16這是乙個測試行高的文字
預設情況下，文字頂在了div的左上角，現在設定下文字的line-height屬性
這時候可以看到文字神奇般的居中了，這是為什麼呢？要知道原因，需要弄懂line-height這個屬性是什麼以及它所表示的含義，line-height屬性用於設定行間距，就是行與行之間的距離，一般稱為行高，更官方一點的解釋為文字行的基線間的距離，這裡有個名詞需要解釋下，我想你應該猜到了，沒錯，就是基線。那麼什麼又是基線呢？看看下面這張
印象很深吧，就是小學學習拼音時用的四線三格，這個模板跟將要介紹的line-height原理的模板非常的類似。
根據上面的圖，可以很容易的得出以下的等價關係
行高=兩行文字之間的基線間的距離=文字頂線到文字的基線+文字的基線到文字的底線+一倍行距=文字的頂線+文字的底線+一倍行距（上面0.5倍+下面0.5倍）
既然文字的上下各有0.5倍的行距，那麼我們的文字自然而然的就被夾在中間的位置了，這也說明了為什麼設定文字的行高等於包裹該文字的元素高度之後，文字就居中了。
筆記 學習CSS布局06 box sizing
人們慢慢的意識到傳統的盒子模型不直接，所以他們新增了乙個叫做box sizing的css屬性。當你設定乙個元素為box sizing border box 時，此元素的內邊距和邊框不再會增加它的寬度。這裡有乙個與前一頁相同的例子，唯一的區別是兩個元素都設定了box sizing border box...
學習筆記06
do while 水仙花 從100到999 各個位數的立方和相加等於這個數本身就是乙個水仙花數 include intmain void i while i 999 return0 pow 用來計算以x為底的y次方值 include 上述式子可改為 if pow a,3 pow b,3 pow c,...
CSS的ul與li樣式學習
ul和li列表是使用css布局頁面時常用的元素。在css中，有專門控制列表表現的屬性，常用的有list style type屬性 list style image屬性 list style position屬性和list style屬性。一 list style type屬性 list style ...