Tags:web css

[TOC]

CSS 框模型

CSS 框模型概述

CSS 框模型

元素框的最內(nèi)部分是實(shí)際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距。內(nèi)邊距呈現(xiàn)了元素的背景。內(nèi)邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認(rèn)是透明的，因此不會遮擋其后的任何元素。

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

padding|margin 內(nèi)|外邊距

等內(nèi)邊距實(shí)例:

h1 {padding|margin: 10px;}

按照上、右、下、左的順序分別設(shè)置各邊的內(nèi)邊距:

h1 {padding|margin: 10px 0.25em 2ex 20%;}

外邊距合并

簡單地說，外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。
當(dāng)一個元素出現(xiàn)在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并。請看下圖:

CSS 外邊距合并實(shí)例 1

當(dāng)一個元素包含在另一個元素中時（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發(fā)生合并。請看下圖：

CSS 外邊距合并實(shí)例 2

假設(shè)有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發(fā)生合并：

CSS 外邊距合并實(shí)例 3

如果這個外邊距遇到另一個元素的外邊距，它還會發(fā)生合并：

CSS 外邊距合并實(shí)例 4

CSS 外邊距合并的實(shí)際意義

border 邊框

在 HTML 中，我們使用表格來創(chuàng)建文本周圍的邊框，但是通過使用 CSS 邊框?qū)傩?，我們可以?chuàng)> 建出效果出色的邊框，并且可以應(yīng)用于任何元素。
元素外邊距內(nèi)就是元素的的邊框 (border)。元素的邊框就是圍繞元素內(nèi)容和內(nèi)邊據(jù)的一條或多條線。
每個邊框有 3 個方面：寬度、樣式，以及顏色。在下面的篇幅，我們會為您詳細(xì)講解這三個方面。

border

border 簡寫屬性在一個聲明設(shè)置所有的邊框?qū)傩?/p>

可以按順序設(shè)置如下屬性：

• border-width
• border-style
• border-color

border-width 設(shè)置邊框?qū)挾?/h3>

border-width:thin medium thick 10px;/*上右下左*/

值	描述
thin	定義細(xì)的邊框。
medium	默認(rèn)。定義中等的邊框。
thick	定義粗的邊框。
length	允許您自定義邊框的寬度。
inherit	規(guī)定應(yīng)該從父元素繼承邊框?qū)挾取?/td>

border-style 設(shè)置邊框的樣式

 border-style:dotted solid double dashed;

border-color 設(shè)置邊框顏色

border-color:red green blue pink;

CSS 定位

position: relative; 相對定位

相對定位是一個非常容易掌握的概念。如果對一個元素進(jìn)行相對定位，它將出現(xiàn)在它所在的位置上。然后，可以通過設(shè)置垂直或水平位置，讓這個元素“相對于”它的起點(diǎn)進(jìn)行移動。
如果將 top 設(shè)置為 20px，那么框?qū)⒃谠恢庙敳肯旅?20 像素的地方。如果 left 設(shè)置為 30 像素，那么會在元素左邊創(chuàng)建 30 像素的空間，也就是將元素向右移動。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

如下圖所示:

CSS 相對定位實(shí)例

注意! 在使用相對定位時，無論是否進(jìn)行移動，元素仍然占據(jù)原來的空間。因此，移動元素會導(dǎo)致它覆蓋其它框。

position: absolute; 絕對定位

絕對定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。這一點(diǎn)與相對定位不同，相對定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬τ谒谄胀髦械奈恢谩?br> 普通流中其它元素的布局就像絕對定位的元素不存在一樣：

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

如下圖所示：

CSS 絕對定位實(shí)例

絕對定位的元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊。

position: fixed; 瀏覽器窗口絕對定位

生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。

z-index 用于將在一個元素放置于另一元素之后

z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。

注釋：元素可擁有負(fù)的 z-index 屬性值。

注釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！

img
  {
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1;
  } 

float 浮動

img
  {
  float:right;
  }

定義和用法:

float 屬性定義元素在哪個方向浮動。以往這個屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。
注釋：假如在一行之上只有極少的空間可供浮動元素，那么這個元素會跳至下一行，這個過程會持續(xù)到某一行擁有足夠的空間為止

clear 規(guī)定元素的哪一側(cè)不允許其他浮動元素

img
  {
  float:left;
  clear:both;
  }