示例:
用 inline-block 做,會出現2個問題:
空格.和基線問題
今後, 我們使用 浮動 來實現橫排顯示
來個案例:
添加浮動後:
現在,使用float 主要是爲了 使 塊元素 橫排顯示.
沒有了inline-block 產生的毛病
浮動的原理
右浮動:
如果對前面的<p> 也來一個浮動,則會四個盒子都會橫排顯示
大盒子內部的細小盒子, 也用的是左浮動:
單給一個盒子 加浮動,肯定是錯誤的. 後面的內容會被遮蓋.
第三個子元素盒子大了,或者,父元素的寬度不夠,則 子元素會掉下來,如上圖.
特別是當你的子元素,設置了padding border 後 把本身稱大了 .因此,我們就增加父級的數據,或者減小子級的數據以使可以容下所以的子元素
如果在浮動到時候,子元素被卡住了, 有可能是被上面的溢出的東西卡住了.
以上的2個圖是卡住的示例.
三個子元素都漂浮了,導致父級盒子沒有了子元素撐着,所以,高度就成0了.高度塌陷.
就像老師所說 的, 成了空巢老人.
高度塌陷 是個大問題,會頁面混亂.
如何解決
直接給上父級的高度. (粗暴有效,但不是最好的)
\
第二種方法 讓父級 虛擬框.
定位
絕對定位.
不會爲了 消除浮動對父元素的高度的影響而使用一個絕對定位的.
但是, 父級恰好是 絕對定位,則更好了. 不是我們主動添加的
clear 清除浮動的樣式
清除右浮動
如果,不管是左還是右,則使用clear: both
僞元素
僞元素的寬高 : 0*0
如果 裏面有很多 都需要清除浮動.
使用 clearfix
zoom
低版本的 IE 加一個 zoom
圓角屬性
用於做四角比較圓潤的盒子
兩個值是對角線的關係
這個屬性共有八個值. 平時,使用中, 多用 百分比. 或者 具體的像素值.
作業
'
隨堂筆記,僅供複習使用.