標準文檔流
一.標準流中的微觀現(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>高矮不齊,底邊對齊
如果又有圖片且圖片參差不齊的,又有文字谊娇。則會出現(xiàn)高矮不齊,底邊對齊的情況培廓。
3>自動換行此衅，一行不滿琅坡，換行寫
二. 塊級元素和行內(nèi)元素
2.1 塊級元素
- 獨占一行
- 能設置寬高度悉患，如果不設置寬度，則默認會變?yōu)楦赣H的100%
2.2 行內(nèi)元素
- 與其他行內(nèi)元素并排
- 不能設置寬高度榆俺，默認就是文字的寬度
在HTML售躁，分為文本級、容器級茴晋。
文本級:p陪捷、span、a诺擅、b市袖、i、u烁涌、em
容器級: div苍碟、h系列、li撮执、dt微峰、dd
在CSS，與HTML很像抒钱，p是特殊蜓肆。
所有的文本級標簽颜凯，都是行內(nèi)元素，除p外症杏，p在HTML是文本級装获，但是在CSS中是個塊級元素
所有的容器級標簽都是塊級元素
三.塊級元素和行內(nèi)元素相互轉換
div{
display:inline;
background-color:red;
width:200px;
height:200px;
}
span{
display:block;
background-color:red;
width:200px;
height:200px;
}
只要設置display:就可以改變行內(nèi)或者是塊級的性質(zhì)
1）設置為inline之后，這個標簽將變?yōu)樾袠I(yè)元素厉颤，則此時的div不能設置寬高度了穴豫，但是可以與別人并排了。
2）設置為block之后逼友，這個標簽將變?yōu)閴K級元素精肃，則此時的span就能設置寬高度了，此時的span是獨占一行的帜乞，無法并排司抱，如果不設置高度，將撐滿父親黎烈。
脫離標準文檔流
標準文檔流里面的限制很多习柠，比如要實現(xiàn)既要并排，又要設置寬高照棋，此刻就要脫離標準流资溃。
CSS中有三種手段，使一個元素脫離標準文檔流：
1>浮動(注:右浮動跟左浮動是一樣的原理)
此時兩個元素并排了烈炭，且都設置了寬度和高度溶锭。（標準流中是不能這樣的既要并排，又要設置寬高的）
-
浮動元素互相貼靠
如果有足夠的空間符隙，老三會靠著老二趴捅，如果沒有足夠的空間老三就會靠著老大，如果沒有足夠的空間霹疫，那么就會去貼左墻拱绑。
Snip20161111_45.png
- 浮動元素有“自圍”效果
HTML
<div class="box1">
老大</div>
<p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈</p>
讓div浮動，p不浮動更米。div擋住了p,但是p中的字不會被擋住欺栗，形成自圍效果。
浮動清除(四種方法)
現(xiàn)在有兩個div,div沒有任何屬性征峦，li中所有元素都是浮動的
//HTML:
<div>
<ul><li>語文</li>
<li>數(shù)學</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會分成兩排，然而并不是那樣的消请，第二組中第一個去貼第一組中的最后一個li了栏笆。理由：因為div沒有高度，不能給浮動的元素一個容器臊泰。故看到的便是下面的這種狀態(tài)蛉加。
-
浮動的元素的祖先元素加高度
如果一個元素要浮動，那么其祖先元素一定要有高度，有高度的盒子针饥，才能管住浮動厂抽。只要浮動在一個有高度的盒子中，那么這個浮動就不會影響后面的浮動元素丁眼，這樣消除浮動了筷凤。
浮動的元素的祖先元素加高度 clear:both;
both指的是左右浮動都清除。
-
隔墻法
隔墻法
隔墻法最終顯示效果
內(nèi)墻法：
- overflow:hidden;
overflow:hidden：溢出隱藏苞七，所有溢出邊框的內(nèi)容藐守，都要隱藏掉。
本意就是清除溢出到盒子外面的文字蹂风。但是卻發(fā)現(xiàn)它能做偏方卢厂。
一個父親不能被自己浮動的兒子，撐出高度惠啄。但是慎恒，只要給父親加上overflow:hidden; 那么，父親就能被兒子撐出高了撵渡。這是一個偏方融柬。
清除浮動總結
1）加高法
浮動的元素，只能被有高度的盒子關住姥闭。 也就是說丹鸿，如果盒子內(nèi)部有浮動，這個盒子有高棚品，那么浮動不會互相影響靠欢。但是，工作上铜跑，我們絕對不會給所有的盒子加高度门怪。因為麻煩，并且不能適應頁面的快速變化锅纺。
<div> → 設置height
<p></p>
<p></p>
<p></p>
</div>
<div> → 設置height
<p></p>
<p></p>
<p></p>
</div>
- clear:both;法
最簡單的清除浮動的方法掷空，就是給盒子增加clear:both；表示自己的內(nèi)部元素囤锉，不受其他盒子的影響坦弟。 浮動確實被清除了，不會互相影響了官地。但是存在bug就是margin失效酿傍。兩個div之間，沒有任何的間隙了驱入。
<div>
<p></p>
<p></p>
<p></p>
</div>
<div> → clear:both;
<p></p>
<p></p>
<p></p>
</div>
3）隔墻法：
在兩部分浮動元素中間赤炒，建一個墻血久。隔開兩部分浮動捷绒，讓后面的浮動元素塔逃，不去追前面的浮動元素传泊。 墻用自己的身體當做了間隙。
<div>
<p></p>
<p></p>
<p></p>
</div>
<div class="cl h16"></div>
<div>
<p></p>
<p></p>
<p></p>
</div>
我們發(fā)現(xiàn)遵岩，隔墻法好用你辣，但是第一個div，還是沒有高度旷余。如果我們現(xiàn)在想讓第一個div绢记，自動的根據(jù)自己的兒子，撐出高度正卧，這時候推出內(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)點就是，不僅僅能夠讓后部分的p不去追前部分的p了炉旷，并且能把第一個div撐出高度签孔。這樣，這個div的背景窘行、邊框就能夠根據(jù)p的高度來撐開了饥追。
4）overflow:hidden;
這個屬性的本意，就是將所有溢出盒子的內(nèi)容罐盔，隱藏掉但绕。但是，我們發(fā)現(xiàn)這個東西能夠用于浮動的清除惶看。
我們知道捏顺，一個父親，不能被自己浮動的兒子撐出高度纬黎，但是幅骄，如果這個父親加上了overflow:hidden；那么這個父親就能夠被浮動的兒子撐出高度了本今。這個現(xiàn)象拆座，不能解釋，就是瀏覽器的小偏方冠息。 并且,overflow:hidden;能夠讓margin生效挪凑。
額外補充
瀏覽器兼容問題
1.IE6，不支持小于12px的盒子逛艰，任何小于12px的盒子岖赋，在IE6中看都大
解決辦法:就是將盒子的字號，設置形退铩（小于盒子的高）唐断，比如0px脸甘。
height: 4px;
_font-size: 0px;
我們現(xiàn)在介紹一下瀏覽器hack。hack就是“黑客”铆遭，就是使用瀏覽器提供的后門啼肩，針對某一種瀏覽器做兼容。
IE6留了一個后門祈坠，就是只要給css屬性之前害碾，加上下劃線，這個屬性就是IE6認識的專有屬性赦拘。
比如：_background-color: green;
2.IE6不支持用overflow:hidden;來清除浮動的
解決辦法:_zoom:1;
完整寫法：
overflow: hidden;
_zoom:1;
實際上慌随，_zoom:1能夠觸發(fā)瀏覽器hasLayout機制躺同。
強調(diào)一點笋籽， overflow:hidden;的本意，就是溢出盒子的border的東西隱藏车海，這個功能是IE6兼容的。不兼容的是overflow:hidden;清除浮動的時候逆甜。這兩個IE6的兼容問題集嵌，都是通過多寫一條hack來解決的欺税。這個我們稱為伴生屬性燥筷。
//IE6袍祖，不支持小于12px的盒子，任何小于12px的盒子谢揪，在IE6中看都大
height:6px;
_font-size:0;
//IE6不支持用overflow:hidden;來清除浮動的
overflow:hidden;
_zoom:1;
margin
1.margin的塌陷現(xiàn)象
標準文檔流中蕉陋，豎直方向的margin不疊加，以較大的為準
如果是在脫離標準文檔流中凳鬓，豎直方向的margin疊加
2.盒子居中margin:0 auto;
注意：
1）使用margin:0 auto;的盒子，必須有width患民，有明確的width
2） 只有標準流的盒子缩举，才能使用margin:0 auto;居中。 也就是說，當一個盒子浮動了仅孩、絕對定位了托猩、固定定位了，都不能使用margin:0 auto;
3） margin:0 auto;是在居中盒子杠氢，不是居中文本站刑。文本的居中，要使用text-align:center;
3.善用父親的padding,而不是兒子的margin
margin這個屬性鼻百，本質(zhì)上描述的是兄弟和兄弟之間的距離； 最好不要用這個marign表達父子之間的距離摆尝。 所以温艇，我們一定要善于使用父親的padding，而不是兒子的margin.
4.關于margin的IE6兼容問題
IE6雙倍margin bug當出現(xiàn)連續(xù)浮動的元素堕汞，攜帶和浮動方向相同的margin時勺爱，隊首的元素，會雙倍marign讯检。
<ul>
<li></li>
<li></li>
<li></li>
</ul>
解決方案：
1）只需要將浮動的方向和margin的方向相反琐鲁。
float: left;
margin-right: 40px;
2）使用hack（沒必要，別慣著這個IE6）
單獨給隊首的元素人灼，寫一個一半的margin
<li class="no1"></li>
ul li.no1{
_margin-left:20px;
}
