父元素自适应子元素高宽尺寸

马黑黑 · 发表于 2022-3-25 07:42

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

直接上完整页面的代码：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="gbk" />
<title>盒子自适应子元素尺寸</title>
</head>
<body>
<style>
.waiDiv { /* 父盒子*/
display: inline-block; /* 自适应子元素宽度*/
border: 1px solid red; /* 测试用边框 */
}
.waiDiv div{ /* 子盒子 */
/* 下面两句确保文本以单行呈现 */
word-break: keep-all;
white-space: nowrap;
min-width: 100px; /* 最小宽度*/
min-height: 20px; /* 最小高度*/
border: 1px solid green; /* 测试用边框 */
}
</style>
<div class="waiDiv">
<div></div>
</div>
</body>
</html>

复制代码

马黑黑 · 发表于 2022-3-25 08:03

HTML部分，构造简单，能体现出盒子的父子关系就行：
<div class="waiDiv">
<div></div>
</div>

CSS部分略加解释：

<style>
.waiDiv { /* 父盒子*/
display: inline-block; /* 自适应子元素宽度*/
border: 1px solid red; /* 测试用边框 */
}
.waiDiv div{ /* 子盒子 */
/* 下面两句确保文本以单行呈现 */
word-break: keep-all;
white-space: nowrap;
min-width: 100px; /* 最小宽度*/
min-height: 20px; /* 最小高度*/
border: 1px solid green; /* 测试用边框 */
}
</style>

一、父盒子

① display: inline-block; 必需。inline-block 以行内内联块方式呈现，默认无高宽值，由里面的内容决定它的高宽尺寸。
② border一句仅做测试，实际使用时可删掉。所有代码中冗余的或不需要的注释也不用保留。

二、子盒子

① word-break 和 white-space 两句，是让所有文本以一行呈现，我设置它的本意是让文本自动撑开子元素，从而观察父元素的长度变化。实际应用使用时根据需要决定存留与否。
② min-width 测试用，实际使用时不建议，因为当元素有了呈现内容，突破min-width后宽度的行为表现很怪异；min-height建议使用。

一楼的例子，当给子元素填充了需要呈现的内容（比如文本、图片），不论尺寸如何，父元素的高宽都会自动适应。应用场景其实很多，将来实践时会慢慢发现。

另外，我们也可以固定父元素的高宽或高宽中的一个，这时候可以不设置div盒子的 inline-block 呈现模式，然后加入 overflow:hidden 来防止子元素超出部分的内容外溢，这是CSS设计跑马灯的套路。此外话。