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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/158491.html
標籤：其他