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

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

外边距正常情况

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

外边距合并现象

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

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

外边距塌陷现象

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

解决方法

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

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

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

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

(4) 也可以设置浮动

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

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

外边距上下边框不生效:

给行内元素增加 行高

相关推荐
遇到困难睡大觉哈哈20 小时前
CSS中的Element语法
前端·css
gzzeason1 天前
在HTML中CSS三种使用方式
前端·css·html
mrsk1 天前
🧙‍♂️ CSS中的结界术:BFC如何拯救你的布局混乱?
前端·css·面试
Zsnoin能1 天前
AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站
前端·css
Sapphire~1 天前
重学前端003 --- CSS 颜色
前端·css
爱电摇的小码农1 天前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
一只毛驴1 天前
面试:SASS/LESS/SCSS区别
css
chao_7891 天前
CSS表达式——下篇【selenium】
css·python·selenium·算法
土豆12501 天前
提升CSS开发效率的必备Chrome插件
css·chrome
q567315231 天前
Koa+Puppeteer爬虫教程页面设计
javascript·css·爬虫