内外边距、浮动、布局相关
關于清除元素的內外邊距：
1、行內元素只有左右邊距、沒有內外邊距、內邊距在ie6等低版本的瀏覽器中也會有問題。盡量不要給元素指定行內的內外邊距；
2、外邊距的合并
使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合并；
?
相鄰塊元素垂直外邊距的合并：
當相鄰兩個塊元素相遇時，如果上面的元素有下邊距margin-bottom，下面的元素有上外邊距margin-top,則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現象稱之為相鄰元素垂直外邊距的合并，又稱之為外邊距的塌陷。
嵌套塊元素垂直外邊距的合并：
對于兩個嵌套關系的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合并，合并后的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發生合并。
?
解決方案
可以為父元素定義1px的上邊框和上內邊距
可以為父元素添加overflow：hidden；
? ? ? ? ? ? ? ? ? ??
?
?關于padding不會撐開盒子的情況
注意tips：
1、寬度屬性width和高度屬性height僅僅適用于塊級元素，對行內元素無效（img標簽和input例外）；
一點妙用【 如果已經給行內元素添加了浮動，此時不需要轉換這個元素也可以有寬高！】
2、計算盒子模型的總高度時還應該考慮上下兩個盒子垂直外邊距合并的情況；
3、如果一個盒子沒有給定寬度/高度或者繼承父親的寬度/高度，則padding不會影響本盒子的大小；
?
設定兩個盒子
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>padding盒子不會撐開的情況</title> </head><style>.father {height: 200px;background-color: pink;width: 200px;/* 因為父盒子有寬度給定值了，所以盒子被撐開； */}.son {padding-left: 30px;/* 兒子沒有給寬度，用的是默認，所以不會被撐開； */}}</style> <body><div class="father"><div class="son">123</div> </div> </body> </html>?
關于盒子陰影
? 前兩個屬性必須寫
例：
? ??? ? ? ? ? ? ? ?? ? ? ?注：參照于小米盒子
?
?關于浮動
css的定位機制有三種：普通流（標準流）[普通流就是一個網頁內標簽元素正常從上到下、從左到右排列順序的意思，即普通流布局 ] 、浮動、定位
tips：
關于用? ? display：inline-block用于布局 會產生間隙的問題。
?
關于浮動移動的內幕特性
浮動脫離標準流、不占位置、會影響標準流。浮動只有左右浮動。
浮動首先創建包含塊的概念，也就是說? 浮動元素總是找理他最近的父元素對齊，但是不會超過內邊距的范圍。
?
浮動元素排列位置，跟上一個元素（塊級）有關系。如果上一個元素有浮動，則A元素會和上一個元素的頂部對齊；
如果上一個元素是標準流，則A元素的頂部會和上一個元素的底部對齊
?
?
一點妙用【 如果已經給行內元素添加了浮動，此時不需要轉換這個元素也可以有寬高！】
夫盒子里面的子盒子，如果某一個子盒子有浮動，其余子盒子都需要浮動，這樣才能行對齊顯示！
浮動的目的就是為了讓塊級元素在同一行顯示；
?
?三種布局
?
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的内外边距、浮动、布局相关的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： React Antd中样式的修改
- 下一篇： js的栈与堆