这篇文章主要介绍了HTML中怎么解决margin塌陷问题的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇HTML中怎么解决margin塌陷问题文章都会有所收获,下面我们一起来看看吧。
margin是设置元素的外边距,正常情况下设置margin值时应该是父元素相对于浏览器定位,子元素相对于父元素定位而我们常常碰到无论怎么给margin设置值时都毫无反应。
html代码
<divclass="box1">
<divclass="box2"></div>
</div>
css代码
.box1{
width:200px;
height:200px;
background-color:rgb(16,128,214);
}
.box2{
width:100px;
height:100px;
background-color:rgb(128,227,248);
}
效果图
Image12.jpg
设置margin-top值时变化
当给box1设置margin-top:100px时,box2也设置margin-top:100px,只有父元素相对于浏览器向下了100px,而子元素相对于父元素的位置并未改变
Image15.jpg
但是当给子元素设置的margin-top:150px,大于父盒子高度时,子元素就会不再相对于父元素定位了而是带着父元素一起相对于浏览器定位向下移动150px
Image14.jpg
由上述内容我们可以知道什么是margin塌陷
margin塌陷
margin塌陷是在父级相对于浏览器进行定位时但子级没有相对于父级定位,
子级相对于父级就像塌陷了一样
父子嵌套元素垂直方向的margin,父子元素是结合在一起的,他们两个会取其中最
大的值
解决margin塌陷的方法
实质就是触发盒子的bfc(blockformatcontext块级格式化上下文)来改变父级元素的渲染规则
方法一
position:absolute;
设置相对定位
通过给父元素增加一个相对定位的属性来解决margin塌陷问题
Image17.jpg
方法二
display:inline-block;
设置成行块级元素
Image17.jpg
方法三
float:left和float:right;
利用浮动来改变样式
Image17.jpg
方法四
overflow:hidden
溢出盒子的部分隐藏展示
关于“HTML中怎么解决margin塌陷问题”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“HTML中怎么解决margin塌陷问题”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。