CSS盒模型

標籤：單位   url   ges   str   height   無法   覆蓋   tom   結構   

一、【margin:外邊距】
  1.唯寫一個值,表示四周的外邊距均為指定值
  2.寫兩個值,第一個數為上下外邊距,第二個值為左右外邊距
  3.寫三個值,分別表示上,右,下三個方向,左邊預設等於右邊
  4.寫四個值,表示上,右,下,左

  也通過使用下面四個單獨的屬性，分別設定上、右、下、左外邊距：
  margin-top
  margin-right
  margin-bottom
  margin-left
  5.margin: 0 auto;設定區塊層級元素在父級容器中水平置中
  
 二、【padding:內邊距】
  設定方式與margin完全相同
  也通過使用下面四個單獨的屬性，分別設定上、右、下、左內邊距：
  padding-top
  padding-right
  padding-bottom
  padding-left
  注意:設定padding,會將導致div撐大,使用必須注意div實際寬高為多少；

【舉個栗子】

  

#box {  width: 70px;  margin: 10px;  padding: 5px;}


三、【盒子模型分類】
１、標準盒子模型（W３C盒子）：我們在設定的寬度高度僅僅包含content部分。
  　再添加padding或border。會導致盒子變大；
２、IE盒子模型（怪異盒子）：我們設定的寬度和高度，包含content＋padding＋border；
    再添加padding或border，會壓縮content地區，但盒子總大小不變；

   [手動設定盒子類型]
      box-sizing: border-box; 怪異盒子；
      box-sizing: content-box; 標準盒子；  預設效果。

 四、【邊框】
    1.設定邊框需要三個屬性,寬度,樣式,顏色
    2.原則上三個屬性缺一不可,順序可以隨便修改;
    3.可以使用top,right,bottom,left分別設定四個邊
    .border:5px   soild   blue;
　4、定義單邊樣式
    為元素框的某一個邊設定邊框樣式，而不是設定所有 4 個邊的邊框樣式，可以使用下面的單邊邊框樣式屬性：
    border-top-style
    border-right-style
    border-bottom-style
    border-left-style

　【舉個栗子】

.div-1{
    width: 200px;
    height: 200px;
　　 overflow:hidden;
    border: 5px solid red;
}
.div-2{
    width: 100px;
    height: 100px;
    position: relative;
    left: 50%;
    margin-left: -55px;
    top:50%;
    margin-top: -50px;
    border: 5px dotted green;
}

  當父盒子包裹子盒子，給盒子添加margin-top時，子盒子與父盒子的上邊線不能分開，而是導致，兩個盒子同時下來。
 【解決辦法】
  1、給父盒子添加一點padding-top；不推薦使用，會導致父盒子結構多餘1px padding。
  2、 給父盒子添加1px的border-top；同樣導致1px的多餘空間，不推薦使用。
  3、給父盒子或子盒子添加浮動；
  4、給父盒子添加overflow屬性；推薦使用的方法。
   
 五、【border-radius圓角】
  1.border-radius:可以接受8個屬性值:
  X軸:左上  右上  右下  左下/Y軸:左上  右上  右下  左下
  2.縮寫形式:
  唯寫X軸,Y軸將預設等於X軸;
  四個角寫不全,預設對角相等;
  唯寫一個值,預設8個數均等;
  例如:border-radius:50px 20px;
  =border-radius:50px 20px 50px 20px;
  =border-radius:50px 20px 50px 20px/50px 20px 50px 20px;
  3.當圓角弧度>=正方形邊長一半,將會顯示為圓形.
  【舉個例子】

.div-1{
    width: 200px;
    height: 200px;
    background-color: yellow;
    border-radius:50px 20px 50px 20px;
}

.div-1{
    width: 150px;
    height:150px;
    border-radius: 50%;
    overflow: hidden;
}
.div-2{
    width: 100px;
    height:100px;
    border-radius: 50%;
    margin:25px auto; 
}

  六、【border-image:圖片邊框】
  1.border-image:一共可以放10個屬性值:
  a.圖片路徑:url();
  b.圖片的切片寬度:4個值,分別代表:上,右,下,左四條邊;
  通過四條切線切割,可以將圖片分為9宮格.9宮格四個角分別對應邊框的四個角(不會進行任何展開),9宮格
  四個邊分別對應四條邊框(會根據設定進行展開/鋪完/重複等操作)
  注意:寫的時候,必須不能帶px單位。
  
  c.邊框的寬度:4個值,分別代表上,右,下,左 四條邊框的寬度;
  注意:寫的時候,必須帶px單位,與切片寬度用/分隔.;
  d.邊框的重複方式:strtch(展開),round(鋪滿),repeat(重複)

【舉個例子】

.image{
    width:200px;
    height: 200px;
    background-size: 200px 200px;
    background-color: darkslategray;
    border-image: url(images/ima.png) 27/27px stretch;
    -webkit-border-image:url(images/ima.png) 27/27px repeat;
}

  
  七、【round和repeat區別】
  1.round會對四條邊進行適當的展開壓縮,確保四條邊可以重複整數.
    repeat會保持每條邊的長度寬度不變，可能導致四角處，無法顯示一條完整的邊。
  2.屬性值的寫法:border-image:a b/cpx d;
  3.border-image:在webkit核心的瀏覽器中,必須帶-webkit首碼.*/
  
 八、【box-shadow:盒子陰影】
  1.6個屬性值,空格分隔:
  X軸陰影距離(必選):可正可負,正一右移,負一左移;
  Y軸陰影距離(必選):可正可負,正一下移,負一上移;
  陰影模糊半徑(可選):只能為正,預設0,數值越大,陰影越模糊;
  陰影擴充半徑(可選):可正可負,預設0,數值增大,陰影增大,反之亦然.
  陰影顏色(可選):預設黑色;
  內外陰影(可選):預設外陰影,inset表示內陰影。
  
【舉個例子】

.shadow{
    width:200px;
    height: 200px;
    background-color: darkslategray;
    box-shadow: 10px 10px 10px 5px black;
}

  九、【outline:外圍線】
  顯示在border外邊，並不會佔據空間。可能會覆蓋四周的內容。
  例如：outline：20px solid red;
【舉個例子】

.div-1{
    width: 200px;
    height: 200px;
    background-color: yellow;
    outline: 10px solid red;

}

CSS盒模型