【HTML+CSS】4.CSS佈局:盒模型和定位

之前講到,樣式是CSS語法的最小單元,每一個樣式都由選擇器和聲明(規則)兩部分組成,而聲明又由屬性和屬性值組成。上一篇講了選擇器,這裏就開始進入“屬性”部分了。

CSS 語法

要想靈活應用CSS設計出美觀且多樣的頁面,就需要熟悉CSS的各類“屬性”,CSS中包含超過100種屬性,包括字體屬性、文本屬性、邊框屬性、邊距屬性、佈局屬性、定位屬性、打印屬性等。作爲初學者,我覺得我們應該循序漸進,先集中熟悉最常用的屬性大類中的重點內容,之後再在自己的實踐和學習別人的代碼中不斷鞏固、不斷擴展。

我想在這裏,主要總結一下網頁佈局網頁排版這兩塊內容。網頁佈局中,主要說一下與盒模型定位相關的屬性;網頁排版中,集中總結一下字體文本屬性。之後,再和HTML的內容結合起來,詳細的分析一下幾個具體的頁面代碼,加深理解。


目錄

1. 盒模型 (Box Model) 

1.1 padding 內邊距

1.2 border 邊框

(1)邊框的樣式 border-style

(2)邊框寬度 border-width

(3)邊框顏色 border-color

(4)outline 和 border

1.3 margin 外邊距

1.4 其他重要功能

(1)圓角邊框 border-radius

(2)盒子陰影 box-shadow

(3)邊框圖片 border-img


 1. 盒模型 (Box Model) 

CSS 盒模型相關的屬性

