CSS入門系列:第二部分 屬性(三)

來源:互聯網
上載者:User

——摘自《CSS入門經典(第3版)》 Lan Pouncey、Richard York著

【盒模型:控制外邊距、邊框、內邊距、寬高】

·margin外邊距

屬性

margin

[<length>|<percentage>|auto]{1,4}

margin-top

margin-right

margin-bottom

margin-left

<length>|<percentage>|auto

//margin帶有3個值遵循上、左右、下的順序約定;margin帶有2個值遵循上下、左右順序約定;margin帶有1個值同時設定四條邊。

·border-width控制盒邊框的寬度。

屬性

border-top-width

border-right-width

border-bottom-width

border-left-width

<border-width>

初始值:medium

border-width

<border-width>{1,4}

初始值:medium

<border-width>值包括:thin|medium|thick|<length>

//不允許使用百分比值。


·border-style指定邊框的樣式

屬性

border-style

值包括:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset

<border-style>{1,4}

初始值:none

border-top-style

border-right-style

border-bottom-style

border-left-style

<border-style>

初始值:none

//簡寫屬性遵循上右下左的順序。


·邊框簡寫屬性

屬性

border-top

border-right

border-bottom

border-left

<border-width>||<border-style>||<color>

border

<border-width>||<border-style>||<color>

·padding內邊距是內容和邊框之間的地區。

屬性

padding

[<length>|<percentage>]{1,4}

padding-top

padding-right

padding-bottom

padding-left

<length>|<percentage>

·overflow溢出

屬性

overflow

visible|hidden|scroll|auto

初始值:visible

overflow-x

visible|hidden|scroll|auto

初始值:visible

overflow-y

visible|hidden|scroll|auto

初始值:visible

//auto和scroll的區別在,即使內容小於指定的寬度或高度,scroll也總會顯示滾動欄,而auto只在必要的時候顯示滾動欄。

【浮動和垂直對齊】·float浮動元素

屬性

float

left|right|none

//浮動元素的外邊距不會摺疊;只有浮動元素後面的元素內容會受影響;浮動元素會被當作區塊層級元素對待。

//以下代碼使用浮動的導航列表。h1{Float:left;Margin-top:0;}.navigation{Float:right;Margin:0;List-style:none;}.navigation li{Display:block;Margin-left:0.5em;Padding:0.5em;Border:1px solid #CCC;Color:#233;Text-decoration:none;}...<h1>Recipes for Cheese</h1><ul class=”navigation”><li><a href=”#”>Home</a></li><li><a href=”#”>Recipes</a></li><li><a href=”#”>Suggestions</a></li></ul>

·clear取消浮動內容

屬性

clear

none|left|right|both

初始值:none

//使用float元素之後再繼續編輯段落文本,段落中的文本從浮動元素之間的空隙中開始,而不是我們想要的那種文本跟在標題的後面。這種情況使用clear取消浮動對標題後面文本的影響,如下。

.intro{Clear:both;}

針對Internet Explorer編寫CSS

因為低版本瀏覽器中存在的一些bug,導致CSS無法實現效果。這裡介紹兩種技術:條件注釋和hack。

條件注釋

<!--[if lte IE 6]>

<![endif]-->

//如果版本低於或等於IE6。。。這意味著如果運行這段代碼的瀏覽器是Internet Explorer,並且其版本為6或更低,將會輸出註解區塊中的內容,而不是將其當作普通的注釋。

Hack

Hack是一些技巧,使用這些技巧可以利用CSS分析器中的bug。介紹兩種hack。

第一種是底線hack,它允許編寫只用於IE6的CSS。其文法如下:

    p{

         _height:1px;

    }

可以看到,普通的height屬性前面帶有一個底線。因為這不是有效CSS屬性,大多數瀏覽器會忽略它,但是IE6不同,它只忽略底線。

第二種是星號hack。其工作方式與底線hack相同,但使用目標是IE6和IE7,文法如下:

    p{

         *width:100px;

    }

原理於底線hack相同,大多數瀏覽器會忽略,而IE6、IE7隻會忽略星號。

p{

     width:100px;

     _width:97px;

}

這條規則對所有瀏覽器中的段落應用值為100px的寬度,但是IE6為97px。順序十分重要,因為兩種屬性聲明都可以應用於IE6,帶有底線的必須放在最後才能被應用。

Hack要少用,過度使用hack會使CSS難以閱讀和維護。如果要特別針對某個版本編寫大量CSS,那麼建議使用條件注釋包含一個不同的樣式表。

·vertical-align垂直對齊內容

vertical-align屬性主要用於兩種情況:1、垂直對齊段落行中出現的文本,如建立上標和下標;2、對齊表儲存格中的內容。

屬性

vertical-align

baseline|sub|super|top|text-top|middle|bottom|text-bottom|<percentage>|<length>

初始值:baseline

//vertical-align之適用於內嵌元素,例如<img/>和<span>。

//該屬性應用於表儲存格時,只能使baseline、top、middle和bottom關鍵字,並且vertical-align屬性在此用來對齊整個表單的內容。

top和text-top的主要區別:top會導致文本的頂部和包含內聯盒子的行的頂部對齊,這個頂部由line-height決定;而text-top則與字型中最高的字元對齊。

//建立上標和下標文本:……<style type="text/css">h1 span{font-size:0.5em;}.superscript{vertical-align:super;}.subscript{vertical-align:sub;}</style>……<h1><span class="superscript">Tasty</span>Recipes for<span class="subscript">Tasty</span>Cheese<h1>……

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.