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

2022-03-15 05:07:31 字數 1782 閱讀 8376

一、分割

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賦值給乙個結構化塊狀元素,所有的子終端塊狀元素都將繼承...