1.頁面佈局概述
佈局也可以叫做排版，它指的是把文字和圖片等元素按照我們的意願有機地排列在頁面上，佈局的方式分爲兩種：
1、table佈局：通過table元素將頁面空間劃分成若干個單元格，將文字或圖片等元素放入單元格中，隱藏表格的邊框，從而實現佈局。這種佈局方式也叫傳統佈局，目前主要使用在EDM(廣告郵件中的頁面)中，主流的佈局方式不用這種。
2、HTML+CSS佈局(DIV+CSS)：主要通過CSS樣式設置來佈局文字或圖片等元素，需要用到CSS盒子模型、盒子類型、CSS浮動、CSS定位、CSS背景圖定位等知識來佈局，它比傳統佈局要複雜，目前是主流的佈局方式。
2.CSS盒子模型
2.1 盒子模型解釋
元素在頁面中顯示成一個方塊，類似一個盒子，CSS盒子模型就是使用現實中盒子來做比喻，幫助我們設置元素對應的樣式。盒子模型示意圖如下：
把元素叫做盒子，設置對應的樣式分別爲：盒子的寬度(width)、盒子的高度(height)、盒子的邊框(border)、盒子內的內容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。
2.2 設置寬高
width:200px; /* 設置盒子的寬度，此寬度是指盒子內容的寬度，不是盒子整體寬度(難點) */
height:200px; /* 設置盒子的高度，此高度是指盒子內容的高度，不是盒子整體高度(難點) */
2.3 設置邊框
設置一邊的邊框，比如頂部邊框，可以按如下設置：
border-top-color:red; /* 設置頂部邊框顏色爲紅色 */
border-top-width:10px; /* 設置頂部邊框粗細爲10px */
border-top-style:solid; /* 設置頂部邊框的線性爲實線，常用的有：solid(實線)
dashed(虛線) dotted(點線); */
上面三句可以簡寫成一句：
border-top:10px solid red;
設置其它三個邊的方法和上面一樣，把上面的'top'換成'left'就是設置左邊，換成'right'就是設置右邊，換成'bottom'就是設置底邊。
四個邊如果設置一樣，可以將四個邊的設置合併成一句：
border:10px solid red;
2.4 設置內間距padding
設置盒子四邊的內間距，可設置如下：
padding-top：20px; /* 設置頂部內間距20px */
padding-left:30px; /* 設置左邊內間距30px */
padding-right:40px; /* 設置右邊內間距40px */
padding-bottom:50px; /* 設置底部內間距50px */
上面的設置可以簡寫如下：
padding：20px 40px 50px 30px; /* 四個值按照順時針方向，分別設置的是 上 右 下 左
四個方向的內邊距值。 */
padding後面還可以跟3個值，2個值和1個值，它們分別設置的項目如下：
padding：20px 40px 50px; /* 設置頂部內邊距爲20px，左右內邊距爲40px，底部內邊距爲50px */
padding：20px 40px; /* 設置上下內邊距爲20px，左右內邊距爲40px*/
padding：20px; /* 設置四邊內邊距爲20px */
2.5 設置外間距margin
外邊距的設置方法和padding的設置方法相同，將上面設置項中的'padding'換成'margin'就是外邊距設置方法。
2.6 盒子模型使用演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子的真實尺寸</title>
<style type="text/css">
.box01{width:50px;height:50px;background-color:gold;}
.box02{width:50px;height:50px;background-color:gold;border:50px
solid #000}
.box03{width:50px;height:50px;background-color:gold;border:50px
solid #000;padding: 50px;}
</style>
</head>
<body>
<div class="box01">1</div>
<br />
<div class="box02">2</div>
<br />
<div class="box03">3</div>
</body>
</html>
尖叫提示：通過上面的頁面得出結論：盒子的width和height設置的是盒子內容的寬和高，不是盒子本身的寬和高，盒子的真實尺寸計算公式如下：
- 盒子寬度 = width + padding左右 + border左右
- 盒子高度 = height + padding上下 + border上下
3.盒子模型使用技巧及相關問題
3.1 margin相關技巧
1、設置元素水平居中： margin:x auto;
2、margin負值讓元素位移及邊框合併
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width:200px;
height:200px;
background-color:gold;
/* margin:50px auto 100px auto; */
margin:50px auto 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
3.2 外邊距合併
外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。解決方法如下：
1、使用這種特性
2、設置一邊的外邊距，一般設置margin-top
3、將元素浮動或者定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width:500px;
border:1px solid #000;
margin:50px auto 0;
}
.box div{
/* margin-left:20px;
margin-right:20px;
margin-top:20px;
margin-bottom:20px; */
margin:20px;
}
</style>
</head>
<body>
<div class="box">
<div>外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。</div>
<div>外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。</div>
<div>外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。</div>
<div>外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。</div>
</div>
</body>
</html>
3.3 margin-top 塌陷
在兩個盒子嵌套時候，內部的盒子設置的margin-top會加到外邊的盒子上，導致內部的盒子margin-top設置失敗，解決方法如下：
1、外部盒子設置一個邊框
2、外部盒子設置 overflow:hidden
3、使用僞元素類
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 第三種解決塌陷的方法 */
.clearfix:before{
content:"";
display:table;
}
.con{
width:300px;
height:300px;
background-color:gold;
/* border:1px solid #000; 第一種解決塌陷的方法 */
/* overflow:hidden; 第二章解決塌陷的方法 */
}
.box{
width:200px;
height:100px;
background-color:green;
margin-top:100px;
margin-left:50px;
}
</style>
</head>
<body>
<div class="con clearfix">
<div class="box"></div>
</div>
</body>
</html>