CSS - min-width 属性



min-width 属性用于设置元素宽度的下限。

可能的值

  • <length> − 任何长度单位。元素的宽度值永远不能小于此值。默认值为 0。
  • <length> - 它以包含块宽度的百分比设置元素的最小宽度。
  • initial − 将 min-width 的值设置为默认值。
  • inherit − min-width 的值继承自其父值。

适用于

所有 HTML 元素,但未替换的内联元素和表格元素除外。

DOM 语法


object.style.minWidth = "50px"

CSS 最小宽度示例

这是另一个示例,演示了在 min-width 属性中使用不同类型的值 -


<html>
<head>
<style>
	 	.box1 {
	 	 	 min-width: 300px;
	 	 	 background-color: yellow;
	 	 	 padding: 20px;
	 	 	 margin-bottom: 5px;
	 	}
	 	.box2 {
	 	 	 min-width: 30%;
	 	 	 background-color: lightgrey;
	 	 	 padding: 20px;
	 	 	 display: inline-block;
	 	 	 margin-bottom: 5px;
	 	}
</style>
</head>
<body>
	 	<div class="box1">This box has a minimum width of 300px</div>
	 	<div class="box2">This box has a minimum width of 30%.</div>
	 	<div class="box2">
	 	 	 This box has a minimum width of 30%. But the content is larger than the min-width.
	 	 	 Hence the value of min-width has no effect. This is a dimensional property which can be styled using CSS.
	 	</div>
</body>
</html>