CSS基礎
行內元素和塊級元素的區別：
行內元素：
- 與其他行內元素並排；
- 不能設置寬、高。默認的寬度，就是文字的寬度。
塊級元素：
- 霸佔一行，不能與其他任何元素並列；
- 能接受寬、高。如果不設置寬度，那麼寬度將默認變爲父親的100%。
行內元素和塊級元素的分類：
在以前的HTML知識中，我們已經將標籤分過類，當時分爲了：文本級、容器級。
從HTML的角度來講，標籤分爲：
- 文本級標籤：p、span、a、b、i、u、em。
- 容器級標籤：div、h系列、li、dt、dd。
行內元素和塊級元素的相互轉換
我們可以通過display屬性將塊級元素和行內元素進行相互轉換。display即“顯示模式”。
塊級元素可以轉換爲行內元素：
一旦，給一個塊級元素（比如div）設置：
display: inline;
那麼，這個標籤將立即變爲行內元素，此時它和一個span無異。inline就是“行內”。也就是說：
- 此時這個div不能設置寬度、高度；
- 此時這個div可以和別人並排了。
行內元素轉換爲塊級元素：
同樣的道理，一旦給一個行內元素（比如span）設置：
display: block;
那麼，這個標籤將立即變爲塊級元素，此時它和一個div無異。block”是“塊”的意思。也就是說：
- 此時這個span能夠設置寬度、高度
- 此時這個span必須霸佔一行了，別人無法和他並排
- 如果不設置寬度，將撐滿父親
css中一共有三種手段，使一個元素脫離標準文檔流：
- （1）浮動
- （2）絕對定位
- （3）固定定位
這便引出我們今天要講的內容：浮動。
性質1：浮動的元素脫標
性質2：浮動的元素互相貼靠
性質3：浮動的元素有“字圍”效果
總結：標準流中的文字不會被浮動的盒子遮擋住。（文字就像水一樣）
浮動的清除
1.加高法
給浮動元素的祖先元素設置高度，如果一個元素要浮動，那麼它的祖先元素一定要有高度。有高度的盒子，才能關住浮動。（記住這句過來人的經驗之語）。此方法不能適應頁面的快速變化。
2.clear:both;
clear就是清除，both指的是左浮動、右浮動都要清除。clear:both的意思就是：不允許左側和右側有浮動對象。這種方法有一個非常大的、致命的問題，它所在的標籤，margin屬性失效了，導致兩個div之間，沒有任何的間隙了
3.隔牆法
外牆：在這兩個div中間用一個新的div隔開，然後給這個新的div設置clear: both;屬性；同時，既然這個新的div無法設置margin屬性，我們可以給它設置height，以達到margin的效果
內牆：內牆法可以給它所在的div撐出寬度,讓div的高度可以自適應內容。
<!--CSS 浮動 隔牆法-->
<div class="box1">
<p></p>
<p></p>
</div>
<!-- 爲了防止兩個div貼靠，我們可以在這兩個div中間用一個新的div隔開，然後給這個新的div設置clear: both;屬性；
同時，既然這個新的div無法設置margin屬性，我們可以給它設置height，以達到margin的效果這便是隔牆法 -->
<div style="clear: both; height: 10px;"></div>
<div class="box1">
<p></p>
<p></p>
</div>
<!--CSS 浮動 內牆法-->
<div class="box1">
<p></p>
<p></p>
<!-- 內牆法可以給它所在的div撐出寬度。即：box1的高度可以自適應內容 -->
<div style="clear: both; "></div>
</div>
<div class="box1">
<p></p>
<p></p>
</div>
4.overflow:hidden;
這個屬性的本意，就是將所有溢出盒子的內容，隱藏掉。但是，我們發現這個東西能夠用於浮動的清除。 我們知道，一個父親，不能被自己浮動的兒子撐出高度，但是，如果這個父親加上了overflow:hidden；那麼這個父親就能夠被浮動的兒子撐出高度了。這個現象，不能解釋，就是瀏覽器的偏方。 並且,overflow:hidden;能夠讓margin生效
margin相關
margin塌陷/margin重疊
標準文檔流中，豎直方向的margin不疊加，取較大的值**作爲margin(水平方向的margin是可以疊加的，即水平方向沒有塌陷現象)
盒子居中margin:0 auto;
善於使用父親的padding，而不是兒子的margin