004-盒模型及文字溢位

Petrichor發表於2019-02-16
模型

什麼是盒模型

盒模型是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瀏覽器不支援此屬性值)

相關文章