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

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

外边距正常情况

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

外边距合并现象

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

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

外边距塌陷现象

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

解决方法

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

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

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

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

(4) 也可以设置浮动

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

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

外边距上下边框不生效:

给行内元素增加 行高

相关推荐
街尾杂货店&7 小时前
css word属性
前端·css
Demoncode_y21 小时前
前端布局入门:flex、grid 及其他常用布局
前端·css·布局·flex·grid
CoderYanger1 天前
前端基础——HTML练习项目:填写简历信息
前端·css·职场和发展·html
软件技术NINI1 天前
html css js网页制作成品——饮料官网html+css+js 4页网页设计(4页)附源码
javascript·css·html
软件技术NINI1 天前
html css js网页制作成品——HTML+CSS辣条俱乐部网页设计(5页)附源码
javascript·css·html
金梦人生1 天前
Css性能优化
前端·css
写代码的皮筏艇1 天前
CSS属性继承与特殊值
前端·css
我有一棵树1 天前
使用Flex布局实现多行多列,每个列宽度相同
前端·css·html·scss·flex
Light602 天前
像素退场,曲线登场:现代响应式 CSS 全家桶 | 领码课堂
前端·css·响应式设计·css函数·布局系统·相对单位·设计令牌
速易达网络2 天前
Vue3 原生移动应用开发来了
前端·javascript·css