介绍 & lt; style>
,,,,,,,.out {
,,,,,,,,,,,宽度:,100%;
,,,,,,,,,,,,背景颜色:粉色;
,,,,,,,}
,,,,,,,.out> div {
,,,,,,,,,,,身高:,100 px;
,,,,,,,,,,,宽度:,100%;
,,,,,,,,,,,背景颜色:,rgb (223,, 136,, 23);
,,,,,,,,,,,保证金:,5 px 0, 10 px;
,,,,,,,}
,,,& lt;/style>
,,,& lt; section 类=皁ut"比;
,,,,,,,& lt; div> 11 & lt;/div>
,,,,,,,& lt; div> 22 & lt;/div>
,,,,,,,& lt; div> 33 & lt;/div>
,,,& lt;/section> & lt; style>
,,,,,,,.out {
,,,,,,,,,,,宽度:,100%;
,,,,,,,,,,,,背景颜色:粉色;
,,,,,,,,,,,溢出:,隐藏;
,,,,,,,}
,,,,,,,.out> div {
,,,,,,,,,,,身高:,100 px;
,,,,,,,,,,,宽度:,100%;
,,,,,,,,,,,背景颜色:,rgb (223,, 136,, 23);
,,,,,,,,,,,保证金:,5 px 0, 10 px;
,,,,,,,,,,,/*,溢出:,隐藏。*/,,,,,,,,,,,:浮动,离开;
,,,,,,,}
,,,& lt;/style>
,,,& lt; section 类=皁ut"比;
,,,,,,,& lt; div> 11 & lt;/div>
,,,,,,,& lt; div> 22 & lt;/div>
,,,,,,,& lt; div> 33 & lt;/div>
,,,& lt;/section>
这篇“CSS边距重叠怎么办“文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“CSS边距重叠怎么办”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来就让我们进入主题吧。
提出问题:在使用CSS排版布局时,会发现兄弟或者父子节点设置的上下外边距会发生重叠现象,如下图所示
当我们查看整个部分的高度时,其实本应该是345 px的,由于父子和兄弟的外边距的重叠,会发现高度为320 px。那么如何在实际应用中解决这个问题呢?
创建黄东海(全程块级格式化上下文)可以解决这个问题,首先明确下黄东海的原理范克廉
内的元素与外界元素之间互不影响,是一个相对独立的封闭区域;
相邻的黄东海之间不会发生垂直边距的重叠,也就是说,想要元素外边距不重叠,就要创建一个黄东海区域;
黄东海区域不会与浮动元素的盒子重叠;
均在计算高度时,浮动元素也会被算在内;
如何创建黄东海?
1。设置溢出属性不为可见的;
2.浮动不为没有;
3.位置的值不为静态或者是相对的;
4。显示属性为表时;
当我们再次查看部分的高度的时候,会发现高度已经恢复345 px了,同时也证明了黄东海计算高度时,会把浮动的子元素的高度也算在内;
以上是“CSS边距重叠怎么办”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
