css 使用margin時易出現的錯誤

2021-08-20 06:52:38 字數 1261 閱讀 8263

前言:margin在布局的時候還是蠻常用到,不過margin還是容易產生一些問題的。

想要實現的效果:想要讓box2在box1裡面,距離box1上邊為100px; 距離左邊為100px;

實際執行的效果:

這時候發現,box2在box1裡面確實是距離左邊是100px的, 奇怪的是,box2在box1裡面距離上邊的為0px,而且box1距離body的距離為100px;了。這就是box2把margin-top值,傳遞給了父級。

解決方法①:給父級新增border邊框

解決方法②:給父級新增overflow:hidden;

這兩個方法都很好的解決了這問題。

box1跟box2的距離為220px;說明兩者間的距離為兩者maigin值的相加;這並沒有問題,而問題是出現在margin-top跟margin-bottom;

②margin-top跟maigin-bottom的問題。

執行**發現

box1跟box2的距離不是220px; 也不是100px; 最終是120px。相反反向的margin會重疊,距離的值取決於大的值。這要特別注意跟margin-left、margin-right的區別了。

行內元素可以使用margin-left跟margin-right。但是不能使用margin-top跟margin-bottom

123

123123

執行結果:

這只是行內元素有這問題,行內塊元素(inline-block)並不會這問題 。

css中margin的一些易忽略的問題

效果如下 內部.small的div設定margin top為50px後,連同外部的div會一起向下移動50px,要想保持外部div不動,可以將.small的div設定float left樣式 但是當margin top設定為百分比時就完全不一樣了 如下 效果如下 margin top本來是相對于父元...

關於使用git bash時出現vim

現在做專案,一般使用的是git來管理 但是我一般熟用的指令侷限於git clone,git add,git commit,git push,git pull。偶爾出現衝突就解決解決衝突,遇到沒出現過的問題就上網搜一搜。剛剛出現了乙個之前也出現過的問題,當我執行git commit指令時,控制台跳轉進...

使用QTimer時出現的錯誤

在使用qtimer時,我將本來放在訊號與槽連線的專有函式中的中 connect stimtimer,qtimer timeout,this,mainwindow displaytime 移到了stimtimer start 1000 的後面,這個槽函式的功能是實現乙個計時器。結果出現了第一次開啟定時...