前端学习之基础细碎笔记(盒子居中、外边距合并/塌陷等)

外边距实现居中对齐

让一个盒子实现水平居中,需要满足以下两个条件:

  • 必须是块级元素
  • 盒子必须指定宽度(width)
  • 然后给左右的外边距都设置为auto,就可以使盒子水平居中。

实际工作中经常使用这种方式进行网页布局,示例代码如下:

.inner{	width: 1200px;margin:0 auto;}
文字盒子水平居中的区别
text-align: center;/* 文字水平居中 */
margin:75px auto;/* 盒子水平居中,左右改为auto就可以了 */
图片和背景的区别
  • 插入图片 用的比较多,例如产品展示类
  • 背景图片 我们一般用于小图标背景 或者超大背景图片

相邻块元素垂直外边距合并

上下相邻的两个块级元素相遇时,如果上面的元素有下边距margin-bottom,下面的元素有上外边距margin-top,则它们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻元素垂直外边距的合并(也称为外边距塌陷)。
外边距合并
解决方案:尽量避免就好。

嵌套块元素垂直外边距合并

对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并(即父元素会跟着子元素一起塌陷)。
嵌套关系合并
解决方案:

  1. 可以为父元素定义1像素的上边框或上内边距。(只要让父子不要粘在一起,有分隔就行)。
  2. 可以为父元素添加 overflow: hidden。
  3. 待续。。。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值