盒模型

HTML是由一個個html元素組成的

盒模型:把每一個html元素想象成一個盒子

本篇主要介紹兩個方面：1.盒模型的結構；2.盒模型如何影響元素之間的位置關係

盒模型的結構:
     1.content(內容):用來顯示內容(圖片或者文字)
     2.padding(內邊距):內容與邊框的距離
     3.border(邊框):元素的邊框
     4.margin(外邊距):元素與元素之間的距離(父子元素,兄弟元素)

在普通盒模型下:

普通盒模型又叫標準盒模型

盒子的寬=width + 左右padding + 左右border + 左右margin
           盒子的高=height + 上下padding + 上下border + 上下margin

<style>
    #div0 {
        background-color:yellow;
        padding-left:50px;
        padding-right:60px;
        padding-top:70px;
        padding-bottom:80px;
        border-top:5px solid red;
        border-right:6px dotted black;
        border-bottom:7px dashed blue;
        border-left:8px solid pink;
        margin-top:40px;
        margin-right:50px;
        margin-left:60px;
        margin-bottom:70px;
    }
</style>

<div id="div0">
    這是綜合div這是綜合div這是綜合div這是綜合div這是綜合div這是綜合div這是綜合div這是綜合div這是綜合div這是綜合div這是綜合div這是綜合div這是綜合div這是綜合div這是綜合div這是綜合div
</div>
 

• content（內容）——盒子的內容，顯示文字和影象。

     背景色會渲染到border區域
     書寫順序可隨意
     邊框寬度可不寫,預設3px
     顏色可不寫,預設與當前元素文字預設色相同 

<style>
    #div1 {
        background-color:yellow;
    }
</style>

<div id="div1">
    這是content這是content這是content這是content這是content這是content這是content這是content
</div>
 

• padding（內邊距）——清除內容周圍的區域，內邊距是透明的。

<style>
    #div2 {
        background-color:cyan;

        /*內邊距 padding*/
        /*padding-left: 50px;
        padding-right:60px;
        padding-top:70px;
        padding-bottom:80px;*/

        /*簡寫 4個值 順時針 上 右 下 左*/
        /*padding:10px 20px 30px 40px;	*/

        /*簡寫 3個值 上 左右 下*/
        /*padding:10px 20px 30px*/

        /*簡寫 2個值 上下 左右*/
        /*padding:20px 30px;*/

        /*簡寫 1個值 上下左右*/
        /*padding:20px;*/

        /*padding值為0時候,單位px可以不寫*/
    }
</style>

<div id="div2">
    這是padding這是padding這是padding這是padding這是padding這是padding這是padding這是padding
</div>

• border（邊框）——圍繞在內邊距和內容外的邊框。

<style>
    #div3 {
        /*
        設定一個邊框需要三種值
        1.邊框的寬度 px
        2.邊框的型別
            solid:實線;
            dotted:小正方點;
            dashed:虛線;
        3.邊框的顏色
        */


        background-color:green;

        /*border-top:5px solid red;
        border-right:6px dotted black;
        border-bottom:7px dashed blue;
        border-left:8px solid pink;*/


        /*簡寫*/
        /*border:3px solid orange;*/


        /*方向：上、右、下、左   （順時針）*/
        border-width:10px 20px 30px 40px;
        border-style:solid dotted dashed solid;
        border-color:red blue yellow orange;
    }

    a{
        border:8px solid
    }
</style>

<div id="div3">
    這是border這是border這是border這是border這是border這是border這是border這是border
</div>
<a href="">這是a連結</a>

• margin（外邊距）——清除邊框外的區域，外邊距是透明的

<style>
    #div4{
        background-color:cyan;
        /*外邊距 margin*/
        /*margin-top:40px;
        margin-right:50px;
        margin-left:60px;
        margin-bottom:70px; */

        /*簡寫 方法和效果與padding一樣*/
        margin:10px 20px 30px 40px;
        margin:10px 20px 30px;
        margin:10px 20px;
        margin:10px;
    }
</style>

<div id="div4">
    這是margin這是margin這是margin這是margin這是margin這是margin這是margin這是margin這是margin
</div> 

margin的坑

1.相鄰兄弟之間在垂直方向上margin會出現融合，會取兩個元素中margin值較大的為融合後的值。
                      解決辦法：
                               1.padding代替
                               2.只設置其中一個的margin

2.父子關係的元素，如果父元素和子元素都設定了margin,，子元素的margin會傳遞到父級。
                      解決辦法
                               1.父元素padding代替
                               2.給父元素新增 overflow:hidden 樣式(建議使用)
                               3.給子元素加 float:left;或display:inline-block;
                               4.給父元素或子元素透明邊框加 border:1px solid transparent;
                               5.給子元素絕對定位 postion:absolute;
                               6.給子元素加 padding:1px;

margin合併的計算規則（兄弟和父子關係規則相同）：
                      1.正正最大指。
                      2.正負值相加。
                      3.負負最負值。

單個元素height為0時的自身margin合併：
                      1.正正值情況該元素的外部尺寸是最大的那個值
                      2.正負值情況該元素的外部尺寸是相加值。
                      3.負負值情況該元素的外部尺寸是絕對負值最大的值。

怪異盒模型下：

怪異盒模型又叫IE盒模型，和標準盒模型的區別就是：怪異盒模型的寬或者高包含padding和border

設定盒模型型別
            1.box-sizing:content-box 普通盒模型
            2:box-sizing:border-box 怪異盒模型

盒子的寬=width(左右padding+左右border)+左右margin
           盒子的高=height(上下padding+上下border)+上下margin

auto

auto是一個值,可以幫助我們靈活的進行元素佈局
在盒模型裡面,只有width和margin可以用auto作為其值,auto一般用在塊元素的橫向佈局上
         1.如果width,margin-left,margin-right三個值有一個為值auto,其餘兩個必須為定值.
         2.如果width,margin-left,margin-right三個值都為定值,發生衝突時系統會強制修改margin-right的值.
         3.如果margin-left和margin-right都為auto,width必須為定值