縮進(jìn)和水平對(duì)齊
縮進(jìn)文本
將Web頁(yè)面上一個(gè)段落的第一行縮進(jìn)使用text-indent
text-indent<length>|<percentage>|inherit}
其值可以是負(fù)值酌泰,負(fù)值能夠?qū)崿F(xiàn)懸掛縮進(jìn)的效果.
可以使用百分?jǐn)?shù)劫侧,為相對(duì)父元素的縮進(jìn)寬度,比如10% 即縮進(jìn)其父元素寬度的10%
該屬性可以繼承
水平對(duì)齊
text-align
屬性值包含 left | center | right | justify | inherit
justify是兩段對(duì)齊
垂直對(duì)齊
行高line-height
line-height值和字體大小之差就是行間距
line-height
屬性可以繼承
可以指定一個(gè)數(shù)横漏,來(lái)作為縮放因子,比如p{line-height:1}
指定一個(gè)數(shù)時(shí),縮放因子將是繼承值而不是計(jì)算值桶良,這個(gè)數(shù)會(huì)應(yīng)用到該元素及所有子元素,所以各個(gè)子元素都根據(jù)自己的font-size來(lái)計(jì)算line-height
垂直對(duì)齊文本
vertical-align:baceline|sub|super|top|text-top|middle|bottom|text-bottom|<percentage>|<length>|inherit
- baceline基線對(duì)齊
一個(gè)元素的基線與其父元素對(duì)齊沮翔,瀏覽器默認(rèn)基線對(duì)齊
*如果一個(gè)元素沒(méi)有基線陨帆,比如圖片或者表單輸入元素,或者其他替換元素采蚀,那么該元素底端與其父元素的基線對(duì)齊 *
- 上標(biāo)和下標(biāo)
vertical-align:sub 會(huì)生聲明使一個(gè)元素變?yōu)橄聵?biāo)疲牵,其相對(duì)于父元素基線降低,super則相反榆鼠,該屬性不會(huì)改變文字大小纲爸,需要使用finet-size調(diào)整 - 底端對(duì)齊
vertical-align:bottom 將元素行內(nèi)框的底端與行框底端對(duì)齊。如果是text-bottom則只針對(duì)文本妆够,對(duì)于替換元素?zé)o效 - 頂端對(duì)齊
vertical-align:top text-top 分別為行的頂端對(duì)齊和文本的頂端對(duì)齊 - 居中對(duì)齊
- middle 往往應(yīng)用于圖像识啦,把行內(nèi)元素框的中點(diǎn)于父元素基線上方0.5ex處的一個(gè)點(diǎn)對(duì)齊,
- 百分?jǐn)?shù)
使用百分?jǐn)?shù)把元素基線相對(duì)父元素升高或降低指定的量责静,是相對(duì)于line-height設(shè)置的 - 長(zhǎng)度對(duì)齊
vertical-align:5px 會(huì)使元素上升5px反之下降
所有垂直對(duì)齊元素的都會(huì)影響行高袁滥,根據(jù)行框的描述,其高度要包含最高行內(nèi)框的頂端和最低行內(nèi)框的底端
字間隔和字母間隔
字間隔 word-spacing:normal|<length>|inherit
*定義:字是任何非空白字符組成的串并由某種空白符包圍灾螃。因此采用像型文字或者非羅馬書寫的字體沒(méi)法指定字間隔题翻。
字母間隔 letter-spacing<length>
如果為letter-spacing指定一個(gè)寬度值,則不受text-align的影響腰鬼,如果為normal則使用text-align間隔可能會(huì)改變嵌赠。
文本轉(zhuǎn)換text-transform:uppercase|lowercase|capitalize|none|inherit
- uppercase 和lowercase將文本轉(zhuǎn)換成全大寫或全小寫。
- capitalize 將單詞首字母大寫
文本裝飾text-decoration:none|underline|overline||line-though|blink|inherit
- underline 文本下劃線
- overline 文本上劃線
-line-through 文本中劃貫穿線
-blink閃爍
text-decoration不可以繼承
文本陰影 text-shadow:color||<length>||<length>||<length>
text-shadow:green 5px 0.5em
陰影顏色 陰影與文本的偏移距離兩個(gè)length(右 下) 模糊半徑length(可選)
處理空白符white-space:normal|nowrap|pre|pre_wrap|pre-line|
- pre:空白字符不會(huì)被忽略
- nowrap:防止文本換行熄赡,除非使用
-pre-wrap:保留空白符序列并正常換行
-pre-line:合并空白符序列姜挺,保留換行符
文本方向
direction:ltr|rtl|inherit
默認(rèn)ltr從左到右