由BFC导致的display:inline-block的特殊性

入门了前端的应该都知道inline-block是以内联块级特性,即该元素既具有块状元素的盒子模型又具有内联元素的不独占一行特性。于是结论认为inline-block和block除了不独占一行外其余特性皆相同。

然而,事实并非如此纯粹简单,inline-block还具有一些细节特性,不求甚解有时会阻碍我们的布局。

目前在项目实践中积累了两个细节:

1.inline-block虽然具有盒子模型,但是margin:0 auto实现居中会失效,只有block才能这样居中。

2.同级存在浮动元素如float:left的情况下,inline-block元素也会和文字一样受到float的效果影响,环绕在float:left元素的右边,而block元素内文字会环绕左浮动元素,而其他子元素会另起一行。

往往很多布局问题都是由这些细节引起的,不求甚解者常常通过硬编码、牺牲页面灵活性(响应式设计、可修改性等)来解决(不如说应付),其实透彻理解特性方能药到病除,事半功倍。

-------------------------------------------------------------后记---------------------------------------------------------------

后来在稀土掘金读到一篇解释BFC的神作,豁然开朗,其实float和inlinebox引起的不同于正常文档流布局的现象都是由于BFC的特性,网页内容的根元素body本身就是一个大的BFC,只是往往我们在其中定义块元素时,没有将他们设置为BFC,所以这些div元素内部按照正常文档流来布局,会产生塌陷以及float元素带来的诸多布局不便。

通读此文,理解BFC,才算真正入了前端的门吧:传送门

发布了71 篇原创文章 · 获赞 31 · 访问量 20万+

猜你喜欢

转载自blog.csdn.net/m0_37828249/article/details/80786628