神奇的inline-block

bang590 发布于2019-08-29 17:18 / 2033人阅读

摘要：代表元素是典型的元素，我们知道，使用一个的时候不定义宽度，按钮文字越多，按钮就越宽。见图这证明了元素第一点，由内部元素决定。但是超过一行就不一样了，因为已经被第一行撑开了，所以的就对里面的文字起效果了。

inline-block

我们都知道display: inline-block意味着该元素表现形式是inline，也就是不会独占一行，但是又可以给它定义宽和高。
那么如果一个元素定义了 display: inline-block但是没有定义宽呢？这个元素的width是多少呢?
答案是由内部元素决定，但不会超过‘包含块’的宽度(前提是没有定义类似min-width属性).专业术语叫 ‘shrink-to-fit’（收缩到合适）。

inline-block 代表元素 button

button是典型的inline-block元素，我们知道，使用一个button的时候不定义宽度，按钮文字越多，按钮就越宽。见图1:

这证明了inline-block元素第一点，width由内部元素决定。
再来看，同样是按钮，给按钮容器一个宽度，并且按钮文字超多超过容器宽度的时候，如下图可以看到文字自动换行了

"shrink-to-fit" 的一个应用

需求:
页面某个文字的内容是动态的，可能是几个字，也可能是一句话。然后希望文字少的时候居中显示，超过一行的时候居左显示，如何实现？
核心html, css代码如下:

    
        文字内容
    
    
        文字内容-文字内容-文字内容-文字内容-文字内容-文字内容-文字内容
    
    
    .box {
        text-align: center;;
    }
    .content { 
        display: inline-block;
        text-align: left; 
    }

看下效果:

可以看到文字较少的时候居中显示，换行的时候居左显示。那这是为什么呢？仔细看下页面结构就会发现，在 box 上的 center 作用的是 content这个元素，他让content 这个元素居中显示，而当文字总宽度没有超过 box宽度的时候content的宽由文字的宽决定，也就是文字总是充满 content 元素的，那么作用在 content 元素的不管是left 还是 center 或是 right 都是同样的效果。就像软袋子装水一样，是水决定这个袋子的大小，水此时充满袋子，自然无所谓居中居左居右了。

但是超过一行就不一样了，因为 content 已经被(第一行)撑开了，所以 content的 left 就对里面的文字起效果了。

非 inline-block 什么效果？

如果 content 不是inline-block的话，会是什么样子呢？先来分析一下，p 元素是块级元素所以会自动占满一行，不管内部文字多少。这样的话 content的left 就会生效了，也就是说文字少和文字多的时候文字都是居左显示的，看下效果是不是这样:

确实如此哦

参考

demo 来自张鑫旭新书《css 世界》。

私有云混合云神奇的网站一个神奇的网站幻云我的世界神奇宝贝服务器我的世界神奇宝贝幻云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114241.html

BFC 神奇背后的原理（转）

摘要：最常见的有简称和简称。根据布局规则第四条的区域不会与重叠。根据布局规则第二条垂直方向的距离由决定。同样的，当内部有浮动时，为了不影响外部元素的布局，计算高度时会包括浮动的高度。避免重叠也是这样的一个道理。 BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BF...

April 2019-08-29 12:56 评论0 收藏0
BFC 神奇背后的原理（转）

摘要：最常见的有简称和简称。根据布局规则第四条的区域不会与重叠。根据布局规则第二条垂直方向的距离由决定。同样的，当内部有浮动时，为了不影响外部元素的布局，计算高度时会包括浮动的高度。避免重叠也是这样的一个道理。 BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BF...

wawor4827 2019-08-01 17:07 评论0 收藏0
C3的坑之inline-block

最近开始复习css一直在踩坑,今天分享一个inline-block 关于inline-block可能很多人都不熟悉,布局这方面很多人用的都是flex或者浮动,flex很强大毋庸置疑的可是关于兼容性就不是很让人满意,而浮动虽然很兼容可是觉得清除浮动就很麻烦,于此我在一些大型网站,例如我们的segmentfault的首页导航展示用的布局就是inline-block,觉得inline-block可以撸一...

luck 2019-08-30 13:53 评论0 收藏0
C3的坑之inline-block

最近开始复习css一直在踩坑,今天分享一个inline-block 关于inline-block可能很多人都不熟悉,布局这方面很多人用的都是flex或者浮动,flex很强大毋庸置疑的可是关于兼容性就不是很让人满意,而浮动虽然很兼容可是觉得清除浮动就很麻烦,于此我在一些大型网站,例如我们的segmentfault的首页导航展示用的布局就是inline-block,觉得inline-block可以撸一...

zengdongbao 2019-08-01 18:31 评论0 收藏0
神奇的BFC

摘要：垂直方向的距离由决定。根据布局规则第四条的区域不会与重叠。因此会根据包含块的宽度，和的宽度，自动变窄。效果如下清除内部浮动根据布局规则第六条计算的高度时，浮动元素也参与计算。概念 BFC(Block formatting context)直译为块级格式化上下文。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且...

GraphQuery 2019-08-29 15:07 评论0 收藏0