CSS 盒模型講的就是網頁中任何元素都會顯示爲一個矩形形狀,它可以包括:

  • content(內容):顯示文本和圖像等元素(element)的區域,包含寬度width)和高度height);
  • padding(內邊距,也叫填充或補白:內容周圍的區域,內邊距本身是透明的;
  • border(邊框):圍繞再內邊距外的邊框,背景應用於由內容和內邊距、邊框組成的區域
  • margin(外邊距,也叫空白邊或邊界:清除邊框外的區域,外邊距是透明的,不會遮擋其後的任何元素。

對於上面提到的屬性,按方位又可以包含 top、right、bottom、left 共4個分支屬性;根據性質,又包含邊框類型(style)、粗細(width)和顏色(color)等屬性。比如,border,就包含border-top、border-right、border-bottom、border-left等分支屬性,而border-width 屬性又分爲 border-top-width、 border-right-width、border-bottom-width、border-left-width 和 border-width 屬性。

在這裏還要注意,在 CSS 中,width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加元素框的總尺寸。

舉個栗子:

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

效果是這樣的:

CSS 框模型實例

分別表示頂部外邊距、右側外邊距、底部外邊距和左側外邊距。

1.1 padding 內邊距

CSS padding 屬性定義元素邊框與元素內容之間的空白區域。padding 屬性接受長度值或百分比值,但不允許使用負值。

如果希望h1元素的各邊的padding都是10px,只需要定義:

h1 {padding: 10px;}

也可以分別定義上下左右各邊的內邊距:

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

/*簡寫,順序:順時針*/
h1 {padding: 10px 0.25em 2ex 20%;}

注意,對邊距(包括內邊距和外邊距)設置百分數值,百分數值是相對於其父元素的 width 和height 計算的,父元素的屬性改變,它們也會按比例改變。

1.2 border 邊框

元素的邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。CSS border 屬性允許你規定元素邊框的樣式、寬度和顏色。

值得注意的是,邊框繪製在“元素的背景之上”。這很重要,因爲有些邊框是“間斷的”(例如,點線邊框或虛線框),元素的背景應當出現在邊框的可見部分之間。

(1)邊框的樣式 border-style

樣式是邊框最重要的一個方面,CSS的 border-style 屬性共有10個樣式:

使用方法如下:

/* 定義邊框樣式 */
a:link img {border-style: outset;}

/* 爲一個邊框定義多個樣式 */
p {border-style: solid solid solid none;}   /* 順時針top-right-bottom-left的順序*/
p {border-style: solid; border-left-style: none;} /*必須把單邊屬性放在簡寫屬性之後,防止覆蓋*/

(2)邊框寬度 border-width

爲邊框指定寬度有兩種方法:可以指定長度值,比如 2px ;或者使用 3 個關鍵字之一,它們分別是 thin 、medium(默認值) 和 thick,這三個關鍵詞在不同的瀏覽器中的值可能不同。

邊框寬度的聲明和之前介紹的其他性質基本一致:

/*邊框寬度的定義*/
p {border-style: solid; border-width: 5px;}

p {border-style: solid; border-width: thick;}

p {border-style: solid; border-width: 15px 5px 15px 5px;}
p {border-style: solid; border-width: 15px 5px;} /*值複製*/
p {border-style: solid; border-width: 15px 5px 15px;} /*值複製*/

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

上面註釋“值複製”的代碼,與前面的代碼是等價的。值複製用於避免輸入重複的數字,它的規則如下:

CSS 值複製

 

  • 如果缺少左外邊距的值,則使用右外邊距的值。
  • 如果缺少下外邊距的值,則使用上外邊距的值。
  • 如果缺少右外邊距的值,則使用上外邊距的值。

舉個栗子: 

h1 {margin: 0.25em 1em 0.5em;}	/* 等價於 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;}		/* 等價於 0.5em 1em 0.5em 1em */
p {margin: 1px;}	        /* 等價於 1px 1px 1px 1px */

注意:border-style 的默認值是 none,如果沒有聲明樣式,就相當於 border-style: none,此時沒有邊框,邊框寬度自動設置爲0。因此,如果您希望邊框出現,就必須聲明一個邊框樣式。

(3)邊框顏色 border-color

設置邊框顏色非常簡單,可以使用任何類型的顏色值,例如可以是命名顏色,也可以是十六進制和 RGB 值,在這裏就不加代碼了。

有一個有意思的點,就是CSS2 引入了邊框顏色值 transparent。這個值用於創建有寬度的不可見邊框,也就是將邊框設置爲透明色。這個功能可以和之前說的僞類選擇器結合起來使用,體現不一樣的懸浮樣式或點擊樣式。

(4)outline 和 border

CSS中還有一個概念,叫outline,即輪廓。在瀏覽器裏,當鼠標點擊或使用Tab鍵讓一個鏈接或者一個radio獲得焦點的時候,該元素將會被一個輪廓虛線框圍繞。這個輪廓虛線框就是 outline ,它位於邊框邊緣的外圍,起突出元素的作用。。outline也有和border相似的屬性,包括outline,outline-width,outline-style,outline-color等。其中第一個 outline 是速寫(shorthand)形式,格式爲: outline: outline-color || outline-style || outline-width(border也有同樣的速寫形式:border: border-width||border-style||border-color

如果想讓鏈接獲取到焦點時更醒目,可以設置輪廓線條爲紅色,outline 屬性的設計可以如下:

a { outline-color: red; }

如果想去掉輪廓線條,則可以按如下方法設置:

.active-tab { outline: none; ...... /* other properties */}

border 可應用於幾乎所有有形的html元素,而 outline 是針對鏈接、表單控件和ImageMap等元素設計, outline 的效果將隨元素的 focus 而自動出現,相應的由 blur 而自動消失。另外,outline 不會象border那樣影響元素的尺寸或者位置,border(邊框)是要佔據空間的,而outline(輪廓)是不佔據空間的

1.3 margin 外邊距

margin是指圍繞在元素邊框的空白區域,這個屬性接受任何長度單位(像素、英寸、毫米或 em)、百分數值甚至負值。

/*設置margin屬性*/
h1 {margin : 0.25in;}
h1 {margin : 10px 0px 15px 5px;} /*從上外邊距 (top) 開始圍着元素順時針旋轉*/
p {margin : 10%;} /*外邊距是其父元素的 width 的 10%*/

注意,margin屬性中使用的百分數是相對於父元素的 width 計算的

margin 的默認值是 0,所以如果沒有爲 margin 聲明一個值,就不會出現外邊距,但有些瀏覽器中會提供預設的外邊距樣式。

margin 的值也設置爲 auto,auto會因爲所在元素、元素類型和上下文的有不同不一樣的表現,在margin中,auto 有兩種選擇:佔據可用的空間(take up the available space,表現爲在父元素中水平居中)或者等同於0px。該作用常用於設置居中對齊。

例如:

  <div class="father">
    <div class="son"></div>
  </div>
  <style>
    .father{
      width: 200px;
      height: 200px;
      background: pink;
    }
    .son {
      width: 100px;
      height: 100px;
      background: gray;
      margin: auto;
    }
  </style>

運行結果: 

上述效果僅在水平的外邊距中起作用,而且當position屬性設置了absolute或fixed值,也不會起作用。但是,當左右外邊距中的其中一個賦值爲auto,另一個爲其他值的時候,設置auto的一側會佔據所有可用空間,營造出元素向左或向右浮動的效果。

1.4 其他重要功能

(1)圓角邊框 border-radius

在網頁設計中,爲了美觀,常會用到”圓角邊框“。CSS設置圓角邊框的屬性是border-radius,它的用法如下:

/* 爲div對象盒子的四個角設置5像素圓角 */
div{border-radius:5px} 

/* 爲div對象盒子的左上角和右下角設置5像素圓角,其他不變 */
div{border-radius:5px 0;} 

/* 爲div對象盒子的左上角和右上角設置5像素圓角,其他不變 */
div{border-radius:5px 5px 0 0;} 

/* 爲div對象盒子的左上角設置3像素圓角,右上角設置4像素圓角,右下角設置5像素圓角,左下角設置6像素圓角 */
div{border-radius:3px 4px 5px 6px;} 

(2)盒子陰影 box-shadow

在 CSS3 中,box-shadow 用於向方框添加陰影,用法如下:

示例: 

div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}

效果:

(3)邊框圖片 border-img

通過 CSS3 的 border-image 屬性,您可以使用圖片來創建邊框:

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}

#round
{
-moz-border-image:url(/i/border.png) 30 30 round;	/* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round;	/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round;		/* Opera */
border-image:url(/i/border.png) 30 30 round;
}

#stretch
{
-moz-border-image:url(/i/border.png) 30 30 stretch;	/* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 stretch;	/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 stretch;	/* Opera */
border-image:url(/i/border.png) 30 30 stretch;
}
</style>
</head>
<body>

<div id="round">在這裏,圖片鋪滿整個邊框。</div>
<br>
<div id="stretch">在這裏,圖片被拉伸以填充該區域。</div>

<p>這是我們使用的圖片:</p>
<img src="/i/border.png">

<p><b>註釋:</b> Internet Explorer 不支持 border-image 屬性。</p>
<p>border-image 屬性規定了用作邊框的圖片。</p>

</body>
</html>

效果:

 這篇就先到這裏了,下面咱們再看看網頁排版的相關內容。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章