html中的inline-block(image等)元素为什么不能使用margin:auto

这个博客也是自己对上一篇博客HTML小结一内容中,为什么块级等元素使用了float、absoulte、固定地位后再使用margin:auto无效的解释。
首先声明一下,使用浮动,决对定位和固定定位的块级元素会默认的转换为inline-block行内块元素。
接下来,就让我来说明一下这个问题。如果有什么不对,请指教。inline-block行内块元素为什么不能使用margin:auto,我们先来了解一下块级元素为什么能使用。
块级元素的水平属性,块级元素在水平方向上有7大属性,margin-left、border-left、padding-left、width、padding-right、border-right和margin-right,这7大属性的值加起来必须是元素包含块的宽度, 这7个属性中,只有3个属性可以设置为auto:margin-left、width、margin-right,其余属性必须设定为特定的值,或者默认为0。
特地强调一下,元素的整体宽度是上面水平方向上7大属性的之和,而width只是我们声明的可视化可显现的可写入数据的宽度。

下图,这就是块级元素div只设置了width,和height的情况下,他是有默认的左右的外边距的,却没有上下外边距。这就是块级元素只设置了width,和height的情况下他的外边距的情况

我自己的理解是,因为目前的网页是是有宽度的,因此水平方向的最大宽度有所限制(为包含块的整体宽度),也就是块级元素的含义,什么是块元素,就是块级元素独占一行。因此块级元素的整体宽度就是网页的宽度。延伸一下,先做一个铺垫,
Q:就算是块级元素,为什么垂直方向上不能设置auto呢?
A: 垂直方向的高度根据内容的高度来定,且可以一直延伸滚动;因此,水平方向有了最大值的限制,auto才有意义,auto=总和-已知;而垂直方向上可以无限延伸,此时如果要有的auto话,就是auto=无穷大-已知=无穷大,没有意义。

下图,这是在div的里面直接用了display:inlineblock的情况,默认情况下,他是没有外边距的
这是在div的里面直接用了display:inlineblockd的情况,他是没有外边距的
为什么inline-block元素使用margin: auto不起作用
再次提到上面的考点,这7大属性的值加起来必须是元素包含块的宽度,这里我们假设其他属性均为0,那也就是margin-left + width + margin-right = 包含块的宽度。
所以:对于块级元素,当width固定后,margin就能通过margin = (元素整体的宽度 - 设置的width )/2获得取值
而对于inline-block元素(包含行内替换元素比如img等),内容的宽度就是最终的宽度,没有margin-left + width + margin-right = 包含块的宽度这一限制,就是他没有默认的左右的外边距,所以当margin被设置为auto时,它并不知道要取什么值,无法计算,只能默认为0,这和为什么垂直方向上不能设置auto是一样的道理。

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值