Css 简明教程
CSS - Width Property
width 属性设置元素内容区域的宽度。如果是 box-sizing 设置为 border-box ，属性 width 设置边框区域的宽度。
由 width 属性指定的值保留在由 min-width 和 max-width 属性定义的值内。
参阅图片以了解元素的宽度。
Possible Values
-
<length> ：一个特定的长度值，如像素 (px)、厘米 (cm)、英寸 (in) 等。
-
<percentage> : 包含元素宽度的百分比。
-
auto : 浏览器将根据内容自动计算宽度。这是默认值。
-
* max-content* : 定义内在首选宽度。
-
* min-content* : 定义内在最小宽度。
-
* fit-content* : 将内容放入可用空间中，但绝不会大于 max-content。
-
* fit-content* : 使用 fit-content 公式，即 min(max-content, max(min-content, <length-percentage>)) 。
CSS Width - Length Unit
以下是向 div 元素中添加长度单位的宽度的示例：
<html>
<head>
<style>
div {
border: 1px solid black;
margin-bottom: 5px;
}
div.a {
width: 100px;
background-color: rgb(230, 230, 203);
}
div.b {
width: 5em;
background-color: rgb(230, 230, 203);
}
</style>
</head>
<body>
<div class="a">This div element has a width of 100px.</div>
<div class="b">This div element has a width of 5em.</div>
</body>
</html>CSS Width - Percentage Value
以下是以百分比值向 div 元素添加宽度的示例：
<html>
<head>
<style>
div {
border: 1px solid black;
margin-bottom: 5px;
}
div.a {
width: 120%;
background-color: yellow;
}
div.b {
width: 20%;
background-color: rgb(236, 190, 190);
}
</style>
</head>
<body>
<div class="a">This div element has a width of 120%.</div>
<div class="b">This div element has a width of 20%.</div>
</body>
</html>CSS Width - Auto
以下是向 div 元素添加 auto 的宽度的示例：
<html>
<head>
<style>
div {
border: 1px solid black;
margin-bottom: 5px;
}
div.auto {
width: auto;
background-color: yellow;
}
</style>
</head>
<body>
<div class="auto">This div element has a width set as auto.</div>
</body>
</html>CSS Width - Using max-content and min-content
以下是以 max-content 和 min-content 为宽度的示例：
<html>
<head>
<style>
div {
border: 1px solid black;
margin-bottom: 5px;
}
div.c {
width: max-content;
background-color: bisque;
}
div.d {
width: min-content;
background-color: darkseagreen;
}
</style>
</head>
<body>
<div class="c">This div element has a width as max-content.</div>
<div class="d">This div element has a width of min-content.</div>
</body>
</html>CSS width - Image
以下是在图像中添加宽度的示例：
<html>
<head>
<style>
div {
border: 1px solid black;
margin-bottom: 5px;
}
.demoImg {
margin-top: 15px;
width: 300px;
margin-right: 0.5in;
}
</style>
</head>
<body>
<img class="demoImg" src="images/scancode.png" alt="image-width">
</body>
</html>CSS width - Using fit-content
以下是对列表的宽度设置的 fit-content 值示例：
<html>
<head>
<style>
ul {
background-color: beige;
width: fit-content;
padding: 1.5em;
border: 2px solid black;
}
li {
display: inline-flex;
background-color: orange;
border: 2px solid black;
padding: 0.5em;
}
</style>
<body>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</body>
</html>