html與css之第四章行內盒模型和文字樣式

什麼是行內盒模型

行內盒模型指的是行內元素的盒模型，行內盒模型指的是如何排版行內元素的一套規則。

行內元素和塊級元素的不同

先看可替換行內元素：文字

那在有替換元素的情況下呢？

同時我們看到和文字並不是對齊的，他們之間有一小點差距。為什麼呢？因為行內元素預設都是基線對齊的。可替換元素它沒有基線，那怎麼辦呢？它就會去找文字的基線。行框被撐大了所以這行文字距上一行文字之間的距離也被放大了。

如果我們想讓文字和在垂直方向上對齊該怎麼辦呢？

使用乙個叫做vertical-align的屬性。vertical-align表示垂直對齊方式，vertical-align只能加給替換元素！！！！它有這樣幾個值：

vertical-align：

middle: 文字的中線和替換元素的高的一半對齊

top: 的頂部和文字的行高最頂部對齊

bottom：的底部和文字的行高最底部對齊

單行不同文字大小、行高對行內盒模型的影響

若行內盒模型裡只有文字這一種元素且同一行裡文字的大小不一致，則行框大小等於line-height最大的行內元素。且行盒裡的文字預設是基線對齊的。

文字縮排樣式text-indent

text-indeng:值；

text-indent的值的單位可以是px也可以是em。

推薦使用em。

文字對齊格式text-align

設定行內元素在父級中的對齊方式。

text-align: left center right justify;

left：左對齊，預設。

center：居中對齊。

right: 右對齊。[並不會打亂文字順序]

justify：兩端對齊。

文字裝飾text-decoration

text-decoration:

none[預設，沒有裝飾線]

underline[下劃線]

overline文字上的一條線

line-through[貫穿線或者叫刪除線]，如果只是向使用者展示效果使用overline而不是標籤。

css樣式行內樣式使用style屬性引入css樣式 style屬性應用內部樣式 css 寫在枯藤老樹昏鴉小橋流水人家古道西風瘦馬夕陽西下斷腸人在天涯外部樣式 css 儲存在擴充套件名為.css的樣式表中 html檔案引用擴充套件名為.css的樣式表。one.css p 枯藤老樹昏鴉 ...

一.引入樣式 1.行內樣式表 2.內部樣式表在head標籤裡面,title標籤下面優點方便在同頁面中修改樣式缺點不利於在多頁面間共享復用及維護，對內容與樣式的分離也不夠徹底 3.外部樣式表嵌入式匯入式嵌入式和匯入式的區別 1.標籤屬於xhtml，import是屬於css2.1 2.使用鏈...

1.盒子模型頁面元素大小邊框與其他元素的距離 2.定位機制文件流浮動定位層定位頁面上區域導航列表段落，都可以是盒子 1.組成元素 1.content內容 2.height高度 3.width寬度 4.padding內邊距 padding left 40px padding righ...

html與css之第四章 行內盒模型和文字樣式