如果文章對(duì)你有幫助，請(qǐng)點(diǎn)喜歡并關(guān)注，這將是我最大的動(dòng)力。
1.理解盒模型
1.1什么是盒模型
如圖：
1.2.盒模型知識(shí)點(diǎn)分析
1.2.1.content
文檔的主體部分，可以是文字圖片，或者是標(biāo)簽
1.2.2.padding
填充，也就是content和border之間的距離填充距離也可以使用簡(jiǎn)寫(xiě) padding：10px 20px 5px 15px 從上開(kāi)始順時(shí)針上右下左
1.2.3.border
邊框，就是這個(gè)盒子的外殼，當(dāng)然他也有自己的寬度
常見(jiàn)樣式：
1.width：1px-------邊框?qū)挾?br>
2.style:solid-----邊框樣式，常見(jiàn)的有solid(實(shí)線)/dashed(虛線)/dotted(點(diǎn)線)
3.border-color:red-----------邊框顏色
1.2.4.margin
盒模型與盒模型之間的距離
margin距離同樣也可以使用簡(jiǎn)寫(xiě) margin：10px 20px 5px 15px 從上開(kāi)始順時(shí)針上右下左
1.3盒模型的高寬
1.3.1.css定義的高（hright）寬（width）
指的是padding以?xún)?nèi)的高寬，也就是content的高寬。
1.3.2.盒子實(shí)際的高寬
盒子高度=(margin-top)+(padding-top)+content+(padding-bottom)+(margin-bottom)
盒子寬度=(margin-left)+(padding-left)+content+(padding-right)+(margin-right)
2.元素的布局模型
2.1.流動(dòng)模型(flow)
2.1.1.流動(dòng)模型簡(jiǎn)介
是默認(rèn)的網(wǎng)頁(yè)布局模式。也就是說(shuō)，默認(rèn)狀態(tài)下網(wǎng)頁(yè)都是根據(jù)流動(dòng)模型來(lái)分布網(wǎng)頁(yè)內(nèi)容的。
2.1.2.什么是流動(dòng)模型
流動(dòng)模型具有以下特點(diǎn)：
1).塊狀元素都會(huì)在父元素內(nèi)自上而下按順序垂直延伸（默認(rèn)獨(dú)占一行），因?yàn)閴K狀元素默認(rèn)寬度100%。
2).內(nèi)聯(lián)元素都會(huì)在父元素內(nèi)水平方向從左到右分布。
2.2.浮動(dòng)模型(float)
2.2.1浮動(dòng)模型定義
float 屬性定義元素在哪個(gè)方向浮動(dòng)。
2.2.2為什么需要浮動(dòng)模型
在流動(dòng)模型中，塊狀元素都是獨(dú)占一行的，如果想要讓兩個(gè)塊狀元素并排顯示，就需要使用浮動(dòng)模型。
2.2.3浮動(dòng)模型用法
用法：float:left/right/inherit-------分別是元素向左浮動(dòng)，向右浮動(dòng)，以及繼承父元素。
2.3.層模型
2.3.1.什么是層模型
層模型就像photoshop中的圖層編輯功能，對(duì)每個(gè)圖層都可以精準(zhǔn)定位操作。層模型有三種形式：
1).絕對(duì)定位 position:absolute
2).相對(duì)定位 position:relative
3).固定定位 positoin:fixed
2.3.2絕對(duì)定位(absolute)
直接看代碼：
div{
position:absolute;
left:20px;
top:30px;
}
這個(gè)div元素就會(huì)在其最接近的父元素內(nèi)進(jìn)行絕對(duì)定位，使其left的值直接設(shè)置為為20px，top的值直接設(shè)置為30px；
2.3.3.相對(duì)定位(relate)
定義：生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。
因此，left:20 會(huì)向元素的left位置增加20px;
2.3.4.固定定位(fixed)
定義：生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。
因此，如果設(shè)置bottom:0;那么該元素會(huì)始終顯示在瀏覽器底部。
3.用div來(lái)布局頁(yè)面
3.1.用div元素代表各個(gè)區(qū)域：
<body>
<div id="container">
<div id="header">頭部</div>
<div id="sidebar">側(cè)欄</div>
<div id="content">文本主體</div>
<div id="footer">尾部</div
</div>
</body>
3.2.用css來(lái)設(shè)定區(qū)域大?。ㄟ@里用邊框加以區(qū)分）：
<style type="text/css">
body{
margin: 0px;
}
div#container{
overflow: auto;-------------容器大小自適應(yīng)
}
div#header{
width: 1421px;
border: 1px solid red;
height:100px;
}
div#sidebar{
width:300px;
height:520px;
border: 1px solid red;------------簡(jiǎn)寫(xiě)
float: left;
}
div#content{
width:1119px;
height:520px;
border: 1px solid green;
float: right;-------------浮動(dòng)
}
div#footer{
height: 89px;
border: 1px solid yellow;
clear: both;--------------清除左右側(cè)浮動(dòng)
}
</style>
如圖
3.3.對(duì)例子中div代碼知識(shí)點(diǎn)分析
3.3.1.border
這里的border:1px solid red;是簡(jiǎn)寫(xiě)，他等價(jià)于
border-width:1px;
border-style:solid;
border-color:red;
3.3.2.float
float屬性是div布局中最基本也是最常用的屬性，用于實(shí)現(xiàn)多列功能，我們知道<div>標(biāo)簽?zāi)J(rèn)一行只能顯示一個(gè)，而使用Float屬性可以實(shí)現(xiàn)一行顯示多個(gè)div的功能，最直接解釋方法就是能實(shí)現(xiàn)表格布局的多列功能。
3.3.3.clear
使用float屬性設(shè)置一行有多個(gè)div后（多列），最好在下一行開(kāi)始之前使用clear屬性清楚一下浮動(dòng)，否則上面的布局會(huì)影響到下面。
常用屬性：clear:left/right/both 分別對(duì)應(yīng)左側(cè)/右側(cè)/左右兩側(cè)不允許出現(xiàn)浮動(dòng)元素
