什么是盒子？
CSS處理網(wǎng)頁時，它認(rèn)為每個元素都包含在一 個不可見的盒子里。
我們只需要將相應(yīng)的盒子擺放到網(wǎng)頁中相應(yīng)的 位置即可完成網(wǎng)頁的布局。
盒子模型-
一個盒子我們會分成幾個部分：
-內(nèi)容區(qū)(content)
-內(nèi)邊距(padding)
-邊框(border)
-外邊距(margin)
image.png 使用width來設(shè)置盒子內(nèi)容區(qū)的寬度
使用height來設(shè)置盒子內(nèi)容區(qū)的高度
width和height只是設(shè)置的盒子內(nèi)容區(qū)的大小，而不是盒子的整個大小，盒子可見框的大小由內(nèi)容區(qū)，內(nèi)邊距和邊框共同決定
為元素設(shè)置邊框
內(nèi)容區(qū)
- 內(nèi)容區(qū)指的是盒子中放置內(nèi)容的區(qū)域，也就是元素 中的文本內(nèi)容，子元素都是存在于內(nèi)容區(qū)中的。
- 如果沒有為元素設(shè)置內(nèi)邊距和邊框，則內(nèi)容區(qū)大小 默認(rèn)和盒子大小是一致的。
- 通過width和height兩個屬性可以設(shè)置內(nèi)容區(qū)的大 小。
- width和height屬性只適用于塊元素。
邊框
可以在元素周圍創(chuàng)建邊框，邊框是元素可見框的最外部。
-
可以使用border屬性來設(shè)置盒子的邊框：
border:1px red solid;
-上邊的樣式分別指定了邊框的寬度、顏色和樣式。
-
也可以使用分別指定上右下左 四個方向的邊框。
border-top/left/right/bottom 和padding一樣，默認(rèn)width和height并包括邊框的寬度。
要為一個元素設(shè)置邊框必須指定三個樣式
border-width:邊框的寬度
border-color:邊框顏色
border-style:邊框的樣式使用border-width可以分別指定四個邊框的寬度 如果在border-width指定了四個值 則四個值會分別設(shè)置給上、右、下、左，按照順時針的方向設(shè)置的 如果指定三個值 則三個值會分別設(shè)置給上、左右、下 如果指定兩個值 則兩個值會分別設(shè)置給上下、左右 如果指定一個值，則四邊全都是該值 除了border-width，CSS中還提供了四個border-xxx-width xxx的值可能是top right bottom left 專門用來設(shè)置指定邊的寬度設(shè)置邊框的顏色
和寬度一樣，color也提供四個方向的樣式，可以分別指定顏色
border-xxx-color
border-color: red;
border-color: red yellow orange blue;
border-color: red yellow orange;
border-color: red yellow;
-
邊框可以設(shè)置多種樣式：border-style:
none（沒有邊框） dotted（點線） dashed（虛線） solid（實線） double（雙線） groove（槽線） ridge（脊線） inset（凹邊） outset（凸邊） -
style也可以分別指定四個邊的邊框樣式，規(guī)則和width一致，同時它也提供border-xxx-style四個樣式，來分別設(shè)置四個邊
.box1{ width: 300px; height: 300px; /*設(shè)置背景顏色*/ background-color: #bfa; /*設(shè)置邊框?qū)挾?/ border-width:10px; /*設(shè)置邊框顏色*/ border-color: red; /*設(shè)置邊框樣式*/ border-style: solid dotted dashed double; }
內(nèi)邊距
顧名思義，內(nèi)邊距指的就是元素內(nèi)容區(qū)與邊框以內(nèi) 的空間。
默認(rèn)情況下width和height不包含padding的大小。
使用padding屬性來設(shè)置元素的內(nèi)邊距。
-
例如：
-padding:10px 20px 30px 40px
-這樣會設(shè)置元素的上、右、下、左四個方向的內(nèi)邊距。
內(nèi)邊距
內(nèi)邊距會影響盒子的可見框的大小，元素的背景會延伸到內(nèi)邊距
-
盒子的大小由內(nèi)容區(qū)、內(nèi)邊距和邊框共同決定
盒子可見框的寬度 = border-left-width + padding-left + width + padding-right + border-right-width
盒子可見框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width/*設(shè)置上內(nèi)邊距*/ padding-top: 100px; /*設(shè)置右內(nèi)邊距*/ padding-right: 100px; 設(shè)置下內(nèi)邊距 padding-bottom: 100px; 設(shè)置坐內(nèi)邊距 padding-left: 100px; /* 使用padding可以同時設(shè)置四個邊框的樣式，規(guī)則和border-width一致 */ padding: 100px; padding: 100px 200px; padding: 100px 200px 300px;
外邊距
外邊距指的是當(dāng)前盒子與其他盒子之間的距離，他不會影響可見框的大小，而是會影響到盒子的位置
盒子有四個方向的外邊距：
margin-top
margin-right
margin-bottom
margin-left-
由于頁面中的元素都是靠左靠上擺放的，所以注意當(dāng)我們設(shè)置上和左外邊距時，會導(dǎo)致盒子自身的位置發(fā)生改變，而如果是設(shè)置右和下外邊距會改變其他盒子的位置
/*設(shè)置上外邊距，即盒子的上邊框與其他盒子的距離*/ margin-top: 100px; /*左外邊距*/ margin-left: 100px; /*設(shè)置右和下外邊距*/ margin-right: 100px; margin-bottom: 100px; /* 外邊距也可以指定為一個負(fù)值，如果外邊距設(shè)置的是負(fù)值，則元素會向反方向移動 */ margin-left: -100px; margin-top: -100px; margin-bottom: -100px; margin-bottom: -100px; margin還可以設(shè)置為auto，auto一般只設(shè)置給水平方向的margin如果只指定，左外邊距或右外邊距的margin為auto則會將外邊距設(shè)置為最大值
垂直方向外邊距如果設(shè)置為auto，則外邊距默認(rèn)就是0
如果將left和right同時設(shè)置為auto，則會將兩側(cè)的外邊距設(shè)置為相同的值，就可以使元素自動在父元素中居中
所以我們經(jīng)常將左右外邊距設(shè)置為auto，以使子元素在父元素中水平居中-
當(dāng)將左右外邊距設(shè)置為auto時，瀏覽器會將左右外 邊距設(shè)置為相等，所以這行代碼margin:0 auto可 以使元素居中。
margin-left: auto; margin-right: auto; margin-top: auto; -
外邊距同樣可以使用簡寫屬性 margin，可以同時設(shè)置四個方向的外邊距,規(guī)則和padding一樣
margin: 10px 20px 30px 40px;
外邊距重疊
-
垂直外邊距的重疊
在網(wǎng)頁中相鄰的垂直方向的外邊距會發(fā)生外邊距的重疊.box1{ width: 100px; height: 100px; background-color: red; /*為上邊的元素設(shè)置一個下外邊距*/ margin-bottom: 100px; } .box2{ width: 100px; height: 100px; background-color: green; /*為下邊的元素設(shè)置一個上外邊距*/ margin-top: 100px;
所謂的外邊距重疊指兄弟元素之間的相鄰?fù)膺吘鄷∽畲笾刀皇侨『?/p>
- 如果父子元素的垂直外邊距相鄰了，則子元素的外邊距會設(shè)置給父元素。
- 相鄰父元素子元素外邊距會發(fā)生外邊距垂直重疊。 給父元素添加padding和border可以把父元素子元素隔開，或者在父子元素中間添加個元素，隔開父子元素就不會發(fā)生重疊。
瀏覽器的默認(rèn)樣式
瀏覽器為了在頁面中沒有樣式時，也可以有一個比較好的顯示效果，所以為很多的元素都設(shè)置了一些默認(rèn)的margin和padding，而它的這些默認(rèn)樣式，正常情況下我們是不需要使用的。
-
所以我們往往在編寫樣式之前需要將瀏覽器中的默認(rèn)的margin和padding統(tǒng)統(tǒng)的去掉
*{margin=0; padding=0}
內(nèi)聯(lián)元素的盒模型
注意：內(nèi)聯(lián)元素不能設(shè)置寬和高！！
-
設(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)邊距，但是不會影響頁面的布局
padding-top: 50px; padding-bottom: 50px; -
為元素設(shè)置邊框,內(nèi)聯(lián)元素可以設(shè)置邊框，但是垂直的邊框不會影響到頁面的布局
border: 1px blue solid; -
水平外邊距，內(nèi)聯(lián)元素支持水平方向的外邊距
margin-left:100px; margin-right: 100px; -
為右邊的元素設(shè)置一個左外邊距
水平方向的相鄰?fù)膺吘嗖粫丿B，而是求和margin-left: 100px; -
內(nèi)聯(lián)元素不支持垂直外邊距margin-top: 200px; margin-bottom: 200px;
display 和 visibility
display
我們不能為行內(nèi)元素設(shè)置width、height、 margin-top和margin-bottom。
我們可以通過修改display來修改元素的性 質(zhì)。
可選值：
block：設(shè)置元素為塊元素
inline：設(shè)置元素為行內(nèi)元素
inline-block：設(shè)置元素為行內(nèi)塊元素
none：隱藏元素（元素將在頁面中完全消失）
visibilityvisibility屬性主要用于元素是否可見。
和display不同，使用visibility隱藏一個元 素，隱藏后其在文檔中所占的位置會依然 保持，不會被其他元素覆蓋。
-
可選值：
visible：可見的
hidden：隱藏的display: none;使用該方式隱藏的元素，不會在頁面中顯示，并且不再占據(jù)頁面的位置 visibility:hidden;隱藏的元素雖然不會在頁面中顯示，但是它的位置會依然保持
overflow
子元素默認(rèn)是存在于父元素的內(nèi)容區(qū)中，理論上講子元素的最大可以等于父元素內(nèi)容區(qū)大小
如果子元素的大小超過了父元素的內(nèi)容區(qū)，則超過的大小會在父元素以外的位置顯示
超出父元素的內(nèi)容，我們稱為溢出的內(nèi)容父元素默認(rèn)是將溢出內(nèi)容，在父元素外邊顯示
通過overflow可以設(shè)置父元素如何處理溢出內(nèi)容：-
可選值：
- visible，默認(rèn)值，不會對溢出內(nèi)容做處理，元素會在父元素以外的位置顯示
- hidden, 溢出的內(nèi)容，會被修剪，不會顯示（常用）
- scroll, 會為父元素添加滾動條，通過拖動滾動條來查看完整內(nèi)容
- 該屬性不論內(nèi)容是否溢出，都會添加水平和垂直雙方向的滾動條
- auto，會根據(jù)需求自動添加滾動條，需要水平就添加水平，需要垂直就添加垂直，都不需要就都不加.box1{ width: 200px; height: 200px; background-color: #bfa; /*自動添加滾動條*/ overflow: auto; }
文檔流
文檔流處在網(wǎng)頁的最底層，它表示的是一個頁面中的位置，我們所創(chuàng)建的元素默認(rèn)都處在文檔流中
元素在文檔流中的特點
- 塊元素
1.塊元素在文檔流中會獨占一行，塊元素會自上向下排列
2.塊元素在文檔流中默認(rèn)寬度是父元素的100%
3.塊元素在文檔流中的高度默認(rèn)被內(nèi)容撐開 - 內(nèi)聯(lián)元素
1.內(nèi)聯(lián)元素在文檔流中只占自身的大小，會默認(rèn)從左向右排列，如果一行中不足以容納所有的內(nèi)聯(lián)元素，則換到下一行，繼續(xù)自左向右。
2.在文檔流中，內(nèi)聯(lián)元素的寬度和高度默認(rèn)都被內(nèi)容撐開
當(dāng)元素的寬度的值為auto時，此時指定內(nèi)邊距不會影響可見框的大小，而是會自動修改寬度，以適應(yīng)內(nèi)邊距
浮動
塊元素在文檔流中默認(rèn)垂直排列，所以這個三個div自上至下依次排開
- 如果希望塊元素在頁面中水平排列，可以使塊元素脫離文檔流
使用float來使元素浮動，從而脫離文檔流 - 可選值：
none，默認(rèn)值，元素默認(rèn)在文檔流中排列
left，元素會立即脫離文檔流，向頁面的左側(cè)浮動
right，元素會立即脫離文檔流，向頁面的右側(cè)浮動 - 當(dāng)為一個元素設(shè)置浮動以后（float屬性是一個非none的值），元素會立即脫離文檔流，元素脫離文檔流以后，它下邊的元素會立即向上移動
- 元素浮動以后，會盡量向頁面的左上或這是右上漂浮，直到遇到父元素的邊框或者其他的浮動元素
- 如果浮動元素上邊是一個沒有浮動的塊元素，則浮動元素不會超過塊元素
- 塊級元素和行內(nèi)元素都可以浮動，當(dāng)一個行內(nèi)元素浮動以后將會自動變?yōu)橐?個塊級元素。
- 當(dāng)一個塊級元素浮動以后，寬度會默認(rèn)被內(nèi)容撐開，所以當(dāng)漂浮一個塊級元 素時我們都會為其指定一個寬度。
內(nèi)聯(lián)元素的浮動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮動</title>
<style type="text/css">
.box1{
/*在文檔流中，子元素的寬度默認(rèn)占父元素的全部*/
/*height: 100px;*/
background-color: #bfa;
/*
當(dāng)元素設(shè)置浮動以后，會完全脫離文檔流.
塊元素脫離文檔流以后，高度和寬度都被內(nèi)容撐開
*/
/*float: left;*/
}
.s1{
/*
開啟span的浮動
內(nèi)聯(lián)元素脫離文檔流以后會變成塊元素
*/
float: left;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1">a</div>
<span class="s1">hello</span>
<span class="s1">hello</span>
</body>
</html>
內(nèi)聯(lián)元素是不能設(shè)置寬和高的，但是浮動以后內(nèi)聯(lián)元素變成塊元素了，就能夠設(shè)置寬和高了。
高度塌陷
在文檔流中，父元素的高度默認(rèn)是被子元素?fù)伍_的，也就是子元素多高，父元素就多高
但是當(dāng)為子元素設(shè)置浮動以后，子元素會完全脫離文檔流，此時將會導(dǎo)致子元素?zé)o法撐起父元素的高度，導(dǎo)致父元素的高度塌陷
由于父元素的高度塌陷了，則父元素下的所有元素都會向上移動，這樣將會導(dǎo)致頁面布局混亂
所以在開發(fā)中一定要避免出現(xiàn)高度塌陷的問題,
我們可以將父元素的高度寫死，以避免塌陷的問題出現(xiàn)，
但是一旦高度寫死，父元素的高度將不能自動適應(yīng)子元素的高度，所以這種方案是不推薦使用的-
根據(jù)W3C的標(biāo)準(zhǔn)，在頁面中元素都一個隱含的屬性叫做Block Formatting Context（塊的格式化環(huán)境）簡稱BFC，該屬性可以設(shè)置打開或者關(guān)閉，默認(rèn)是關(guān)閉的
當(dāng)開啟元素的BFC以后，元素將會具有如下的特性：
1.父元素的垂直外邊距不會和子元素重疊
2.開啟BFC的元素不會被浮動元素所覆蓋
3.開啟BFC的元素可以包含浮動的子元素如何開啟元素的BFC 1.設(shè)置元素浮動 - 使用這種方式開啟，雖然可以撐開父元素，但是會導(dǎo)致父元素的寬度丟失，而且使用這種方式也會導(dǎo)致下邊的元素上移，不能解決問題 2.設(shè)置元素絕對定位 3.設(shè)置元素為inline-block - 可以解決問題，但是會導(dǎo)致寬度丟失，不推薦使用這種方式 4.將元素的overflow設(shè)置為一個非visible的值 推薦方式：將overflow設(shè)置為hidden是副作用最小的開啟BFC的方式
BFC塊的格式化環(huán)境，默認(rèn)是關(guān)閉的，
當(dāng)開啟的時候：
1、父元素的垂直外邊距不會和子元素重疊
2、開啟的BFC元素不會被浮動元素所覆蓋
3、開啟的BFC元可以包含浮動的子元素-
如何開啟：
1、設(shè)置元素浮動(會導(dǎo)致父元素寬度消失，下面的元素頂上來，不推薦使用)
2、設(shè)置元素絕對定位（不推薦使用）
3、設(shè)置元素為inline-block（不推薦使用）
4、解決高度塌陷方案一：
將元素的overflow設(shè)置為一個非visible的值（推薦）（overflow:hidden）
5、解決高度塌陷方案二：
可以直接在高度塌陷的父元素的最后，添加一個空白的div，由于這個div并沒有浮動，所以他是可以撐開父元素的高度的
然后再對其進(jìn)行清除浮動，這樣可以通過這個空白的div來撐開父元素的高度，基本沒有副作用。使用這種方式雖然可以解決問題，但是會在頁面中添加多余的結(jié)構(gòu)（推薦）
6、解決高度塌陷方案三：可以通過after偽類向元素的最后添加一個空白的塊元素，然后對其清除浮動，
這樣做和添加一個div的原理一樣，可以達(dá)到一個相同的效果，
而且不會在頁面中添加多余的div，這是我們最推薦使用的方式，幾乎沒有副作用通過設(shè)置after偽類centent:"";并轉(zhuǎn)成塊元素display:biock;再清除浮動clear:both;解決高度塌陷。（推薦）
使用clearfix命名
在IE6中不支持after偽類,所以在IE6中還需要使用hasLayout來處理.clearfix:after{ /*添加一個內(nèi)容*/ content: ""; /*轉(zhuǎn)換為一個塊元素*/ display: block; /*清除兩側(cè)的浮動*/ clear: both; } /*在IE6中不支持after偽類,所以在IE6中還需要使用hasLayout來處理*/ .clearfix{ zoom: 1; } </style> </head> <body> <div class="box1 clearfix"> <div class="box2"></div> </div> </body> </html> -
但是在IE6及以下的瀏覽器中并不支持BFC，所以使用這種方式不能兼容IE6
在IE6中雖然沒有BFC，但是具有另一個隱含的屬性叫做hasLayout，該屬性的作用和BFC類似，所在IE6瀏覽器可以通過開hasLayout來解決該問題
開啟方式很多，我們直接使用一種副作用最小的：
直接將元素的zoom設(shè)置為1即可zoom表示放大的意思，后邊跟著一個數(shù)值，寫幾就將元素放大幾倍 zoom:1表示不放大元素，但是通過該樣式可以開啟hasLayout zoom這個樣式，只在IE中支持，其他瀏覽器都不支持
如果設(shè)置了寬度，CSS就默認(rèn)開啟BFC
.clear{
centen="";
display:block;
clear:both;
}
.clear{
zoom:1;
}
清除浮動
由于受到box1浮動的影響，box2整體向上移動了100px
我們有時希望清除掉其他元素浮動對當(dāng)前元素產(chǎn)生的影響，這時可以使用clear來完成功能
-
可選值：
none，默認(rèn)值，不清除浮動
left，清除左側(cè)浮動元素對當(dāng)前元素的影響
right，清除右側(cè)浮動元素對當(dāng)前元素的影響
both，清除兩側(cè)浮動元素對當(dāng)前元素的影響
清除對他影響最大的那個元素的浮動.box3{ width: 300px; height: 300px; background-color: skyblue; clear: both; } 清除box1浮動對box2產(chǎn)生的影響 清除浮動以后，元素會回到其他元素浮動之前的位置 clear屬性可以用于清除元素周圍的浮動對元素的影響。
也就是元素不會因為上方出現(xiàn)了浮動元素而改變位置。
文字繞圖
浮動的元素不會蓋住文字，文字會自動環(huán)繞在浮動元素的周圍，所以我們可以通過浮動來設(shè)置文字環(huán)繞圖片的效果
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
float: left;
}
.p1{
/*height: 200px;*/
background-color: yellow;
