CSS常用屬性總結三

    ******* CSS 常用屬性 *********

 

【margin】

 

margin    檢索或設定物件頂邊的外延邊距 

margin-right      檢索或設定物件右邊的外延邊距 

margin-bottom     檢索或設定物件底部邊緣的外延邊距

 

argin：擷取或設定物件四邊的外延邊距。 

 

如果提供全部四個參數值，將依上、右、下、左的順序作用於四邊。 

如果只提供一個，將用於全部的四邊。 

如果提供兩個，第一個用於上、下，第二個用於左、右。 

如果提供三個，第一個用於上，第二個用於左、右，第三個用於下。 

內聯物件可以使用此屬性來設定左、右兩邊的外補丁；若要設定上、下兩邊的外補丁，必須先將物件表現為區塊層級或內聯區塊層級。 

外延邊距總是透明。

某些相鄰的margin會發生合併，我們稱為margin折疊： 

 

margin折疊常規認知： 

margin只發生在塊級元素上； 

浮動margin發生折疊； 

設定了屬性overflow且值不為visible的塊級元素，將不與它的子元素發生margin折疊； 

絕對定位元素的margin不與任何margin發生折疊； 

根元素的margin不與其它任何margin發生折疊； 

 

auto： 值設定為相對邊的值 

： 以長度值定義外補白。可以為負值 

： 用百分比來定義外補白。可以為負值 

 

------------------------------------------ ------------------------------------------

 

**** ************************************************** ************************************************** *****

 

【padding】

 

padding            檢索或設定物件四邊的內部邊界     檢索或設定對象右邊的內部邊距 

padding-bottom     擷取或設定物件底邊的內部邊距 

paddingding-left       擷取或設定物件左邊的內部邊界 

 

如果提供全部四個參數值，將依上、右、下、左的順序作用於四邊。 

如果只提供一個，將用於全部的四邊。 

如果提供兩個，第一個用於上、下，第二個用於左、右。 

如果提供三個，第一個用於上，第二個用於左、右，第三個用於下。 

內聯物件可以使用此屬性來設定左、右兩邊的內補丁；若要設定上、下兩邊的內補丁，必須先將物件表現為區塊層級或內聯區塊層級。

 

： 用長度值來定義內補白。不允許負值 

： 用百分比來定義內補白。不允許負值 

 

------------------------------------------ ------------------

 

**************************** ************************************************** ***************************

 

【text】

 

text-transform          檢索或設定物件中的文字的大小寫入 

white-space             設定或擷取物件內空格的處理方式 

tab-size               設定或檢索當內容超過指定容器的邊界時是否斷行 

word-break              設定或擷取物件內文字的字內換行行為 

text-align            ign一行（包括區塊內只有一行文字的情況，此時既是第一行也是最後一行）

                                對齊方式 

word-spacing            檢索或設定物件中的單字之間的最小，最大和最佳間隙 

letter-spacing           或設定物件中的文字的縮排 

vertical-align          設定或擷取物件內容的垂直對其方式 

line-height            擷取或設定物件的行高。即字體最底端與字體內部頂端的距離 

 

--------------------------------- ----------------

 

letter-spacing：檢索或設定物件中的字元之間的最小，最大和最佳間隙。

 

該屬性將指定的間隔加到每個文字(包括單字內的每個字母)之後； 

letter-spacing不能套用於一行的開始和結束； 

 

normal：預設間隔

： 用長度值指定間隔。可以為負值。 

： 以百分比指定間隔。可以為負值。

 

---------------------------------------------- -------------------

 

line-height：檢索或設定物件的行高。即字體最底端與字體內部頂端的距離。 

 

預設值：normal

 

normal： 允許內容頂開或溢位指定的容器邊界。 

： 用長度值指定行高。可以為負值。 

： 以百分比指定行高，其百分比取值是基於字體的高度尺寸。可以為負值。 

： 以乘積因子指定行高。可以為負值。

 

---------------------------------------------- --------------

 

text-align ：設定或擷取物件中內容的水平對齊方式。

 

塊級元素的文本是一些堆疊的線框 

要使text-align 的justify 兩端對齊生效，需要在漢字間插入有空白，如空格； 

塊內的最後一行文本（包括區塊內僅有一行文字的情況，此時既是第一行也是最後一行）及被強制打斷的行，其兩端對齊需使用text-align-last； 

IE瀏覽器下，如果text-align -last 要生效，必須先定義text-align 為justify； 

單行兩端對齊效果變得比較簡單： 

 

li{overflow:hidden;width:200px;height:21px;text-align:hidden;width:200px;height:21px;text-align:hidden;width:200px;height:21px;text-align:hidden;width:200px;height:21px;text-align:hidden;width:200px;height:21px; text-align-last:justify;}

li:after{display:inline-block;overflow:hidden;width:100%;height:0;content:'';}

 

left: 內容左對齊。 

center： 內容居中對齊。 

right： 內容右對齊。 

justify： 內容兩端對齊。 

start： 內容對齊開始邊界。 （CSS3） 

end： 內容對齊結束邊界。 （CSS3） 

： 字串必須是單一字符，否則申明將無效。 （CSS3） 

match-parent： 這個值和 inherit 表現一致，只是該值繼承的 start 或 end 關鍵字是針對父母的 direction 值併計算的，計​​算值可以是 left 和 right 。 （CSS3） 

start end： 指定 start 對齊第一行和任何強制打斷的行；end 對齊所有剩餘的行不受 text-align-last 影響。

 

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++++++++++++++++++ +

 

要注意幾點： 

 

