有關彌補margin top坍塌問題

2021-09-27 13:30:39 字數 737 閱讀 9265

很多剛剛學會靜態頁面布局的同學會遇到margin-top坍塌的問題,這個問題只能彌補,不能解決;

例如:以下是分別給兩個層級div加上左外邊距(margin-left),發現父元素的div根據body位置移動,子元素是根據父元素位置移動;

html片段

>

"content"

>

css片段

*

/*父元素*/

/*子元素*/

.content

執行後的畫面展示:

更改css**片段,在css中的子元素樣式中新增小於父元素的上外邊距(margin-top),子元素不會移動位置,相反的,若大於父元素的上外邊距,子元素會連帶父元素一起向下移動,這個就是父子元素在上外邊距之間的坍塌問題。

1.父元素的上外邊距大於子元素的上外邊距

/*子元素*/

2.子元素的上外邊距大於父元素的上外邊距;

/*子元素*/

.content

以上是彌補margin-top坍塌的4種方法,根據不同的情況選擇不同的彌補方法;

父元素與子元素之間的margin top問題

父元素的盒子包含乙個子元素盒子,給子元素盒子乙個垂直外邊距margin top,父元素盒子也會往下走margin top的值,而子元素和父元素的邊距則沒有發生變化。css樣式 box1 box2 bug原因 in this specification,the expression collapsin...

DataTable的orderby有關問題

在網上找了乙個在後台重新對datatable排序的方法 之所以不在資料庫是因為我生成的是報表,寫了儲存過程用的表變數,order by也要用變數,死活拼不起來,sql能力沒過關,動態sql也試了 sql的 sql將查詢的結果集一次性插入到表變數中 datatable中使用order by排序與whe...

解決子元素的浮動導致的父元素高度坍塌的問題

參考 當父元素中的子元素設定了float屬性時,可認為子元素就跳出了父元素的束縛而位於新的一層,此時父元素內部沒有元素,其高度就變為0。要解決這個問題,人為給父元素設定高度是不現實的,因為一般父元素的高度是由子元素決定的,為此我們可以從父子元素兩個角度出發,用兩種思路解決這個問題。1.子元素角度 新...