CSS样式--display:inline-block与float的在css样式中效果的区别

2018.1.31是一个不同寻常的日子,今天是我第一次进入csdn的日子,也是我第一次在网上发布自己的文章的日子。接下来以后我会把自己感觉好的地方,或者生活中的感悟分享出来,与大家共同学习,共同生活。希望我们不仅只会埋头敲代码,更要会学会享受快乐。
浮动是一个让元素拥有块级元素的特性但却可以在一排显示的属性,无论该元素是否是块级元素还是行内元素,与display:inline-block;的作用非常一致,但是也有很多不同点。其实这两者区别在使用方面影响不大,但是知道这些可以让我们更好地理解float与display:inline-block;之间的区别。

1. 文档流相关

float会脱离文档流,浮动后的元素会脱离普通文档流,也不再按照常规的排列方式排列,其他元素会忽略其存在然后进行排列,其主要特性为:
1.1 提高层级,不会再占据当前的位置
1.2. 可以设置宽高但宽高默认由内容撑开
1.3 margin:auto;失效,
display:inline-block可以将行级元素或块级元素转化为行快级元素,仍然属于普通文档流,界面中的元素按正常的特性(块级特性、行内特性、行块特性等)从上到下加载排列,占据正常的位置。

2.对文本样式设置效果不同

在实践中发现,float并不支持text-align:center;文本样式的设置,而display可以实现子级元素文本和文字的居中效果
float由于自己的排列规则,会优先考虑文本对其方式的影响(默认左对齐显示),文本不会居中显示。
disply:Inline-block;将行内元素转为行块级元素,不影响文本的排列规则,其texe-align设置文本依旧生效。
注意,这里的影响指的是文本水平方向的子级元素区域显示的效果,对于文字在子级元素内仍然是居中显示。
如果有人想知道具体的效果,可以联系我,我下一次把用代码实践验证一下。学这个地方的时候,当初问了好几个老师才理解两个在某些方面的不同之处,如果有什么错误,希望各位朋友能够及时给与纠正,在这里小乔谢谢你们每位的指导,提前祝大家新年快乐,集福中大奖。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值