標(biāo)準(zhǔn)文檔流
一.標(biāo)準(zhǔn)流中的微觀現(xiàn)象:
1>空白折疊現(xiàn)象
//CSS:
<style type="text/css">
span{
background-color: greenyellow;
font-size: 20px;
}
</style>
//HTML
<span class="box1">怎么么怎么怎么啦</span>
<span class="box2">怎么么怎么怎么啦</span>
<span class="box3">怎么么怎么怎么啦</span>
2>高矮不齊,底邊對(duì)齊
如果又有圖片且圖片參差不齊的,又有文字。則會(huì)出現(xiàn)高矮不齊,底邊對(duì)齊的情況。
3>自動(dòng)換行，一行不滿，換行寫
二. 塊級(jí)元素和行內(nèi)元素
2.1 塊級(jí)元素
- 獨(dú)占一行
- 能設(shè)置寬高度，如果不設(shè)置寬度，則默認(rèn)會(huì)變?yōu)楦赣H的100%
2.2 行內(nèi)元素
- 與其他行內(nèi)元素并排
- 不能設(shè)置寬高度，默認(rèn)就是文字的寬度
在HTML，分為文本級(jí)、容器級(jí)。
文本級(jí):p、span、a、b、i、u、em
容器級(jí): div、h系列、li、dt、dd
在CSS，與HTML很像，p是特殊。
所有的文本級(jí)標(biāo)簽，都是行內(nèi)元素，除p外，p在HTML是文本級(jí)，但是在CSS中是個(gè)塊級(jí)元素
所有的容器級(jí)標(biāo)簽都是塊級(jí)元素
三.塊級(jí)元素和行內(nèi)元素相互轉(zhuǎn)換
div{
display:inline;
background-color:red;
width:200px;
height:200px;
}
span{
display:block;
background-color:red;
width:200px;
height:200px;
}
只要設(shè)置display:就可以改變行內(nèi)或者是塊級(jí)的性質(zhì)
1）設(shè)置為inline之后，這個(gè)標(biāo)簽將變?yōu)樾袠I(yè)元素，則此時(shí)的div不能設(shè)置寬高度了，但是可以與別人并排了。
2）設(shè)置為block之后，這個(gè)標(biāo)簽將變?yōu)閴K級(jí)元素，則此時(shí)的span就能設(shè)置寬高度了，此時(shí)的span是獨(dú)占一行的，無法并排，如果不設(shè)置高度，將撐滿父親。
脫離標(biāo)準(zhǔn)文檔流
標(biāo)準(zhǔn)文檔流里面的限制很多，比如要實(shí)現(xiàn)既要并排，又要設(shè)置寬高，此刻就要脫離標(biāo)準(zhǔn)流。
CSS中有三種手段，使一個(gè)元素脫離標(biāo)準(zhǔn)文檔流：
1>浮動(dòng)(注:右浮動(dòng)跟左浮動(dòng)是一樣的原理)
此時(shí)兩個(gè)元素并排了，且都設(shè)置了寬度和高度。（標(biāo)準(zhǔn)流中是不能這樣的既要并排，又要設(shè)置寬高的）
-
浮動(dòng)元素互相貼靠
如果有足夠的空間，老三會(huì)靠著老二，如果沒有足夠的空間老三就會(huì)靠著老大，如果沒有足夠的空間，那么就會(huì)去貼左墻。
Snip20161111_45.png
- 浮動(dòng)元素有“自圍”效果
HTML
<div class="box1">
老大</div>
<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈</p>
讓div浮動(dòng)，p不浮動(dòng)。div擋住了p,但是p中的字不會(huì)被擋住，形成自圍效果。
浮動(dòng)清除(四種方法)
現(xiàn)在有兩個(gè)div,div沒有任何屬性，li中所有元素都是浮動(dòng)的
//HTML:
<div>
<ul><li>語文</li>
<li>數(shù)學(xué)</li>
<li>英語</li>
<li>生物</li>
<li>地理</li>
</ul>
</div>
<div>
<ul>
<li>iOS</li>
<li>java</li>
<li>安卓</li>
</ul>
</div>
//CSS:
li{
float: left;
margin-left: 10px;
width: 50px;
background-color: fuchsia;
}
以為這些li會(huì)分成兩排，然而并不是那樣的，第二組中第一個(gè)去貼第一組中的最后一個(gè)li了。理由：因?yàn)閐iv沒有高度，不能給浮動(dòng)的元素一個(gè)容器。故看到的便是下面的這種狀態(tài)。
-
浮動(dòng)的元素的祖先元素加高度
如果一個(gè)元素要浮動(dòng)，那么其祖先元素一定要有高度，有高度的盒子，才能管住浮動(dòng)。只要浮動(dòng)在一個(gè)有高度的盒子中，那么這個(gè)浮動(dòng)就不會(huì)影響后面的浮動(dòng)元素，這樣消除浮動(dòng)了。
浮動(dòng)的元素的祖先元素加高度 clear:both;
both指的是左右浮動(dòng)都清除。
-
隔墻法
隔墻法
隔墻法最終顯示效果
內(nèi)墻法：
- overflow:hidden;
overflow:hidden：溢出隱藏，所有溢出邊框的內(nèi)容，都要隱藏掉。
本意就是清除溢出到盒子外面的文字。但是卻發(fā)現(xiàn)它能做偏方。
一個(gè)父親不能被自己浮動(dòng)的兒子，撐出高度。但是，只要給父親加上overflow:hidden; 那么，父親就能被兒子撐出高了。這是一個(gè)偏方。
清除浮動(dòng)總結(jié)
1）加高法
浮動(dòng)的元素，只能被有高度的盒子關(guān)住。 也就是說，如果盒子內(nèi)部有浮動(dòng)，這個(gè)盒子有高，那么浮動(dòng)不會(huì)互相影響。但是，工作上，我們絕對(duì)不會(huì)給所有的盒子加高度。因?yàn)槁闊?，并且不能適應(yīng)頁面的快速變化。
<div> → 設(shè)置height
<p></p>
<p></p>
<p></p>
</div>
<div> → 設(shè)置height
<p></p>
<p></p>
<p></p>
</div>
- clear:both;法
最簡(jiǎn)單的清除浮動(dòng)的方法，就是給盒子增加clear:both；表示自己的內(nèi)部元素，不受其他盒子的影響。 浮動(dòng)確實(shí)被清除了，不會(huì)互相影響了。但是存在bug就是margin失效。兩個(gè)div之間，沒有任何的間隙了。
<div>
<p></p>
<p></p>
<p></p>
</div>
<div> → clear:both;
<p></p>
<p></p>
<p></p>
</div>
3）隔墻法：
在兩部分浮動(dòng)元素中間，建一個(gè)墻。隔開兩部分浮動(dòng)，讓后面的浮動(dòng)元素，不去追前面的浮動(dòng)元素。 墻用自己的身體當(dāng)做了間隙。
<div>
<p></p>
<p></p>
<p></p>
</div>
<div class="cl h16"></div>
<div>
<p></p>
<p></p>
<p></p>
</div>
我們發(fā)現(xiàn)，隔墻法好用，但是第一個(gè)div，還是沒有高度。如果我們現(xiàn)在想讓第一個(gè)div，自動(dòng)的根據(jù)自己的兒子，撐出高度，這時(shí)候推出內(nèi)墻法。
<div>
<p></p>
<p></p>
<p></p>
<div class="cl h16"></div>
</div>
<div>
<p></p>
<p></p>
<p></p>
</div>
內(nèi)墻法的優(yōu)點(diǎn)就是，不僅僅能夠讓后部分的p不去追前部分的p了，并且能把第一個(gè)div撐出高度。這樣，這個(gè)div的背景、邊框就能夠根據(jù)p的高度來撐開了。
4）overflow:hidden;
這個(gè)屬性的本意，就是將所有溢出盒子的內(nèi)容，隱藏掉。但是，我們發(fā)現(xiàn)這個(gè)東西能夠用于浮動(dòng)的清除。
我們知道，一個(gè)父親，不能被自己浮動(dòng)的兒子撐出高度，但是，如果這個(gè)父親加上了overflow:hidden；那么這個(gè)父親就能夠被浮動(dòng)的兒子撐出高度了。這個(gè)現(xiàn)象，不能解釋，就是瀏覽器的小偏方。 并且,overflow:hidden;能夠讓margin生效。
額外補(bǔ)充
瀏覽器兼容問題
1.IE6，不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大
解決辦法:就是將盒子的字號(hào)，設(shè)置?。ㄐ∮诤凶拥母撸?，比如0px。
height: 4px;
_font-size: 0px;
我們現(xiàn)在介紹一下瀏覽器hack。hack就是“黑客”，就是使用瀏覽器提供的后門，針對(duì)某一種瀏覽器做兼容。
IE6留了一個(gè)后門，就是只要給css屬性之前，加上下劃線，這個(gè)屬性就是IE6認(rèn)識(shí)的專有屬性。
比如：_background-color: green;
2.IE6不支持用overflow:hidden;來清除浮動(dòng)的
解決辦法:_zoom:1;
完整寫法：
overflow: hidden;
_zoom:1;
實(shí)際上，_zoom:1能夠觸發(fā)瀏覽器hasLayout機(jī)制。
強(qiáng)調(diào)一點(diǎn)， overflow:hidden;的本意，就是溢出盒子的border的東西隱藏，這個(gè)功能是IE6兼容的。不兼容的是overflow:hidden;清除浮動(dòng)的時(shí)候。這兩個(gè)IE6的兼容問題，都是通過多寫一條hack來解決的。這個(gè)我們稱為伴生屬性。
//IE6，不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大
height:6px;
_font-size:0;
//IE6不支持用overflow:hidden;來清除浮動(dòng)的
overflow:hidden;
_zoom:1;
margin
1.margin的塌陷現(xiàn)象
標(biāo)準(zhǔn)文檔流中，豎直方向的margin不疊加，以較大的為準(zhǔn)
如果是在脫離標(biāo)準(zhǔn)文檔流中，豎直方向的margin疊加
2.盒子居中margin:0 auto;
注意：
1）使用margin:0 auto;的盒子，必須有width，有明確的width
2） 只有標(biāo)準(zhǔn)流的盒子，才能使用margin:0 auto;居中。 也就是說，當(dāng)一個(gè)盒子浮動(dòng)了、絕對(duì)定位了、固定定位了，都不能使用margin:0 auto;
3） margin:0 auto;是在居中盒子，不是居中文本。文本的居中，要使用text-align:center;
3.善用父親的padding,而不是兒子的margin
margin這個(gè)屬性，本質(zhì)上描述的是兄弟和兄弟之間的距離； 最好不要用這個(gè)marign表達(dá)父子之間的距離。 所以，我們一定要善于使用父親的padding，而不是兒子的margin.
4.關(guān)于margin的IE6兼容問題
IE6雙倍margin bug當(dāng)出現(xiàn)連續(xù)浮動(dòng)的元素，攜帶和浮動(dòng)方向相同的margin時(shí)，隊(duì)首的元素，會(huì)雙倍marign。
<ul>
<li></li>
<li></li>
<li></li>
</ul>
解決方案：
1）只需要將浮動(dòng)的方向和margin的方向相反。
float: left;
margin-right: 40px;
2）使用hack（沒必要，別慣著這個(gè)IE6）
單獨(dú)給隊(duì)首的元素，寫一個(gè)一半的margin
<li class="no1"></li>
ul li.no1{
_margin-left:20px;
}
