一、分割
leftter-spacing 為字母間新增空格
word-spacing 為單詞件新增空格(中文單詞不識別,因為中文沒有單詞的概念)
text-indent 縮排終端塊狀元素的首行
text-align: justify 實現兩端對齊的效果
注:margin-top ,margini-bottom,text-indent,text-align 只適用於塊狀元素
二、塊狀化
簡而言之,塊狀化是指將內聯元素顯示為塊狀元素,使內聯元素也可以使用margin,padding,text-align,width,height,border 等許多塊狀元素的樣式
例:
這是乙個顯示為塊狀的內聯元素。 它的第一行是縮排的,並且它有抵消的垂直外邊距。抵消的垂直外邊距。抵消的垂直外邊距。抵消的垂直外邊距。抵消的垂直外邊距。抵消的垂直外邊距。抵消的垂直外邊距。抵消的垂直外邊距。
三、非包裹
wite-space: nowrap的規則阻止文字被包裹,可以將wite-space:nowarp應用到任何你不像被包裹的內聯元素值描述
normal
預設。空白會被瀏覽器忽略。
pre空白會被瀏覽器保留。其行為方式類似 html 中的標籤。
nowrap
文字不會換行,文字會在在同一行上繼續,直到遇到
標籤為止。
pre-wrap
保留空白符序列,但是正常地進行換行。
pre-line
合併空白符序列,但是保留換行符。
inherit
規定應該從父元素繼承 white-space 屬性的值。
四、填充內容
內聯元素:padding-left和padding-right填充左右兩側空白,line-height來改變每一行的高度。不可以padding-top和padding-bottom來填充
塊狀元素:display:block 使用padding-left,padding-right,padding-top,padding-bottom來填充上下左右的空白
五、內聯空白
使用乙個空的 讓其margin-left:2em 使其具有乙個可控的空白
六、 斷行
指的是行與行之間的距離,
將內容移至新的一行,換行後的高度,由行中內容決定,
雙重換行 :
第乙個控制換行,第二換行賦值樣式來控制額外的空格數量
斷行: 可以插入乙個空的並使其為diplay:block顯示為塊狀元素,通過margin-top:value 來控制換行高度
七、內聯水平線
通過border,backgound來設定水平線
注:background-position 控制背景影象從元素的x,y的起始位置,這樣其實可以結合js讓乙個影象動起來
《精通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設計模式 第十二章(對齊內容)
一 文字縮排 可以使用乙個text indent的正值來縮排文字首行。text indent value 只適用於終端塊狀元素,不適用於結構化塊狀元素和內斂元素。預設的情況是text indent被子元素繼承。這表示你可以將text indent賦值給乙個結構化塊狀元素,所有的子終端塊狀元素都將繼承...