您的位置：首页 > 其它

关于边界堆叠的概念及理解

2015-06-06 10:18 337 查看

边界叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，当两个垂直边界相遇时，它们将形成一个边界。这个边界的高度等于两个发生叠加的边界的高度中的较大者。

懒得抄了，记下网址。

关于该问题的一些讨论，知乎：如何解决外边距叠加的问题？百度搜的的一个博客：[b]CSS的margin边界叠加深度剖析 collapsing-margin的W3C官方介绍：http://www.w3.org/TR/CSS2/box.html#collapsing-margins[/b]

[b]我自己也写了一个页面，来研究这个问题[/b]

[b]margin_test.html[/b]

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>margin-test</title>
<style>
.margin{
width: 580px;
margin-right: 10px;
overflow: hidden;
text-align: justify;
text-justify: inter-ideograph;
clear: both;
font-size: 14px;
line-height: 24px;
padding-bottom: 20px;
word-wrap: break-word;
}
.margin p{
font-size: 14px;
text-indent: 2em;
margin: 26px 0;
}
.margin-fl-h{
width: 580px;
margin-right: 10px;
overflow: hidden;
text-align: justify;
text-justify: inter-ideograph;
clear: both;
font-size: 14px;
line-height: 24px;
padding-bottom: 20px;
word-wrap: break-word;
}
.margin-fl-h p{
font-size: 14px;
text-indent: 2em;
margin: 0 26px;
width: 100px;
height: auto;
float: left;
}
.margin-fl-v{
width: 580px;
margin-right: 10px;
overflow: hidden;
text-align: justify;
text-justify: inter-ideograph;
clear: both;
font-size: 14px;
line-height: 24px;
padding-bottom: 20px;
word-wrap: break-word;
}
.margin-fl-v p{
font-size: 14px;
text-indent: 2em;
margin: 26px 0;
width: 580px;
height: auto;
float: left;
}
.margin-h{
width: 580px;
margin-right: 10px;
/*overflow: hidden;*/
/*text-align: justify;*/
/*text-justify: inter-ideograph;*/
/*clear: both;*/
font-size: 14px;
/*line-height: 24px;*/
padding-bottom: 20px;
/*word-wrap: break-word;*/
}
.margin-h p{
font-size: 14px;
text-indent: 2em;
margin: 26px 0;
}
.margin-h2{
width: 1300px;
margin-right: 10px;
overflow: hidden;
text-align: justify;
text-justify: inter-ideograph;
clear: both;
font-size: 14px;
line-height: 24px;
padding-bottom: 20px;
word-wrap: break-word;
}
.margin-h2 span{
font-size: 14px;
text-indent: 2em;
margin: 26px 26px;
}
.margin-div{
width: 1300px;
margin-right: 10px;
overflow: hidden;
text-align: justify;
text-justify: inter-ideograph;
clear: both;
font-size: 14px;
line-height: 24px;
padding-bottom: 20px;
word-wrap: break-word;
}
.margin-div div{
font-size: 14px;
text-indent: 2em;
margin: 26px 0;
}
.margin-result{
width: 1300px;
margin-right: 10px;
overflow: hidden;
text-align: justify;
text-justify: inter-ideograph;
clear: both;
font-size: 14px;
line-height: 24px;
padding-bottom: 20px;
word-wrap: break-word;
}
.margin-result div{
font-size: 14px;
text-indent: 2em;
margin: 50px 10px 100px 20px;
}

</style>
</head>
<body>
<div class="margin">
<p>关于margin的测试，网易新闻阅读界面，div中包含若干个p标签，每个p标签都是margin:26px 0;但是上下两个p标签的间距是27px，而不是27*2px</p>
<p>这是为什么呢，我们来研究一下</p>
<p>通过测试可见，margin边距是按照border开始算的，而不是按照外边距的位置开始算</p>
</div>
<div class="margin-fl-h">
<p>我们再来测试一下横向边距</p>
<p>看看在宽度一定的情况下，横向设置的边距是不是同样以border开始算而忽略margin。</p>
<P>结果显而易见，I’m wrong！</P>
</div>
<div class="margin-fl-v">
<p>初步看出好像横向设置的边距起作用了</p>
<p>那么这是不是float:left的作用，咱么来测试一下垂直情况下，margin的表现</p>
<p>好了，现在可以断定，在添加了float:left的情况下，margin不会忽视其他盒子模型的margin，无论是水平还是垂直</p>
<p>但是在不添加float的情况下，盒子模型默认垂直排列，好像是不考虑其他盒子模型的margin</p>
</div>
<div class="margin-h">
<p>我们先考虑是不是div中的某些属性导致了p标签排版不考虑margin</p>
<p>我们删掉一下div的属性，看看结果</p>
<p>有办法在不添加float：left的情况下，让p标签横向排列吗？暂时想不到</p>
<p>那只有换成行内元素span看看了，请看下面</p>
</div>
<div class="margin-h2">
<span>如果把p标签换成span呢，span是行内元素，不存在margin属性</span>
<span>我们来试一下，不过好像左右的margin和padding可以起作用，结果很遗憾，margin在被考虑在内了</span>
</div>
<div class="margin-div">
<div>换成div看看</div>
<div>不添加float属性</div>
</div>
<div class="margin-result" >
<div>最后得到这样的结论，任何情况下，元素的margin都是要考虑别的元素的margin属性的，</div>
<div>但是如果是不添加任何float属性的情况下，靠块状元素自己垂直排列，块状元素的某个外边距是不被考虑的</div>
<div>我们弄一个特殊的边距来试一试</div>
<div>结论得出</div>
<div>在块状元素自行换行的特效下，他是不考虑被换行的元素的上外边距的</div>
<div style="margin: 200px 10px 120px 20px">我么来整个特殊的大的上margin来试试，可以看出改行上下边距都是以它自己的为准的</div>
<div>卧槽，看来结论错误了</div>
<div>正确答案是，两个都被考虑了，以对方的border位置开始算的这个定律没有被打破，但是谁的大，就按谁的来，只考虑大的，小的被忽略了</div>
<div style="padding: 10px 20px 30px 40px">如果加上padding呢,可以看出确实是以border为准的</div>
</div>
找到一个参考文档，这玩意叫边间堆叠。<a href="http://www.webshu.net/jiaocheng/web/CSS/200804/7732.html">http://www.webshu.net/jiaocheng/web/CSS/200804/7732.html</a>
 http://www.zhihu.com/question/19823139 </body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航