目錄
1.盒模型基本概念
我們可以好好看一下這張圖；
盒模型：相框邊框 - > border ；畫和相框邊框的距離（內邊距） -> padding；相框之間的距離（外邊距） -> margin
2.邊框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#d1{
width:100px;
height:100px;
/* 邊框寬度（粗細） */
border-width: 10px;
/* 邊框顏色 */
border-color: red;
/* 邊框樣式 */
border-style:solid;
}
#d2{
width:100px;
height:100px;
border:10px blue dashed;
}
#d3{
width:100px;
height:100px;
border-top:5px blue dashed;
border-right:5px red solid;
border-bottom:5px blue dashed;
border-left:5px red dotted;
}
</style>
</head>
<body>
<div id="d1">內容1</div>
<div id="d2">內容2</div>
<div id="d3">內容3</div>
</body>
</html>
運行結果：
3.內邊距
用padding設置內邊距；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#d1{
width:100px;
height:100px;
/* 邊框寬度（粗細） */
border-width: 10px;
/* 邊框顏色 */
border-color: red;
/* 邊框樣式 */
border-style:solid;
/* 設置內邊距 */
padding:40px;
}
#d2{
width:100px;
height:100px;
border:10px blue dashed;
/* 按照上、右、下、左的順序設置 */
padding:20px 10px 5px 2px;
}
#d3{
width:100px;
height:100px;
/* 設置邊框樣式 */
border-top:5px blue dashed;
border-right:5px red solid;
border-bottom:5px blue dashed;
border-left:5px red dotted;
/* 設置內邊距 */
padding-top:20px;
padding-right:10px;
padding-bottom:5px;
padding-left:2px;
}
</style>
</head>
<body>
<div id="d1">內容1</div>
<div id="d2">內容2</div>
<div id="d3">內容3</div>
</body>
</html>
運行結果：
這裏我們可以點擊頁面，查看檢查：
我們這邊可以看到具體的盒子模型，各種數據都能看到，非常方便！
4.外邊距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#d1{
width:100px;
height:100px;
/* 邊框寬度（粗細） */
border-width: 10px;
/* 邊框顏色 */
border-color: red;
/* 邊框樣式 */
border-style:solid;
/* 設置內邊距 */
padding:40px;
/* 設置外邊距 */
margin:20px;
}
#d2{
width:100px;
height:100px;
border:10px blue dashed;
/* 按照上、右、下、左的順序設置 */
padding:20px 10px 5px 2px;
/* 按照上、右、下、左的順序設置 */
margin:20px 10px 5px 2px;
}
#d3{
width:100px;
height:100px;
/* 設置邊框樣式 */
border-top:5px blue dashed;
border-right:5px red solid;
border-bottom:5px blue dashed;
border-left:5px red dotted;
/* 設置內邊距 */
padding-top:20px;
padding-right:10px;
padding-bottom:5px;
padding-left:2px;
/* 設置外邊距 */
margin-top:20px;
margin-right:10px;
margin-bottom:5px;
margin-left:2px;
}
</style>
</head>
<body>
<div id="d1">內容1</div>
<div id="d2">內容2</div>
<div id="d3">內容3</div>
</body>
</html>
運行結果：
5.網頁佈局與盒模型
1.標準文檔流；
標準文檔流：指在不使用其他與排列和定位相關的特殊 CSS 規則時，各種元素的排列規則；即不同的瀏覽器解析CSS樣式的規則基本上是按照標準文檔流來解析的；
2.塊級元素 VS 行內元素；
塊級元素：以一個塊的形式展現，跟同級的兄弟塊依次豎直排列，左右撐滿，比如<div>；
行內元素：以普通的一個 DOM 節點展現，跟同級的兄弟元素橫向排列，排滿後，自動換行，比如<span>；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>塊內元素</h1>
<div>塊1</div>
<div>塊2</div>
<div>塊3</div>
<h1>行級元素</h1>
<span>行1</span>
<span>行2</span>
<span>行3</span>
</body>
</html>
運行結果：
6.盒子在標準流中的定位
1.行內元素之間的水平margin；
距離爲:(margin-right)+(margin-left)；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 行1的右邊的margin爲10px -->
<span style="margin-right: 10px">行1</span>
<!-- 行2的左邊的margin爲10px -->
<span style="margin-left: 10px">行2</span>
</body>
</html>
運行結果：
2.塊級元素之間的豎直margin；
距離爲：margin-bottom與margin-top之間的較大者！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 塊1的下邊的margin爲10px -->
<div style="margin-bottom: 10px">塊1</div>
<!-- 塊2的上邊的margin爲5px -->
<div style="margin-top: 5px">塊2</div>
</body>
</html>
運行結果：
注意：這個上下之間的距離是margin-bottom與margin-top之間的較大者，並不是相加！
3.嵌套盒子之間的margin；
子塊的margin將以父塊的內容爲參考！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 塊1的周圍的margin爲10px -->
<div style="margin: 10px">
塊1
<!-- 塊2的上邊的margin爲20px -->
<div style="margin-top: 20px">塊2</div>
</div>
</body>
</html>
這裏我們用兩個div塊嵌套，其中塊1爲父塊，塊2爲子塊；
這裏塊1和塊2作爲一個整體，上下左右的margin均爲10px；而塊1與塊2之間的上下距離又爲20px； 並不能超過界線！
所以說子塊的margin將以父塊的內容爲參考！
運行結果：
4.margin的屬性可以設置成負值；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 塊1的周圍的margin爲10px -->
<span style="margin: 10px">塊1</span>
<!-- 塊2的周圍的margin爲-30px，這樣會導致塊2向左偏移，從而導致重疊-->
<span style="margin: -30px">塊2</span>
</body>
</html>
這樣設置成負值會導致塊2向塊1偏移，從而會出現重疊現象；
運行結果：
