CSS自學筆記（10）:CSS3盒子模型

CSS3爲CSS技術的升級版本、最新版本。

就CSS而言，它是一個模塊，是一個龐大而又複雜的模塊，可是在CSS3中，將這一個龐大的模塊分解爲一個個容易理解的同時又很精簡的小模塊，同時CSS3中又添加了一些新的模塊，因此CSS3朝着模塊化的方向發展。

CSS3中比較重要的模塊有：選擇器、盒子模型、背景和邊框、文字特效、2D/3D轉換、動畫、多列布局、用戶界面。

CSS3的選擇器經常使用的和CSS選擇器差很少。

CSS3 盒子模型

盒子模型是CSS3很重要的一個模型，它是指元素以何種方式顯示以及元素間如何交互。

一個盒子是由元素的內容、內邊距、邊框、外邊距構成的，因此在瀏覽器上看到的每個元素均可以理解爲一個盒子。多個盒子經過不一樣的方式排列(上下、並列、嵌套等)後就造成了咱們看到的網頁。

盒子組成結構圖：

相似於CSS的框，有圖能夠看出，一個盒子的寬度=左右外邊距+左右邊框+左右內邊距+內容寬度。若是兩個盒子是嵌套的，那麼兩個盒子(盒子B嵌套在盒子A中)邊框之間的舉起爲A的內邊距+B的外邊距。

盒子模型中實實在在咱們能夠看到的有邊框、元素。內邊距和外邊距都是虛的，咱們只能看到它們對元素的影響，因此盒子模型中只能定義兩類顏色：邊框和背景顏色。

盒子模型中能夠定義三類距離：邊框值、外邊距值、內邊距值，從而在必定程度上修飾元素。

注：

• 大部分元素的盒子屬性(margin,padding)默認都爲0。
• 有部分元素的盒子屬性(margin,padding)默認值不爲0，因此有必要時應先定義這些屬性爲0.
• input元素的的邊框屬性定義爲0通常是爲了美化輸入框和按鈕。

咱們能夠經過盒子模型簡單的美化一下(應該比默認狀況下的要好看一點吧)

一樣，咱們也能夠對錶格、圖片等元素的邊框等定義不一樣的樣式。

對一個盒子模型，樣式定義好後就要考慮放哪了？因此就要對盒子進行定位。

盒子的定位有三種形式：

1. 在普通流下的定位
   • html元素默認的定位方式
   • 行內元素在同一行內橫向排列
   • 塊級元素則是豎向排列
2. 在浮動屬性下的定位
3. 在定位屬性的定位

注：盒子的默認定位是普通流下的定位。

若是咱們不給元素加邊框(以下圖左)。可是當加上元素邊框時，就變成了下面的右圖了，看起來很擁擠，當某個元素有背景色時，就會看出元素重疊了。

  

因此適當的調整元素的邊框、外邊距、內邊距，可使各個元素之間的佈局更合理。

還須要注意的是，有時咱們定義了元素的邊框、外邊距、內邊距，也會形成元素之間的重疊。

這時咱們可使用display屬性了，這個屬性能夠控制元素是以行元素顯示仍是塊元素顯示或者不顯示。

display屬性

屬性	特色
block	老是在新行上開始。 高度，行高以及頂和底邊距均可控制。 寬度缺省是它的容器的100%，除非用width設定一個寬度。
inline	和其餘元素都在一行上。 高，行高及頂和底邊距不可改變。 寬度就是它的文字或圖片的寬度，不可改變。
none	元素將不會被顯示，也不會佔據文檔中的位置。 相似於visibility: hidden。 主要用於下拉菜單、tab面板等須要隱藏的地方。
………………………	…………………………………

須要定義display屬性的地方：

• 讓一個行內元素重新的一行開始。
• 讓一個塊元素和其餘元素保持在一行。
• 控制行元素的寬度(例如垂直列表、導航欄等)。
• ……

咱們定義多個行元素時，它們位於同一行：

當咱們給這些行元素樣式定義中加上display: block時，它們就會按照塊元素的顯示方式顯示：