所有主流瀏覽器都支援text-align 的justify 屬性值； 

 

text-align一行，換句話說，如果區塊內只有一行文字（該行既是第一行也是最後一行），這時僅設定text-align:justify無法讓該行兩端對齊；

 

text-align- last 是用來處理區塊內的最後一行和強制打斷的行的，所以當要設定單行文字兩端對齊時，需使用text-align-last； 

 

非Firefox瀏覽器要使得兩端對齊生效，需在文字間插入空白，如空格（若一行僅有2個漢字，Firefox也需在間內插入空白）； 

 

Chrome23, Safari5.1.7, Opera12.5 尚不支援text-align- last； 

依據上述的點，要實現單行兩端對齊，可以走2個方向： 

 

由於所有瀏覽器都支援text-align 的justify 屬性值，但不全支援text-align-last，我們可以對非IE及IE7以上瀏覽器使用偽對象產生額外的內容（IE7及以下瀏覽器不支援偽對象，使用text-align-last處理），置於第二行並將其隱藏，這時第一行文字（即要對齊的那個單行文字）可使用text-align:justify來對齊 

 

支援text-align-last 的瀏覽器，如IE, Firefox使用text-align-last 處理，不支援的瀏覽器使用如上述方法處理； 

所以就目前情況來看，使用第一種方案是比較簡約的，可以輕易的相容IE5.5-10, Firefox, Chrome, Safari, Opera

 

++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++++++++++

 

text-align-last：設定或檢索一個區塊內的最後一行（包括區塊內只有一行文字的情況，這時既是第一行也是最後一行）

                       一行或第一行但後面緊接著強制換行，除非顯示的指定text-align 第一行對齊方式（值'start end'），否則text-align-last 將會覆蓋text-align； 

如果auto 值被指定，內容的對齊方式將依據text-align 的設定，除非text-align 設定為justify； 

作為IE的私有屬性之一，IE5.5率先實現了text-align-last ，後期被w3c採納成標準屬性； 

IE7及以下瀏覽器只實現了區塊內最後一行的對齊方式，沒有處理被強制打斷的行的對齊方式，從IE8開始，這兩種形式的行對齊都被支持； 

IE瀏覽器下，如果text-align-last 要生效，必須先定義text-align 為justify； 

 

auto： 無特殊對齊方式。 

left： 內容左對齊。 

center： 內容居中對齊。 

right： 內容右對齊。 

justify： 內容兩端對齊。 

start： 內容對齊開始邊界。 

end： 內容對齊結束邊界。

 

---------------------------------------------- -

 

text-indent： 擷取或設定物件中的文字的縮排。 

 

內聯物件要使用此屬性必須先使該物件表現為區塊層級或內聯區塊層級。 

hanging和each-line關鍵字緊接在縮排數值之後 

 

div{text-indent:2em each-line;}

 

 

 

用的長度。可以為負值。 

： 以百分比指定文字的縮排。可以為負值。 

each-line： 定義縮排作用在塊容器的第一行或內部的每個強制換行的首行，軟換行不受影響。 （CSS3） 

hanging： 反向所有被縮排作用的行。

 

---------------------------------------------- -------------------------------------------------- ---

 

text-transform ：檢索或設定物件中的文字的大小寫。

 

none： 無轉換 

capitalize：   將每個單字的第一個字母轉換成大寫 

uppercase：   將每個寫字成大寫- width：   將所有字元轉換成fullwidth形式。如果字元沒有相應的fullwidth形式，將保留原樣。這個值通常用於排版拉丁字元和數字等表意                    符號。

 

---------------------------------------------- -------------------------------------------------- ---------

 

vertical-align：設定或擷取內聯元素在行框內的垂直對其方式。

 

baseline： 將支援valign特性的物件的內容與基線對齊 

sub： 垂直對齊文字的下標 

super：垂直對齊文字的上標 

top：將支援物件頂端對齊 

text-top： 將支援valign特性的物件的文字與物件頂端對齊 

middle： 將支援valign特性的物件的內容與物件中間對齊 

middle： 將支援valign特性的物件的內容與物件中間對齊 

bottom： 將支援valign特性的物件的文字與物件底端對齊 

text-bottom： 將支援valign特性的物件的文字與物件頂端對齊 

： 以百分比指定由基線算起的偏移量。可以為負值。基線對於百分數來說就是0%。 

： 以長度值指定由基線算起的偏移量。可以為負值。基線對於數值來說為0。

 

---------------------------------------------- -------------------------------------------------- ----

 

word-break：設定或擷取物件內文字的字內換行行為。

 

對於解決防止頁面中出現連續無意義的長字符打破佈局，應該使用break-all； 

作為IE的私有屬性之一，IE5.5率先實現了word-break ，後期被w3c採納成標準屬性； 

 

normal： 依照亞洲語言和非亞洲語言的文字規則，允許在字內換行。 

keep-all： 與所有非亞洲語言的normal相同。對於中文，韓文，日文，不允許字斷開。適合包含少量亞洲文本的非亞洲文本。 

break-all： 此行為與亞洲語言的normal相同。也允許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本，例如使連續的              英文字母間斷行。

------------------------------------------------ -----------

 

word-wrap： 設定或擷取當內容超過指定容器的邊界時是否斷行。 

 

normal： 允許內容頂開或溢位指定的容器邊界。 

break-word： 內容將在邊界內換行。如果需要，單字內部允許斷行。

 

---------------------------------------------- --------------------------------

以上就是CSS常用屬性總結三的內容，更多相關內容請關注PHP中文網（www.php.cn）！