盒模型 高階

2022-07-08 01:12:11 字數 1997 閱讀 7291

border:0  和 border:none  的區別主要體現在兩點:效能差異 和 相容差異

效能差異

border:0 :是需要佔記憶體的,(因為渲染後,實際上是乙個畫素為 0的border)

border:none 是不需要佔記憶體的 (瀏覽器在解析 border:none的時候,並不會做出渲染)

相容差異

只存在於ie6 ie7的和 標籤中,其他瀏覽器不存在相容

border:0       在所有的瀏覽器中效果都一樣,都是把邊框隱藏掉(不是去掉),

border:none 對ie6  ie7 按鈕的邊框無效,其他瀏覽器則會去掉按鈕的邊框  ,現在ie6 7 差不多逐漸拋棄。無需糾結用哪個

實際中border:0  和 border:none 都差不多,兩者效能方面對頁面渲染速度的差別不是很大 

內邊距: padding

padding  復值

一般通過外邊距 把元素的內容區隔開,也可用padding 這樣可以在段落之間 插入間隔邊框  兩個邊框相接後 得到一條實線

p

元素內部預設是沒有內邊距的 ,如段落之間  一般只用外邊距實現,如果沒有內邊距 元素的邊框會緊貼內容,所以如果為元素新增了邊框,最好加一些內邊距

乙個值 值將應用到四條邊上

如需設定不同的內邊距值,可以提供四個值,順序分別是順時針 上右下左

為元素新增內邊距,  元素的背景會預設延伸到內邊距區域,如果背景透明相當於在元素的內容四周新增一些空白,總之只有背景可見,就會延伸到內邊距區域

可以用background-clip屬性 禁止可見背景延伸到內邊距區域

h2

單邊內邊距 可以單獨為元素的某一邊設定內邊距值,且四個邊都可以單獨設定,

padding-top

padding-right

padding-bottom

padding-left

例:只想把h2元素的左內邊距設定為3em  ,

padding:0 0 0 3em; /*

這個寫法太麻煩

*/等價於

padding-left:3em;

h2

padding 的百分比數值

是相對于父元素內容區的寬度計算,無論什麼原因,父元素的寬度 變了,內邊距也會變,,,,這一點不僅針對左右內邊距,也針對上下內邊距

之所以是相對父元素內容區的高度計算上下內邊距的百分比數值,,因為父元素的寬度不隨後代元素的寬度影響

百分比數值 也可以與長度值混用,

上下內邊距設為0.5em

兩側的內邊距設為父元素寬度的10%

h2

內聯元素 inline 水平元素的padding 百分比值

1,同樣相對於寬度計算

2,預設的高度 和 寬度 細節有差異

3,padding會斷行

空的inline 元素 + padding寬高也不等

設定font-size:0     高度會發生變化

為什麼會有額外的高度

inline元素的垂直padding  ,會讓 "幽靈空白節點"  顯現  ,也就是規範中的 「」strut「出現

幽靈空白節點 本質上 是內聯元素文字的  只受font-size的影響   可以設定font-size:0 解決

垂直方向 的百分比是相對寬度計算的,可以秦松實現正方形  ,所以永遠是個正方形  padding:50%;

行內元素的內邊距:

置換元素的內邊距:

商會狀況

標準盒模型 怪異盒模型 彈性盒模型

box sizing content box 標準盒模型 標準盒模型總寬度 border2 padding2 content box sizing border box 怪異模式 怪異盒模型的總寬度 width margin 左右 width已經包含了padding和border值 flex dir...

css盒模型 標準盒模型 怪異盒模型

css 盒子模型 box model 每個html元素都可以看作是乙個盒子,父元素和子元素的關係就行大盒子裡放了個小盒子,兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...

Python ccs高階選擇器 盒模型

css高階選擇器與盒模型 脫離文件流 其中就是產生了bfc 1.組合選擇器 群組選擇器 每個選擇器位可以位三種基礎選擇器的任意乙個,用逗號隔開,控制多個 div,div,div 後代 子代 選擇器 sup sub sup sub 兄弟 相鄰 選擇器 up down up down 交集選擇器 sec...