《CSS世界》-包裹性的理解
date
Jul 5, 2019
slug
2019-07-05
status
Published
tags
读后感
技术
summary
type
Post
包裹性
包裹性是对"shrink-to-fit"的一个形象表示,具有包裹和自适应两种表现.
CSS样式:
.box{
text-align: center;
}
.content{
display: inline-block;
text-align: left;
}
<div class="box">
<p id="conMore" class="content">文字内容</p>
</div>
<!-- 按钮 -->
<p><button id="btnMore">更多文字</button></p>
![notion image](https://www.notion.so/image/https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2021%2Fpng%2F713943%2F1611809690031-78a97fb1-2579-49bb-867e-8aaf0f712b9d.png?table=block&id=994f318a-c7ae-45ce-8d68-52fdfeacf411&cache=v2)
<div class="box">
<p id="conMore" class="content">文字内容-新增文字-新增文字-新增文字</p>
</div>
<!-- 按钮 -->
<p><button id="btnMore">更多文字</button></p>
![notion image](https://www.notion.so/image/https%3A%2F%2Fcdn.nlark.com%2Fyuque%2F0%2F2021%2Fpng%2F713943%2F1611809690039-1c920902-b10c-4a94-bec1-1707ad830b07.png?table=block&id=cb589a91-9415-4fdc-9c79-3764d5d84ada&cache=v2)
可以很明显地看出来,容器盒子包裹文字内容,在文字少的时候,盒子较小,可以相对于外部盒子居中显示;而当文字变多时,容器盒子充满了外部盒子,则容器盒子已经可以说是居中显示了,随后我们看到的文字靠左排列就是.content的text-align