? ? 外邊距：邊界重疊是指兩個(gè)或多個(gè)盒子(可能相鄰也可能嵌套)的相鄰邊界(其間沒有任何非空內(nèi)容、補(bǔ)白、邊框)重合在一起而形成一個(gè)單一邊界。
兩個(gè)或多個(gè)塊級(jí)盒子的垂直相鄰邊界會(huì)重合。結(jié)果的邊界寬度是相鄰邊界寬度中最大的值。如果出現(xiàn)負(fù)邊界，則在最大的正邊界中減去絕對(duì)值最大的負(fù)邊界。如果沒有正邊界，則從零中減去絕對(duì)值最大的負(fù)邊界。注意：相鄰的盒子可能并非是由父子關(guān)系或同胞關(guān)系的元素生成。
瀏覽器默認(rèn)樣式：<!-- 默認(rèn)的input -->
<form>
<input type="text" required><br/>
<input type="possword" required><br/>
<input type="submit">
</form>
內(nèi)聯(lián)元素的盒模型：<style type="text/css">
span{
background-color: #bfa;
}
.box1{
width: 100px;
height: 100px;
background-color: red;
}
.s1{
盒模型分成內(nèi)容區(qū)、內(nèi)邊距 、邊框 、外邊距四個(gè)部分
內(nèi)聯(lián)元素不能設(shè)置width和height
?width: 100px;
height: 100px;?
設(shè)置水平內(nèi)邊距,內(nèi)聯(lián)元素可以設(shè)置水平方向的內(nèi)邊距
padding-left: 100px;
padding-right: 100px;
垂直方向內(nèi)邊距，內(nèi)聯(lián)元素可以設(shè)置垂直方向內(nèi)邊距，但是不會(huì)影響頁(yè)面的布局
padding-top: 50px;
padding-bottom: 50px;
為元素設(shè)置邊框,內(nèi)聯(lián)元素可以設(shè)置邊框，但是垂直的邊框不會(huì)影響到頁(yè)面的布局
border: 1px blue solid;
水平外邊距，內(nèi)聯(lián)元素支持水平方向的外邊距
margin-left:100px;
margin-right: 100px;
}
.s2{
為右邊的元素設(shè)置一個(gè)左外邊距
水平方向的相鄰?fù)膺吘嗖粫?huì)重疊，而是求和
margin-left: 100px;
內(nèi)聯(lián)元素不支持垂直外邊距
margin-top: 200px;
margin-bottom: 200px;
}
display和visibility
將一個(gè)內(nèi)聯(lián)元素變成塊元素
通過(guò)display樣式可以修改元素的類型
可選值：
inline：可以將一個(gè)元素作為內(nèi)聯(lián)元素顯示
block: 可以將一個(gè)元素設(shè)置塊元素顯示
inline-block：將一個(gè)元素轉(zhuǎn)換為行內(nèi)塊元素
- 可以使一個(gè)元素既有行內(nèi)元素的特點(diǎn)又有塊元素的特點(diǎn)，既可以設(shè)置寬高，又不會(huì)獨(dú)占一行
none: 不顯示元素，并且元素不會(huì)在頁(yè)面中繼續(xù)占有位置
display: none;
使用該方式隱藏的元素，不會(huì)在頁(yè)面中顯示，并且不再占據(jù)頁(yè)面的位置
display: none;
.........................................................................................................................
* visibility
* - 可以用來(lái)設(shè)置元素的隱藏和顯示的狀態(tài)
* - 可選值：
* visible 默認(rèn)值，元素默認(rèn)會(huì)在頁(yè)面顯示
* hidden 元素會(huì)隱藏不顯示
overflow
子元素默認(rèn)是存在于父元素的內(nèi)容區(qū)中，理論上講子元素的最大可以等于父元素內(nèi)容區(qū)大小
如果子元素的大小超過(guò)了父元素的內(nèi)容區(qū)，則超過(guò)的大小會(huì)在父元素以外的位置顯示
超出父元素的內(nèi)容，我們稱為溢出的內(nèi)容
父元素默認(rèn)是將溢出內(nèi)容，在父元素外邊顯示
通過(guò)overflow可以設(shè)置父元素如何處理溢出內(nèi)容：
可選值：
- visible，默認(rèn)值，不會(huì)對(duì)溢出內(nèi)容做處理，元素會(huì)在父元素以外的位置顯示
- hidden, 溢出的內(nèi)容，會(huì)被修剪，不會(huì)顯示
- scroll, 會(huì)為父元素添加滾動(dòng)條，通過(guò)拖動(dòng)滾動(dòng)條來(lái)查看完整內(nèi)容
- 該屬性不論內(nèi)容是否溢出，都會(huì)添加水平和垂直雙方向的滾動(dòng)條
- auto，會(huì)根據(jù)需求自動(dòng)添加滾動(dòng)條，需要水平就添加水平，需要垂直就添加垂直，都不需要就都不加
............................................................................................................................................................
文檔流
文檔流處在網(wǎng)頁(yè)的最底層，它表示的是一個(gè)頁(yè)面中的位置，我們所創(chuàng)建的元素默認(rèn)都處在文檔流中
元素在文檔流中的特點(diǎn)
塊元素
1.塊元素在文檔流中會(huì)獨(dú)占一行，塊元素會(huì)自上向下排列
2.塊元素在文檔流中默認(rèn)寬度是父元素的100%
3.塊元素在文檔流中的高度默認(rèn)被內(nèi)容撐開
內(nèi)聯(lián)元素
1.內(nèi)聯(lián)元素在文檔流中只占自身的大小，會(huì)默認(rèn)從左向右排列，如果一行中不足以容納所有的內(nèi)聯(lián)元素，則換到下一行，繼續(xù)自左向右。
2.在文檔流中，內(nèi)聯(lián)元素的寬度和高度默認(rèn)都被內(nèi)容撐開
............................................................................................................................................................
浮動(dòng)
塊元素在文檔流中默認(rèn)垂直排列，所以這個(gè)三個(gè)div自上至下依次排開
如果希望塊元素在頁(yè)面中水平排列，可以使塊元素脫離文檔流
使用float來(lái)使元素浮動(dòng)，從而脫離文檔流
可選值：
none，默認(rèn)值，元素默認(rèn)在文檔流中排列
left，元素會(huì)立即脫離文檔流，向頁(yè)面的左側(cè)浮動(dòng)
right，元素會(huì)立即脫離文檔流，向頁(yè)面的右側(cè)浮動(dòng)
當(dāng)為一個(gè)元素設(shè)置浮動(dòng)以后（float屬性是一個(gè)非none的值），元素會(huì)立即脫離文檔流，元素脫離文檔流以后，它下邊的元素會(huì)立即向上移動(dòng)
元素浮動(dòng)以后，會(huì)盡量向頁(yè)面的左上或這是右上漂浮，直到遇到父元素的邊框或者其他的浮動(dòng)元素
如果浮動(dòng)元素上邊是一個(gè)沒有浮動(dòng)的塊元素，則浮動(dòng)元素不會(huì)超過(guò)塊元素
............................................................................................................................................................
文字環(huán)繞
浮動(dòng)的元素不會(huì)蓋住文字，文字會(huì)自動(dòng)環(huán)繞在浮動(dòng)元素的周圍，所以我們可以通過(guò)浮動(dòng)來(lái)設(shè)置文字環(huán)繞圖片的效果
............................................................................................................................................................
