十三、理解不了盒子模型就用联想记忆法轻松解决(3)之盒子模型常见问题

大多数标签,只要使用了,大概率会出现盒子模型的常见问题,下面总结了几点:

外边距正常情况

水平布局 的盒子,左右的 margin 正常,互不影响,最终两者的距离为 左右 margin 的和

外边距合并现象

垂直布局的块级 元素,上下的 margin 会合并,如果两个盒子的上下外边距相同,取其中一个;如果不同,则最终两者的距离为 margin 的 最大值

这种情况是可以避免的,只给其中一个盒子设置 margin 就可以了:

外边距塌陷现象

互相嵌套的 块级元素 ,子元素的 margin-top 会作用在 父元素 上,导致父元素一起向下移动

解决方法

(1) 给父元素设置 border-top 或者 padding-top ,分隔父子元素的 margin-top

以上边框为例,如果设计图中有的话可以设置

(2) 给父元素设置 overflow:hidden,推荐使用

(3) 转换成行内块元素,父元素、子元素都可以转换,效果一样,这里转换子元素

(4) 也可以设置浮动

行内元素的 margin 和 padding 无效的情况

在给行内元素设置 margin 和 padding 时,水平方向的布局有效,垂直方向的布局无效,对于这种情况,可以给行内元素增加 行高

外边距上下边框不生效:

给行内元素增加 行高

相关推荐
前端Hardy3 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy3 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
墨渊君7 小时前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css
小帆聊前端10 小时前
Flex 布局实战指南:从踩坑到精通,解决 90% 布局难题
css
谢尔登11 小时前
【CSS】层叠上下文和z-index
前端·css
Alice-YUE11 小时前
【CSS学习笔记3】css特性
前端·css·笔记·html
睡不着先生11 小时前
CSS `:has()` 实战指南:让 CSS 拥有“if 逻辑”
css
yddddddy21 小时前
css的基本知识
前端·css
昔人'21 小时前
css `lh`单位
前端·css
2501_918126911 天前
用html5写一个flappybird游戏
css·游戏·html5