CSS盒模型与边距重叠

html-css023

CSS盒模型与边距重叠,第1张

标准模型:box-sizing: content-box

IE 模型:box-sizing: border-box

什么是边距重叠呢?

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。

在这里父元素的高度不是 110px,而是 100px,在这里发生了高度坍塌。

原因是如果块元素的 margin-top 与它的第一个子元素的 margin-top 之间没有 border、padding、inline content、 clearance 来分隔,或者块元素的 margin-bottom 与它的最后一个子元素的 margin-bottom 之间没有 border、padding、inline content、height、min-height、 max-height 分隔,那么外边距会塌陷。子元素多余的外边距会被父元素的外边距截断。

可以看到 1 和 2,2 和 3 之间的间距不是 50px,发生了边距重叠是取了它们之间的最大值 30px。

假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并

解决上述问题的其中一个办法就是创建 BFC。BFC 的全称为 Block Formatting Context ,即块级格式化上下文。

父子元素的边界重叠得解决方案: 在父元素上加上 overflow:hidden使其成为 BFC。

兄弟元素的边界重叠,在第二个子元素创建一个 BFC 上下文:

父元素#float 的高度为 0,解决方案为为父元素#float 创建 BFC,这样浮动子元素的高度也会参与到父元素的高度计算:

在这里设置右边的高度高于左边,可以看到右边超出的部分跑到左边去了,这是由于由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样导致的。

解决方案为给右侧元素创建一个 BFC,原理是 BFC 不会与 float 元素发生重叠。

如果大盒子套小盒子,可以这样:

<div style="position:relativewidth:400pxheight:300pxbackground-color:yellow">

<div style="position:absolutebottom:0left:50pxwidth:300pxheight:150pxbackground-color:red"></div>

</div>

如果两个盒子是独立的,则可以这样:

<div style="width:400pxheight:300pxbackground-color:yellow"></div>

<div style="position:relativetop:-150pxleft:50pxwidth:300pxheight:150pxbackground-color:red">2</div>

其实有N多种方式实现,上述只是其中的一两种

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>test</title>

<style type="text/css">

#father{

position:relative/*父盒子位置要用relative*/

margin:20px auto

width:400px

height:100px

border:1px solid red

}

#father #a{

position:absolute/*子盒子位置要用absolute*/

width:100%

height:50px

background:blue

opacity:0.6

z-index:2

}

#father #b{

position:absolute/*子盒子位置要用absolute*/

width:100%

height:80px

background:#F4AF19

text-align:right

z-index:1

}

</style>

</head>

<body>

<!--按上面的CSS定位方法布局就会重叠,那个子盒子在前面用Z-INDEX 决定-->

<div id="father">

<div id="a">我是A盒子</div>

    <div id="b">我是B盒子</div>

</div>

</body>

</html>