css盒模型中子元素垂直方向上总高度与父元素height的关系
我們都知道，css和模型中，子元素水平方向的7屬性(margin-left, border-left, padding-left, width, padding-right, border-right, margin-right)之和要等于父元素的width，那么垂直方向上的情況又怎么樣呢？即子元素的margin-top， border-top，padding-top， height，padding-bottom，border-bottom，margin-bottom之和與父元素的height關系是什么。
下面我們先討論marg-top和margin-bottom，然后討論padding-top和padding-bottom
首先看如下代碼以及運行結果:
<html><head><title>MarginBottom</title></head><body><div style = "background: gray; width: 100px;height: 100px;border: 2px solid green;"><div style = "background: red;margin:20px 0 200px;">A</div><div style = "background: black;color: white">C</div></div><div style = "background: blue; width: 100px; height: 100px;"></div></body> </html>運行結果(在火狐中):
灰色div框的高度設置為height = 100px(設置綠色邊框是為了防止和紅色div框的上邊距折疊)，而它的第一個子div框(紅色)的上邊距為20px，下邊距為200px，即使不算紅色div框的內容的高度(即其height值),這兩項之和(即紅色div框的margin-top + margin-botttom)為220px，大于其父div(灰色)的height值，因此灰色div框的第二個子div框(黑色)被推了出來。但是我們發現，紅色div框里面的文本依然能夠正常顯示，并且有背景色，說明紅色div存在高度。而且，這些對藍色div框(灰色div框的兄弟節點)的顯示沒有影響。
這種情況在IE9里面有所不同，下面是在IE9里面的運行情況:
可以看到，情況和在火狐里面不同，父div框(灰色)擴展了自己的高度。
下面再來看padding-top和padding-bottom，代碼和運行結果如下:
<html><head><title>MarginBottom</title></head><body><div style = "background: gray; width: 100px;height: 100px;border: 2px solid green;"><div style = "background: red;padding:20px 0 200px;">A</div><div style = "background: black;color: white">C</div></div><div style = "background: blue; width: 100px; height: 100px;"></div></body> </html>運行結果(火狐中):
從結果可以看到，紅色div框的padding-top(20px)與padding-bottom(200px)之和大于父div框的height(100px)值,但是紅色div框仍然有一定的高度，能夠正常顯示文本。情形和上面的margin-top，margin-bottom差不多，不同的是背景色從灰色div框里面延伸了出來，并且延伸出來的背景色位于藍色div框的下方。而且不影響藍色div框。
在IE9里面，父元素依然擴展自己的高度，運行結果如下:
總結
從上面的結果中可以看出，子元素垂直方向上的7屬性和父元素的height之間沒有像水平7屬性與父元素的width之間的關系，即子元素垂直方向上的7屬性之和并不一定要等于父元素的height值。由于沒有了這種約束，這7個屬性之間互不影響，比如父元素的height為200px，子元素(沒有padding，border)的margin-top為20px，margin-bttom為50px，子元素的height并不非得為130px(不考慮邊距折疊)，你可以設置為任意值，依然可以按照指定的值顯示。
轉載于:https://www.cnblogs.com/chaoguo1234/archive/2013/03/03/2941152.html
總結
以上是生活随笔為你收集整理的css盒模型中子元素垂直方向上总高度与父元素height的关系的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ExtJS学习：MVC模式案例（三）
- 下一篇： Synergy 一套键鼠同时控制多台电脑