html5 網頁開發 css爬坑小技巧速查

問題列表：

1. div內img標籤和文字不對齊
2. div內兩個display爲inline-block的div出現錯位
3. div內兩個display爲inline-block的div有間隙
4. div內兩個display爲inline-block的div大小控制

1.div內img標籤和文字不對齊

在寫前端代碼時發現在div中插入img標籤後，div中的文字會對齊img圖片的底端，就算設置了line-height也沒有用
html結構如下：

<div>
	<img src="media/girl.png" alt="頭像">
	&nbsp;&nbsp;張三
</div>

結果如下：

解決方案：
div中的img設置css vertical-align:middle即可解決。

2.並排display:inline-block的div錯位

html結構如下：

<div class="parent">
	<div class="left">Left塊</div>
	<div class="right">Right塊</div>
</div>

出現情景：
兩邊的寬度都設定，右邊right塊只顯示一行，即設置了overflow:hidden,出現錯位：

解決方案：
父div設置css：vertical-align:middle

3.div內兩個display爲inline-block的div有間隙

出現情景見 div內兩個display爲inline-block的div出現錯位 可以發現左右兩個塊之間是有間隙的。
解決方案：
設置parent父div的cssfont-size:0後(發現文字消失),再設置子div的cssfont-size:15px間隙消失

4.div內兩個display爲inline-block的div大小控制

當並排連個div時要固定一個div寬度，另一個自適應。條件如 div內兩個display爲inline-block的div出現錯位時，左側left要固定寬度，右側right自適應大小，這時，left依舊按平常設置csswidth:100px
right解決方案：
設置csswidth:calc(100% - 100px)