邊框詳講---CSS必備的盒子模型知識！

盒子模型

 

盒子模型的四個部分：內容區、邊框，內邊距，外邊距；前三者共同決定盒子可見框的大小。

 

邊框

 

爲元素設置邊框

 

 

  .box1{

    

    width:100px;

    height:100px;

    background-color red;

    /*設置盒子內容區寬高及顏色。*/

     

    border-width:10px;

    border-color:yellow;

    border-style:solid;

    /*設置邊框，三個樣式缺一不可，缺了就直接不顯示邊框。*/

   }

 

 border-width

 

    使用border-width能夠分別指定四個邊框的寬度。

    

        指定四個值：按順時針設置；

        

        指定三個值：分別設置給上 左右 下；

        

        指定兩個值：分別設置給上下 左右；

        

        指定一個值：四邊全爲這個值。

        

        border-width:10px 20px 30px 40px;

        

        /*則上邊框爲10px，右邊框爲20px，以此類推*。/

        

        //方便起見，此規則自定義爲「4321」。

　　

　　//題外話：若是你也知道3421...hhh

 

        

 border-color

    

    原理同4321有：

    

    border-color:red blue green;

    

    /*則上邊框爲紅色，左右邊框爲藍色，下邊框爲綠色。*/

 

 

 border-style

 

使用border-style來設置邊框樣式。

 

    可選值： none  默認值，沒有邊框；

    

    ​        solid   實線；

    

    ​        dotted  點狀；

    

            dashed  虛線；

    

            double  雙線；

    

        border-style同4321有：

        

        border-style:solid dotted;``

        

        /*上下邊框爲實線，左右邊框爲點狀。*/

 

    

border   邊框的簡寫形式

 

經過它可設置四個邊框的樣式、寬度、顏色（順序無要求）。

 

    boeder:red solid 10px;

    

    /*這對四個邊起做用。*/

    

    

border-top   border-bottom   border-right  border-left可單獨用來設置四邊。

 

border:red solid 10px;

 

border-top:yellow solid 20px;

 

/*除了上邊框爲黃色實線20px，其他三邊均爲紅色實線10px*。/

 

 

border:red solid 10px;

 

border-top:none;

 

/*經常使用的去除不要的邊的方法。*/

 

 

內邊距

 

內邊距指盒子的內容區與盒子邊框之間的寬度。

 

內邊距會影響可見框的大小；

 

元素的背景會延伸到內邊距；

 

​    即若是給元素添加背景，背景會應用於內容和內邊距組成的區域。

 

 

可經過padding-top padding-bottom  padding-right  padding-left來單獨設置四邊之一。

 

 

<style type="text/css">   

  .box1{

      width:100px;

      height:100px;

  }

  .box2{

      width:100%;     /*建立子元素box2來佔滿父元素box1的內容區，

      height:100%；    *注意：不佔內邊距*/

  }

</style>

 

 

外邊距

 

外邊距指當前盒子與其餘盒子之間的距離；

 

不影響可見框的大小，但影響盒子的位置；

 

有四個方向的外邊距：margin-top  margin-bottom  margin-right  margin-left  ；

 

    設置上、左邊距時，會改變盒子自身的位置；

    

    設置下、右邊距時，則會改變其餘盒子的位置；

    

 

margin可設置auto；

 

  若只指定左/右外邊距的margin爲auto，

 

​       則會將外邊距設置爲最大值；

 

  若垂直方向設置爲auto，則外邊距默認爲0；

 

​       即垂直方向的盒子會緊挨在一塊兒。

 

  經常使用的使元素自動在父元素中居中的方法：

 

​       將left和right同時設置爲auto。

 

 

margin   外邊距的簡寫形式

 

    一樣符合「4321方向規則」

    

    margin: 0  auto;

    

    /*將上下外邊距設置爲0，將左右外邊距設置爲auto，即這也是居中的寫法。*/

 

 

垂直外邊距的重疊

 

在網頁中垂直方向的相鄰外邊距會發生外邊距的重疊。

 

外邊距的重疊指的是兄弟元素之間的相鄰外邊距會取最大值。

 

​     假設盒1和盒2爲垂直方向的相鄰兄弟元素，

 

​        a、給盒1設置底面外邊距爲100px，給盒2設置頂部外邊距爲100px。

 

​              那麼兩個盒子之間的效果仍是100px。

 

​        b、把盒1設置底面外邊距爲100px，盒2的頂部外邊距設置爲200px，

 

​              那麼兩個盒子之間的距離就變成了200px(取最大值)。

 

 

 

若父子元素的垂直外邊距相鄰了，則子元素的外邊距會設置給父元素。

 

​       即給子元素設置上外邊距爲100px時，子元素和父元素保持相對位置一塊兒下移100px。

 

解決途徑：

 

    法一：給父元素設置上邊框，把父子隔開；

    

    法二：把父元素的內邊距設置成 「能使子元素下移到你想要位置 」的數值。

 

 

 

經常使用去除瀏覽器默認樣式的代碼

 

    *{

    

        margin:0;

        

        padding:0;

    

    }

 

  內聯元素的盒模型

 

    內聯元素不能設置width和height；

    

    能設置水平方向的內邊距，也能設置垂直方向的，

    

    但垂直方向的內邊距不會影響頁面的佈局（不會擠掉，而是覆蓋）；

    

    能設置邊框，水平、垂直效果同「內邊距」；

    

    支持水平方向的外邊距，不支持垂直方向的。

    

 

display

 

可經過display樣式來修改，將一個內聯元素轉化爲塊元素。

 

​   可選值：inline  將一個元素做爲內斂元素顯示；

 

​          　　block   將一個元素做爲塊元素顯示；

 

​          　　inline-block  將一個元素轉化爲內聯元素，使其既有內聯元素的特色又有塊元素的特色；

 

​                           　　既可設置寬高，又不會獨佔一行。【典型：image】

 

​          　　none：不顯示元素，且元素在頁面中也不會繼續佔有位置。

 

 

visibility

 

經過visibility來設置元素的隱藏和顯示的狀態。

 

​   可選值：visible  默認值，元素默認在頁面顯示；

 

​              hidden 元素會隱藏，但在頁面中繼續佔有位置（顯示空白）。

 

 

overflow

 

父元素默認將溢出內容在父元素外顯示。

 

經過overflow可設置父元素如何處理溢出內容。

 

​   可選值：visible 默認值  不對一處內容處理；

 

​           　　hidden  溢出內容會被修剪，即不顯示；

 

​          　　 scroll   爲父元素添加滾動條，經過滾動條可查看完整內容，

 

​                       　　該屬性無論內容個是否溢出，都會添加水平和垂直方向的滾動條；

 

           　　auto     會根據需求自動添加滾動條。

，

　　這些是我在看網課以後手打的筆記，然而學完整套視頻以後發現有源碼這種東西，枯了；若是你以爲這些知識點對你有一些幫助的話就給我一點回應叭，安慰我一下我這個小菜鳥呲呲。