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

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

外边距正常情况

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

外边距合并现象

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

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

外边距塌陷现象

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

解决方法

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

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

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

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

(4) 也可以设置浮动

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

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

外边距上下边框不生效:

给行内元素增加 行高

相关推荐
小冯的编程学习之路3 小时前
【前端基础】:HTML
前端·css·前端框架·html·postman
一只爱打拳的程序猿9 小时前
【SpringBoot】实现登录功能
javascript·css·spring boot·mybatis·html5
程序员buddha10 小时前
ThinkPHP8.0+MySQL8.0搭建简单实用电子证书查询系统
javascript·css·mysql·php·layui·jquery·html5
高志小鹏鹏12 小时前
Tailwind CSS都更新到4.0了,你还在抵触吗?
前端·css·postcss
Mswanga14 小时前
探秘 CSS 盒子模型:构建网页布局的基石
前端·css
I will.87414 小时前
如何使用 CSS 实现黑色遮罩效果
前端·javascript·css
前端Hardy16 小时前
HTML&CSS :用 CSS 遮罩,让产品展示图 “高级感爆棚”
css·html
前端Hardy16 小时前
HTML&CSS :1 分钟学会,飞虫变色特效卡片
css·html
前端Hardy16 小时前
HTML&CSS&JS:必学!用动态导航栏,让网页颜值飙升 10 倍
css·html
王哈哈嘻嘻噜噜17 小时前
CSS简介以及导入形式
前端·css