【HTML-进阶-如何实现父级块级元素宽度自适应子元素宽度】

背景

块级元素宽度默认值为100%，而不是auto;因此其宽度不会根据子元素内容动态适应。

如何实现父级元素宽度动态适应其子元素。

方法一 display:inline;

给块级元素设置inline-block值。

{
    display: inline-block;
}

方法二 绝对定位元素

给块级元素设置position：absolute/fixed;

{
 position:absolute; // fixed
}

方法三 浮动元素

{
    float: left;// right
}

方法四 display:flex

//html
<div class="test">
    hello,我是测试文字君。
</div>
.test{
    display:flex;
}