負外邊距margin對浮動元素的影響
關於負外邊距的更多用法可以參閱css的負margin外邊距功能簡單介紹一章節。
下面就介紹一下負外邊距對浮動元素的影響,需要的朋友可以做一下參考。
負外邊距對浮動元素的影響和對於普通文件流元素的影響類似。
我們可以認為浮動元素在浮動流中,只不過這個流的方向可以向左也可以向右。
下面就通過程式碼例項演示一下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>無標題文件</title> <style type="text/css"> div{ width:100px; height:100px; float:left; margin-right:-50px; } .a{background:red} .b{background:blue} .c{background:green} </style> </head> <body> <div class="a"></div> <div class="b"></div> <div class="c"></div> </body> </html>
上面的程式碼設定每一個元素的margin-right為-50px,那麼元素的在浮動文件流中就會回退50px,所以就會出現右邊的元素會覆蓋前面元素的情況。再來看一段程式碼例項:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>無標題文件</title> <style type="text/css"> *{ margin:0px; padding:0px; } div{ width:100px; height:100px; float:left; margin-left:-40px; } .a{background:red} .b{background:blue} .c{background:green} </style> </head> <body> <div class="a"></div> <div class="b"></div> <div class="c"></div> </body> </html>
在上面的程式碼中,外邊距的方向改成了反方向,浮動流的回退也是同樣的道理。
相關文章
- CSS margin負外邊距CSS
- CSS margin 外邊距CSS
- CSS margin外邊距CSS
- margin為負值對佈局的影響
- CSS 負外邊距CSS
- scss自動生成margin padding邊距CSSpadding
- 浮動的盒子對img的影響
- 浮動定位(BFC、邊距合併)
- 外邊距與絕對定位
- 用padding和margin撐起左右邊距padding
- 什麼是浮動?浮動帶來的影響?怎麼清除浮動?
- CSS 外邊距合併CSS
- CSS 右外邊距失效CSS
- html 子元素div影響父元素高度HTML
- css浮動產生的負作用CSS
- margin屬性的負值 在inline-block元素下是如何表現的?inlineBloC
- 對一個元素設定浮動後,它的特徵是什麼?特徵
- 主動寫入流對@ResponseBody註解的影響
- JavaScript設定元素float浮動JavaScript
- 浮動流元素排列規則
- padding會影響到元素的大小,那不想讓它影響到元素的寬度應該怎麼辦?padding
- 12.9學習日報(盒子模型和各類注意事項、margin垂直外邊距合併、頂部塌陷問題)模型
- 如何使用BFC清除CSS浮動以及解決margin合併的問題CSS
- 側邊浮動網站客服QQ網站
- 行內元素的padding和margin屬性padding
- 行內元素的padding和margin是否有效padding
- Xbox負責人:疫情對產業的影響或要到2021年才能體現產業
- 淺談邊緣計算對企業安全建設的影響及趨勢
- RF傳輸距離是如何影響無線通訊的?
- 解決子元素浮動,父元素沒有撐開的問題
- CSS 盒子的邊距塌陷CSS
- unusable index對DML/QUERY的影響Index
- Nologging對恢復的影響(二)
- 語言對思維的影響
- Nologging對恢復的影響(一)
- 左右邊距可控
- CSS浮動元素特點有什麼CSS
- JavaScript 元素距離視窗頂部的距離JavaScript
- 網線的分類與對網速的影響 網線對網速影響大嗎?