精通CSS與HTML設計模式 第十二章(對齊內容)

2022-03-15 05:07:31 字數 946 閱讀 9576

一、文字縮排

可以使用乙個text-indent的正值來縮排文字首行。

text-indent:value

只適用於終端塊狀元素,不適用於結構化塊狀元素和內斂元素。預設的情況是text-indent被子元素繼承。這表示你可以將text-indent賦值給乙個結構化塊狀元素,所有的子終端塊狀元素都將繼承你賦給text-indent的值。

二、懸掛縮排

只是在text-indent的基礎上賦上乙個負值,然後設定乙個padding-left此時首行會在padding-left的基礎上向左縮排text-indent負值距離

三、水平對齊的內容

text-align:在終端塊狀元素中對齊文字

left(居左),center(居中),right(居右),justify(兩邊對齊)

適用終端塊狀元素,不適用內聯元素。因為內聯元素沒有寬度,包裹在內容,無法居中

四、垂直對齊內容

詳見:

五、垂直偏移

看了第四點以後,我們都知道基線的位置,

vertical-align:1em  在基線位置向上偏移1個字型高度

vertical-align:-0.75 在基線位置向下偏移0.75個字型高度

ƒ(x)=

∑n=0

∞anx (n-12)

《精通CSS與HTML設計模式》學習筆記1

1 css的主要內容 1 css的常用屬性主要有45種 2 html的四種元素 內聯 inline 內聯塊狀 inline block 塊狀 block 3 css的五種定位方式 靜態 相對 絕對 固定 浮動 2 css的優先順序 從高到低 1 使用 inportant的規則 2 嵌在style屬性...

《精通CSS與HTML設計模式》學習筆記2

1 css的選擇符 selectors 1 型別 類和id選擇符 a.型別 是指 html元素,用來選擇某一類的所有元素 b.類 用來選擇所有相同類名的元素 c.id 用來選擇唯一指定id的元素 型別不區分大小寫,而類和id是區分大小寫,建議都使用小寫。模式 type class id 2 定位和群...

精通CSS與HTML設計模式 第十一章(分割內容)

一 分割 leftter spacing 為字母間新增空格 word spacing 為單詞件新增空格 中文單詞不識別,因為中文沒有單詞的概念 text indent 縮排終端塊狀元素的首行 text align justify 實現兩端對齊的效果 注 margin top margini bott...