难点知识，记得收藏复习"/>
CSS Margin中5个经典布局解决方案，重难点知识，记得收藏复习
前几天我在面试前端开发同学的时候，有问到关于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与浏览器顶部
更多推荐
CSS Margin中5个经典布局解决方案,重难点知识,记得收藏复习
发布评论