CSS盒模型

盒模型

 

在CSS中，一個獨立的盒子模型content（內容）、border（邊框）、padding（內邊距）和margin（外邊距）4個部分組成。

一個盒子實際所佔用的寬度或高度是由「內容+內邊距+邊框+外邊距」組成的。

設置邊框樣式

border-style

border-width

border-color

 

padding又稱爲內邊距，

用於控制內容與邊框之間的距離。

padding屬性能夠設置一、二、三、4個屬性值，分別以下：

設置1個屬性值時，表示上下左右4個padding均爲該值。

設置2個屬性值時，前者爲上下padding的值，後者爲左右padding的值。

設置3個屬性值時，第1個位上padding的值，第2個爲左右padding的值，第3個爲下padding得值。

設置4個屬性值時，按照順時針方向，依次爲上、右、下、左padding的值。

 

設置外邊距(margin)

margin指的是元素與元素之間的距離。

margin屬性值的設置方法與padding同樣，也能夠設置不一樣的數值來表明相應地含義。

 

<div>標記與<span>標記

div標記早在HTML4.0以前就已經出現，但那時並不經常使用，直到CSS的普及，才逐漸發揮出它的優點。span標記在HTML4.0時才被引入，它是專門針對樣式表而設計的標記。

div簡單而言是一個區塊容器標記，即<div>與</div>之間至關於一個容器，能夠容納段落、標題、表格、圖片、乃至章節等各類HTML元素。

一個ul是一個塊級元素，一樣div也是一個塊級元素，兩者的不一樣在於ul是一個具備特殊含義地塊級元素，具備必定的邏輯語義，而div是一個通用的塊級元素，用它能夠容納各類元素，從而方便排版。

<span>標記與<div>標記同樣，做爲容器標記而被普遍應用在HTML語言中。在<span>與</span>中間一樣能夠容納各類HTML元素。若是把div換成span，執行後的效果徹底同樣。能夠說<div>和<span>這兩個標記起到的做用都是獨立出各個區塊，在這個意義上說兩者沒有不一樣。

兩者的區別在於div是塊級元素，它包含的元素會自動換行。而span是內嵌元素，不會換行。

 

行內元素之間的水平margin

當兩個行內元素緊鄰時，它們之間的距離爲第1個元素的margin-right加上第2個元素的margin-left。

塊級元素之間的垂直margin

當兩個塊級元素是垂直排列，則狀況有所不一樣。兩個塊級元素之間的距離不是margin-bottom與margin-top的總和，而是二者中的較大者。這種現象稱爲合併，意思是說較小的margin合併到了較大的margin中。

 

盒子的浮動

float：若是設置爲left/right，元素就會向其父元素的左側或右側靠緊，同時默認狀況下，盒子的寬度再也不伸展，而是收縮，根據盒子裏面內容的寬度肯定。

position：static : 　無特殊定位，對象遵循HTML定位規則
         absolute : 　將對象從文檔流中拖出，使用left，top，right，bottom，等屬性進行絕對定位。而其層疊經過z-index屬性定義。此時對象不具備邊距，但仍有補白和邊框
          relative : 　對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置
              fixed : 　固定位置。

z-index:

z-index屬性用於調整定位時重疊塊的上下位置，與它的名稱同樣，想象頁面爲x-y軸，垂直於頁面的方向爲z軸，z-index值大的元素位於值小的上方。z-index屬性的值爲整數，能夠是正數也能夠是負數

auto : 　聽從其父對象的定位  number : 　無單位的整數值。可爲負數 

 

clear:
number : 　無單位的整數值。可爲負數 

none : 　容許兩邊均可以有浮動對象
both : 　不容許有浮動對象
left : 　不容許左邊有浮動對象
right : 　不容許右邊有浮動對象 

 

clip:

auto : 　對象無剪切
rect ( number number number number ) : 　依據上-右-下-左的順序提供自對象左上角爲(0,0)座標計算的四個偏移數值，其中任一數值均可用auto替換，即此邊不剪切。

 

overflow:

visible : 　不剪切內容也不添加滾動條。假如顯式聲明此默認值，對象將被剪切爲包含對象的window或frame的大小。而且clip屬性設置將失效
auto : 　此爲body對象和textarea的默認值。在須要時剪切內容並添加滾動條
hidden : 　不顯示超過對象尺寸的內容
scroll : 　老是顯示滾動條 

 

display: none；隱藏對象，display：顯示對象。

visibility：

inherit : 　繼承上一個父對象的可見性
visible : 　對象可視
hidden : 　對象隱藏
collapse : 　主要用來隱藏表格的行或列。隱藏的行或列可以被其餘內容使用。對於表格外的其餘對象，其做用等同於hidden。IE5.5尚不支持此屬性。 

與display屬性不一樣，此屬性爲隱藏的對象保留其佔據的物理空間。