CSS Margin中5个经典布局解决方案，重难点知识，记得收藏复习

艾编程前端技术

已于 2022-12-08 00:15:36 修改

阅读量373

点赞数

分类专栏： html+css教程 WEB前端入门文章标签： css 前端 css3

于 2022-12-07 21:12:52 首次发布

本文链接：https://blog.csdn.net/Codinglaoshi/article/details/128227088

版权

这篇博客详细讲解了CSS中margin的重叠合并、穿透现象和负值特性的经典布局问题，包括3列自适应布局的圣杯布局和双飞翼布局。通过实例分析了不同情况下margin的间距计算，有助于理解并解决前端开发中的布局挑战。

摘要由CSDN通过智能技术生成

前几天我在面试前端开发同学的时候，有问到关于margin基础布局相关内容的过程中，发现很多同学基本解释不清楚，今天刚好有点时间就整理了一篇笔记出来。就以下5点在CSS布局经常会用到的经典布局解决方案。

css中margin外边距（重叠）合并现象
css中margin外边距穿透现象
css中margin设置负值时的特性
css经典3列自适应布局：圣杯布局
css经典3列自适应布局：双飞翼布局

可以尝试动手试一试，有什么疑问！可随时交流，有问必答。

margin 纵向重叠（合并）问题

元素垂直排列时，第一个元素的下外边距与第二个元素的上外边距会发生合并，合并后的间距就是两者中最大的那个值。

1、以下代码中，item1与item4之间的间距是多少？

<style>
    .box{
        margin-top:10px;/*上外边距*/
        margin-bottom:20px;/*下外边距*/
        height: 20px;
        background-color:skyblue;
    }
</style>
<body>
    <div class="box">item1</div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">item4</div>
</body>

答案：

解析：item1 与 item4 之间的间距为 3个下外边距大小+2个盒子高度=20*3+20*2=100px

2、以下代码中，item1与item4之间的间距是多少？

<style>
    .box{
        margin-top:10px;
        margin-bottom:20px;
        background-color:skyblue;
    }
</style>
<body>
    <div class="box">item1</div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">item4</div>
</body>

答案： item1与item4之间间距为 20px

解析：因为中间两个box中没有内容也没有边框线，所以外边距会一直重叠合并，所以最后item1和item4之间距离只有一个下外边距的大小

3、以下代码中 container 、 item 、box与浏览器顶部的间距是多

最低0.47元/天解锁文章

艾编程前端技术

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS Margin中5个经典布局解决方案，重难点知识，记得收藏复习

前几天我在面试前端开发同学的时候，有问到关于margin基础布局相关内容的过程中，发现很多同学基本解释不清楚，今天刚好有点时间就整理了一篇笔记出来。就以下5点在CSS布局经常会用到的经典布局解决方案。可以尝试动手试一试，有什么疑问！可随时交流，有问必答。margin 纵向重叠（合并）问题元素垂直排列时，第一个元素的下外边距与第二个元素的上外边距会发生合并，合并后的间距就是两者中最大的那个值。答案： item1与item4之间间距为 20px解析：因为中间两个box中没有内容也没有边框线，
复制链接

扫一扫