004-盒模型及文本溢出

什麼是盒模型

盒模型是css佈局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義全部的元素都以擁有可像盒子同樣的外形和平面空間，即都包含邊框、邊界、補白、內容區，這就是盒模型。

盒模型

1. 填充（內邊距）

   padding的使用方法

   填充：padding,在設定頁面中一個元素內容到元素的邊緣(邊框) 之間的距離。 也稱補白。
   
   用法：
      1）用來調整子元素在父元素中的位置關係。
      注：padding屬性須要添加在父元素上。
     
      2）padding值是額外加在元素原有大小之上的，如想保證元素大小不變，需從元素寬或高上減掉後添加的padding屬性值。
       屬性值的4種方式：
        四個值：上   右   下   左 {padding:10px   20px   30px    40px;}
        三個值：上    左右    下 {padding:10px   20px   30px ;}
        二個值：上下    左右 {padding:10px   20px  ;}
        一個值：四個方向 padding:2px;/*定義元素四周填充爲2px*/
   
   說明：
     可單獨設置一方向填充，如：
     上方向padding-top:10px;    
     右方向pahdding-right:10px;   
     下方向padding-bottom:10px;    
     左方向padding-left:10px;

2. 外邊距

   margin的使用方法

   邊界：margin,在元素外邊的空白區域，被稱爲邊距。
      margin-left:左邊界
      margin-right:右邊界
      margin-top:上邊界
      margin-bottom:下邊界
   
    屬性值的4種方式： 
        四個值：上 右 下 左
        三個值：上 左右 下
        二個值：上下 左右
        一個值：四個方向 
           margin:2px;/*定義元素四邊邊界爲2px*/
           margin:2px 4px;/*定義元素上下邊界爲2px，左右邊界爲4px/
           margin:2px 4px 6px;/*定義元素上邊界爲2px，左右邊界4px下邊界爲6px，*/
           margin:2px 4px 6px 8px;/*定義元素上、右邊界爲2px，下右邊界爲6px，左邊界爲8px*/
           margin:0 auto;/*在瀏覽器中橫向居中。*/
   
   說明：可單獨設置一方向邊界，如：margin-top:10px;
   
      *margin值的解析：左右邊界累加，上下邊界重合。
       
      *子元素（塊）直接寫margin-top時，會將margin-top屬性值加上父元素身上,(不設置任何浮動及定位的屬性的前提下)

3. 邊框
   border的使用方法

   border:邊框寬度 邊框風格 邊框顏色;
    例如：border:5px solid #f00
   
      邊框：border,網頁中不少修飾性線條都是由邊框來實現的。
      
      邊框寬度：border-width:
      
      邊框顏色：border-color:
      
      邊框樣式：border-style:solid(實線)/dashed(虛線)dotted(點劃線)double(雙線)
      可單獨設置一方向邊框，
      
      如：border-bottom:邊框寬度 邊框風格 邊框顏色;底邊框
      border-left:邊框寬度 邊框風格 邊框顏色;左邊框
      border-right:邊框寬度 邊框風格 邊框顏色;右邊框
      border-top:邊框寬度 邊框風格 邊框顏色;上邊框

4. 盒子的實際大小

   1）盒子的實際大小：

   寬 =左右border+左右padding+width
      
      高 =上下border+上下padding+height
      例如：一個盒子的 border 爲 1px，padding 爲 10px，content 的寬爲 200px、高爲 50px
      
      寬= border*2 + padding*2 + content.width = 20*2 + 1*2 + 10*2 +200 = 262px
      
      高= border*2 + padding*2 + content.height = 20*2 + 1*2 +10*2 + 50 = 112px

   2）溢出屬性

   overflow:visible/hidden(隱藏)/scroll/auto(自動)/inherit;
     
      visible:默認值，內容不會被修剪，會成如今元素框以外；
      
      hidden：內容會被修剪，而且其他內容是不可見的；
     
      scroll：內容會被修剪，可是瀏覽器會顯示滾動條，以便查看其他的內容;
      
      auto：若是內容被修剪，則瀏覽器會顯示滾動條，以便查看其餘的內容;
     
      inherit：規定應該從父元素繼承overflow屬性的值。

   3）空餘空間

   white-space：normal/pre/nowrap/pre-wrap /pre-line /inherit
      該屬性用來設置如何處理元素內的空白；
      
      normal：默認值，空白會被瀏覽器忽略，
      
      pre：空白會被瀏覽器保留，其行爲方式相似HTML中的pre標籤；
      
      nowrap:文本不會換行，文本會在同一行上繼續，直到遇到<br/>標籤爲止；
     
      pre-wrap：保留空白符序列，文字超出邊界時會正常換行；
     
      pre-line:合併空白符序列，可是保留換行符；
      
      inherit：規定應該從父元素繼承White-space屬性的值；(ie瀏覽器不支持此屬性值)