CSS盒模型

標籤：radius   nbsp   設定   水平   outline   自動   image   問題   結構   

margin 外邊距：
    1、唯寫一個值： 表示四周的外邊距均為指定的值；
    2、寫兩個值： 第一個數為上下外邊距   第二個數為左右外邊距；
    3、寫三個值： 分別表示上、右、下三個方向，左邊預設等於右邊；
    4、寫四個值： 表示上、右、下、左 四條邊順時針方向；
    5、 margin:0 auto; 設定區塊層級元素，在父容器中水平置中！！！！
    例如：margin:0px auto;
  

padding 內邊距：
   設定方式，與margin完全相同；
   注意：設定padding，將會導致div地區被撐大！！！使用時必須注意div實際的寬高為多少！！！！！
   例如：padding: 100px;
 
  
  邊框
    1、設定邊框需要三個屬性： 寬度  樣式  顏色   。原則上，三個屬性缺一不可，順序可以隨便修改

    2、可以使用top、right、bottom、left分別設定四個邊

   例如：border: 10px dotted #0000FF;

 

當父盒子包裹子盒子，給子盒子添加margin-top時，子盒子與父盒子的上邊線並不能分開，而是會導致，兩個盒子同時下來。
   [解決辦法]
    1、給父盒子添加一點padding-top； 不推薦使用，會導致父盒子結構多餘1pxpadding；
    2、給父盒子添加1px的border-top； 同樣會導致1px的多餘空間，不推薦使用；
    3、給父盒子或者子盒子添加浮動； 可能會由於浮動，一定程度的影響頁面的布局；
    4、給父盒子添加overflow屬性； 推薦使用的方式。

 

[border-radius 圓角]
    1、border-radius可以接收8個屬性值,分別表示：
         X軸(左上、右上、右下、左下角)/Y軸(左上、右上、右下、左下角)
         eg: border-radius:10px 20px 30px 40px/10px 20px 30px 40px
    2、縮寫形式：
        唯寫X軸，Y軸將預設等於X軸；
       四個角寫不全，預設對角相等；
       唯寫一個值，預設8個數均等；
       eg: border-radius:50px 20px;
         = border-radius:50px 20px 50px 20px;
         = border-radius:50px 20px 50px 20px/50px 20px 50px 20px;
    3、當圓角弧度>=正方形邊長一半，將會顯示為圓形。

 

[border-image 圖片邊框]
    1、border-image:一共可以放10個屬性值：
       ① 圖片的路徑： url();
    
       ② 圖片的切片寬度： 4個值，分別代表上、右、下、左四條邊；
         通過4條切線切割，可以將圖片分為9宮格。 9宮格四個角分別對應邊框的四個角(不會進行任何展開)，9宮格四個邊分別對應四條邊框(會根據設定進行展開/鋪完/重複等操作)
         注意： 寫的時候，必須不能帶px單位！！！！
    
       ③ 邊框的寬度： 4個值，分別代表上、右、下、左四條邊框的寬度；
         注意： 寫的時候，必須帶px單位，與切片寬度用/分隔！！！
    
       ④ 邊框的重複方式： stretch(展開)、round(鋪滿)、repeat(重複)
         [round和repeat的區別]
         round: 會對四條邊進行適當的展開壓縮，確保四條邊可以重複整數次；
         repeat：會保持每條邊的長度比例不變，可能導致四角處，無法顯示一條完整的邊；
    2、 屬性值寫法：     border-image: ① ②/③px ④;
    
    3、 border-image在webkit核心的瀏覽器中，必須帶-webkit-首碼。

 

[box-shadow 盒子陰影]
    1、 6個屬性值，空格分隔：
  ① x軸陰影距離(必選): 可正可負，正——右移，負——左移；
  ② y軸陰影距離(必選): 可正可負，正——下移，負——上移；
  ③ 陰影模糊半徑(可選)： 只能為正，預設為0.數值越大，陰影越模糊；
  ④ 陰影擴充半徑(可選)： 可正可負，預設為0.數值增大，陰影擴大；數值減小，陰影縮小；
  ⑤ 陰影顏色(可選)： 預設為黑色
  ⑥ 內外陰影(可選)： 預設為外陰影。  inset表示內陰影；

 

outline 外圍線：
    顯示在border外面，並且不會佔據空間。  可能會覆蓋四周的內容。
   例如： outline: 20px solid red;

 

【盒子模型的浮動】

1、標準流中的塊級盒子，寬度將會自動伸展為100%；
     而浮動的塊級盒子，寬度不會自動伸展，而是由內容撐開；

2、 當一個盒子浮動， 標準流中未浮動的其他盒子，將視浮動盒子不存在而佔據浮動盒子原來的位置。(浮動盒子，會蓋在這個盒子的上方)
    但是，未浮動盒子中的文字內容，將會受到浮動盒子寬度的影響。(未浮動盒子中的內容，不會被浮動盒子蓋住)

3、由於第二條的原因。
      可以給受影響的盒子，添加clear屬性，清除掉浮動盒子對自身的影響。
      clear可選值：left-清除左浮動影響， right-清除右浮動影響；
                            both-同時清除左右浮動影響 ，常選；

4、 父盒子沒有指定高度。 如果子盒子沒有浮動，則父盒子的高度可以被子盒子撐開。
         如果，父盒子中的所有子盒子都浮動，則父盒子高度將變為0；
      
         [解決所有子盒子浮動，父盒子高度塌陷的問題]
         ① 給父盒子也添加浮動；
         ② 給父盒子添加overflow屬性；  推薦使用！！！
         ③ 在父盒子最後，添加一個高度為0的空div。 給這個div添加clear: both;屬性，清除掉浮動效果。
         ④ 可以將第三條的div，用偽對象選取器::after實現：
例如：#div4::after{
          display: block;
          content: "";
          height: 0px;
          clear: both;
          }

[盒子模型分類]
      1、 標準盒子(W3C盒子)： 我們設定的寬度和高度，僅僅包含content部分；  再添加padding或border，會導致盒子變大；
      2、 IE盒子(怪異盒子)： 我們設定的寬度和高度，包含content+padding+border； 再添加padding或border，會壓縮content地區，但盒子總大小不變；
     
      [手動設定盒子類型]
      box-sizing: border-box; 怪異盒子；
      box-sizing: content-box; 標準盒子；  預設效果。

CSS盒模型