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

  时间:2019-01-31
本文章向大家介绍display:inline-block与float的在css样式中效果的区别,主要包括display:inline-block与float的在css样式中效果的区别使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

2018.1.31是一个不同寻常的日子,今天是我第一次进入csdn的日子,也是我第一次在网上发布自己的文章的日子。我自己是一个小白,刚学习前端半年时间,这段时间是自己学习最为艰辛的一段日子。看到别人发的博客,就想把自己每天的所学所想也用另外一种形式记录下来,便有了我的第一个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设置文本依旧生效。
注意,这里的影响指的是文本水平方向的子级元素区域显示的效果,对于文字在子级元素内仍然是居中显示。
学这个地方的时候,当初问了好几个老师才理解两个在某些方面的不同之处,如果有什么错误,希望各位朋友能够及时给与纠正,在这里小乔谢谢你们每位的指导,提前祝大家新年快乐,集福中大奖。

上一页 下一页

原文地址:http://www.manongjc.com/article/50577.html