margin塌陷及解決方法

*

margin-left: 100px;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: black;
}.content

左右方向：

當我們在對子標籤移動時，加入如（margin-left/right: 20px;  ）， 可以左右移動，

上下方向：

但當子類content中的margin-top: 小於或等於父類的margin-top: 時，則不會發生移動，

當子類content中的margin-top: 大於於父類的margin-top: 時，則子類和父類一起發生移動，兩者之間的相對位置不變。

四種方法：

在樣式中加入一下任意一種即可，解決，但各有弊端，根據需要取最適合的。

1.position: absolute;

2.  float: left/right;

3.overflow: hidden;

4.display: inline-block;

如在父類中加入：position: absolute;

*

position: absolute;
margin-left: 100px;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: black;
}.content

高度塌陷及解決方法

一 什麼是高度塌陷 在文件流中，當父元素沒有設定高度的時候，父元素的高度就取決於子元素的高度，也就是常常說的 由子元素撐開 當子元素設定為浮動，脫離了文件流，這時候就會造成父元素的高度塌陷，因為沒有子元素 撐著它的高度 這樣會導致父元素後面的元素往上移，造成布局混亂。二 解決此問題的方法 1.在後面...

margin塌陷 margin合併的解決

父子巢狀元素垂直方向的 margin，父子元素是結合在一起的，他們兩個會取其中最大的值 正常情況應該是父級相對於瀏覽器進行定位，子級應該相對於父級定位的 但是 margin 塌陷是在父級相對於瀏覽器進行定位時，子級沒有相對於父級定位，就像父級的棚子沒有了一樣子級相對於父級，就像塌陷了一樣 a.給父元...

高度塌陷解決方法

如果父元素只包含浮動元素，且父元素未設定高度和寬度，那麼它的高度就會塌縮為零，也就是所謂的 高度塌陷 如果父級元素包含背景或者邊框，那麼溢位的元素就不像父級元素的一部分了。解決 高度塌陷 問題的方法 1.浮動父級元素，父級元素的高度就會擴大，直到完全包含它裡面的浮動元素。如果使用這種方法，一定要在該...