框模型與外邊距

1. 框模型

框:

頁面一切元素皆爲框。

框模型：

  Box-Model,定義了元素框處理元素內容，
  內邊距以及外邊距的方式。

對象實際寬度=左右外邊距 + 左右邊框 + 左右
內邊距 + width；
對象實際高度=上下外邊距 + 上下邊框 + 上下內邊距 + height

2. 外邊距

1. 什麼是外邊距：

圍繞在元素邊框周圍的空白區域就是外邊距正常情況下，
外邊距是不允許被其他元素所佔據的。

2. 語法：

   四個方向外邊距：
      margin:value;
     單邊設置：
         margin-top:上外邊距；
         margin-right: 右外邊距；
         margin-bottom: 下外邊距；
         margin-left： 左外邊距；

取值：

1. 單位可以爲：px
      margin-top:20px;
      margin:15px;
2. 單位可以爲 %
3. 取值爲 auto
   左右外邊距可以取值爲 auto， 允許讓會計元素水平
   居中顯示
4. 取值爲 負值
   移動元素
  左外邊距取值爲負： 元素向左移動
  上外邊距取值爲負： 元素向上移動
  左外邊距取值爲負： 元素向上移動
  上外邊距取值爲正： 元素向下移動

3. 外邊距的簡潔寫法：

 margin：value；四個方向外邊距相同
 margin:v1 v2 v3;v1上下外邊距 v2左右外邊距 
 margin：v1 v2 v3;v1上 v2左右 v3下
 margin：v1 v2 v3 v4;

4. 默認具備外邊距的元素

編寫網頁時，一般會進行CSS重寫，及改變一些元素的
默認樣式。比如 取消某些元素的默認外邊距。

這是有默認外邊距的

命令顯示圖：

示例網頁圖：

這是解決外邊距的

命令顯示圖：

示例網頁圖：

5.

1. 外邊距合併：

當兩個垂直外邊距相遇時，他們將形成一個外邊距，
稱爲外邊距合併。
合併後的外邊距的高度等於兩個外邊距中高度較大者。

合併後：

命令顯示圖：

示例網頁圖：

2. 外邊距溢出：

在某些特殊情況下，爲子元素設置上下外邊距時，
有可能會作用到父元素上

特殊情況：

  1. 父元素沒有上或下邊框‘
  2. 必須爲第一個子元素或最後一個子元素設置外邊距時

解決方案：

  1. 爲父元素增加邊框（上或下）
  2. 在父元素中增加子元素<table>到第一個子元素位置處
  3. 通過設置父元素的上內邊距來取代子元素的上外邊距 

3. 外行內元素和行內塊元素設置外邊距爲：

行內塊元素設置上下外邊距整行內容
都跟着變。

這是有溢出的
命令顯示圖：

示例網頁圖

解決溢出的圖示

示例網頁圖：