縮進(jìn)和水平對(duì)齊
縮進(jìn)
text-indent:length | percentage | inherit
將Web頁(yè)面上一個(gè)段落的第一行縮進(jìn)簸州,用于塊級(jí)元素。
水平對(duì)齊
text-align:left | center | right | justify | inherit
用于塊級(jí)元素
justify是兩端對(duì)齊文本干毅,它將使文本行的兩端都放在父元素的邊界上,調(diào)整字符間距泼返,使每行一樣長(zhǎng)硝逢。
這個(gè)只會(huì)控制塊級(jí)元素中的行內(nèi)元素,要將塊級(jí)元素或表元素居中绅喉,要通過(guò)在這些元素上適當(dāng)?shù)卦O(shè)置左渠鸽、右外邊距來(lái)實(shí)現(xiàn)。
垂直對(duì)齊
行高
line-height屬性是指文本行基線(xiàn)之間的距離柴罐,而不是字體的大小徽缚,它確定了將各個(gè)元素框的高度增加或減少多少。
line-height控制了行間距丽蝎,這是文本行之間超出字體大小的額外空間猎拨。換句話(huà)說(shuō),line-height值和字體大小之差就是行間距屠阻。
值:(length) | (percentage)| (number)| normal | inherit
其中百分比是相對(duì)于元素的字體大小而言的。
當(dāng)一個(gè)塊級(jí)元素從另一個(gè)元素繼承l(wèi)ine-height時(shí)额各,問(wèn)題會(huì)變得更為復(fù)雜国觉。line-height值從父元素繼承時(shí),要從父元素計(jì)算虾啦,而不是在子元
素上計(jì)算麻诀。這種情況會(huì)發(fā)生在父元素的line-height是em,percentage等值時(shí)傲醉。兩種結(jié)局辦法蝇闭,一種是為每個(gè)元素都寫(xiě)line-height,不使用繼承硬毕。另一種指定數(shù)字值呻引,這個(gè)值將是一個(gè)相對(duì)font-size的縮放因子,這個(gè)值會(huì)直接繼承而不是繼承計(jì)算值吐咳。
#div4{
font-size: 20px;
//line-height:1em;
line-height:1;
p{
text-indent: 1.5em;
text-align: center;
font-size: 30px;
//when div4's line-height is 1em, here we seem to inherit 1em. But actually, we inherit a computed value from div4 which is 20px
//when div4 line-height is 1, we inherit 1,and compute it here using self's font-size.
line-height:inherit;
}
}
構(gòu)造文本行
文本行中的每個(gè)元素都會(huì)生成一個(gè)內(nèi)容區(qū)逻悠,這由字體的大小確定元践。這個(gè)內(nèi)容區(qū)則會(huì)生成一個(gè)行內(nèi)框(inline box),如果不存在其他因素童谒,這
個(gè)行內(nèi)框就完全等于該元素的內(nèi)容區(qū)单旁,由line-height產(chǎn)生的行間距就是增加或減少各行內(nèi)框高度的因素之一。
垂直對(duì)齊文本
vertical-align
baseline | sub | super | top | text-top | middle | bottom | text-bottom | (percentage) | (length) | inherit
在CSS中饥伊,vertical-align屬性只應(yīng)用于行內(nèi)元素和替換元素象浑,如圖像和表單輸入元素。vertical-align屬性不能繼承琅豆。
vertical-align不影響塊級(jí)元素中內(nèi)容的對(duì)齊融柬。不過(guò),可以用它來(lái)影響表單元格中元素的垂直對(duì)齊趋距。
字間隔和字母間隔
字間隔
word-spacing:(length)| normal | inherit
這個(gè)只對(duì)英文管用粒氧,詞之間的距離。
字母間隔
letter-spacing:(length) | normal | inherit
文本轉(zhuǎn)換
text-transform:uppercase | lowercase | capitalize | none | inherit
文本裝飾
text-decoration:none | [underline || overline || line-through || blink] | inherit
處理空白符
white-space:normal | nowrap | pre | pre-wrap | pre-line | inherit
使用這個(gè)屬性节腐,可以影響瀏覽器處理字之間和文本行之間的空白符的方式外盯。從某種程度上講,默認(rèn)的XHTML處理已經(jīng)完成了空白符處理:它會(huì)把所有空白符合并為一個(gè)空格翼雀。所以在Web瀏覽器中顯示時(shí)饱苟,各個(gè)字之間只會(huì)顯示一個(gè)空格,而且忽略元素中的換行狼渊。
如果white-space為pre箱熬,則不會(huì)忽略元素中的換行和空格。
與之相對(duì)的值是nowrap狈邑,它會(huì)防止元素中的文本換行城须,除非使用了一個(gè)br元素。
值 pre-line normal nowrap pre pre-wrap
空白符 合并 合并 合并 保留 保留
換行符 保留 忽略 忽略 保留 保留
自動(dòng)換行 允許 允許 不允許 不允許 允許