css盒模型

1.什麼是盒子模型

盒子模型是CSS樣式修飾以後一個元素佔用整個HTML頁面的空間大小操做方式

存在外邊距，邊框，內邊距和元素自己

2.邊框、內外邊距的界限

border-width:邊框寬度
border-style:邊框樣式
solid 實線 double 雙實線/空心線
dashed 虛線 dotted 圓點虛線
border-color:邊框顏色

border: 邊框寬度, 邊框樣式, 邊框顏色;
例如: border: 10px solid black;

<style> div { 
        width: 200px;
        height: 200px;
        background-color: red;
        /* 邊框的寬度，樣式和顏色 */
        border: 10px solid black;
        /*border-width: 10px;*/
        /*border-style: dashed;*/
        /*border-color: green;*/
    }
</style>

3.內邊距、邊框之內的世界

/* 內邊距 padding /
/padding-top: 50px;/
/padding-left: 100px;/
/padding-right: 200px;/
/padding-bottom: 150px;/
/





一個尺寸：全部的內邊距都是該尺寸
二個尺寸: 第一個尺寸對應上下內邊距，第二個尺寸對應左右內邊距
三個尺寸: 第一個尺寸對應上內邊距，第二個尺寸對應左右內邊距，第三個尺寸對應下內邊距
四個尺寸: 順時針順序，上右下左
*/

<style> div { 
            width: 200px;
            height: 200px;
            background-color: greenyellow;
            border: 5px solid red;
 
            /* 內邊距 padding */
            /*padding-top: 50px;*/
            /*padding-left: 100px;*/
            /*padding-right: 200px;*/
            /*padding-bottom: 150px;*/
            /* 一個尺寸：全部的內邊距都是該尺寸 二個尺寸: 第一個尺寸對應上下內邊距，第二個尺寸對應左右內邊距 三個尺寸: 第一個尺寸對應上內邊距，第二個尺寸對應左右內邊距，第三個尺寸對應下內邊距 四個尺寸: 順時針順序，上右下左 */
            padding: 100px 200px 150px 50px;
        }
    </style>

4.外邊距margin

#id1 { 
            /*外邊距 margin */
            /*margin-top: 50px;*/
            /*margin-left: 100px;*/
            /*margin-right: 200px;*/
            /*margin-bottom: 150px;*/
            /* 一個尺寸：全部的外邊距都是該尺寸 二個尺寸: 第一個尺寸對應上下外邊距，第二個尺寸對應左右外邊距 三個尺寸: 第一個尺寸對應上外邊距，第二個尺寸對應左右外邊距，第三個尺寸對應下外邊距 四個尺寸: 順時針順序，上右下左 */
            /*margin: 100px 200px 150px 50px;*/
 
        }

5.margin問題

<style>
        /* 問題1 HTML中body標籤和一些其餘標籤都帶有必定的內外邊距 一般狀況下，在在css樣式表中適用 * 通配選擇器 去除HTML標籤自帶 的margin padding */
        * { 
            margin: 0;
            padding: 0;
        }
        div { 
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>