难点知识,记得收藏复习"/>
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个经典布局解决方案,重难点知识,记得收藏复习
发布评论