邊距沖突
當(dāng)top margin碰到 bottom margin嗅绰, 瀏覽器會取較大的那個值
解決方案:
- 使用top padding
- 加一條border
水平邊距不會和浮動元素之間的邊距發(fā)生這樣的折疊润文,絕對定位和相對定位的元素也不會發(fā)生折疊
行內(nèi)盒子 和 塊級盒子
top/bottom padding/margin對行內(nèi)盒子無效
- img標(biāo)簽例外(雖然它也是行內(nèi)元素)樱溉,但padding和margin會使它變高
- 浮動的行內(nèi)元素會被當(dāng)作塊級元素處理
畫圓
border-radius: 20%;
border-radius: 20px/40px;
清除浮動
clear屬性接受以下選項:
- left. 樣式將落至左浮動元素的下方, 但是仍將環(huán)繞右浮動的對象
- right植影。強迫樣式落至右浮動對象的下方坡椒,但是仍將環(huán)繞左浮動的對象
- both吁脱。 強迫樣式落至左浮動和右浮動的元素下方
- none。完全關(guān)閉清除屬性即硼,換句話說它會讓項目包圍左浮動和右浮動的對象逃片,這也是web瀏覽器的默認(rèn)方式