📅 最后修改于: 2023-12-03 15:31:15.293000 🧑 作者: Mango
<hr>宽度属性在 HTML 中使用<hr>标签可以添加水平分割线。使用它可以在内容中创建分割视觉效果或者分隔不同的段落。<hr>标签有一些属性，可以用来定义它的颜色、宽度、对齐方式等等，本文将介绍其中的宽度属性。
<hr>标签有以下的宽度属性：
属性 | 值 | 描述
--- | --- | ---
size | pixels | 定义分割线的高度。默认为1像素。
width | pixels或*%* | 定义分割线的宽度。可以使用像素或者百分比，默认为100%。
align | left、right或center | 定义分割线的水平对齐方式。默认为center。
值得注意的是，size和width属性往往会被混淆。size属性定义的是分割线的高度，而width属性定义的是分割线的宽度，也就是分割线横向占据的空间。
以下是一个示例代码片段：
<!DOCTYPE html>
<html>
<head>
<title>分割线示例</title>
<style>
hr {
color: #000;
background-color: #000;
height: 4px;
width: 50%;
margin-left: auto;
margin-right: auto;
border: none;
}
</style>
</head>
<body>
<h1>Logo</h1>
<p>这是一个网站的 Logo</p>
<hr size="10" width="70%">
<h2>主要内容</h2>
<p>这里是网站的主要内容</p>
<hr align="left" size="5" width="30%">
<p>这里是左对齐的分割线</p>
<hr align="right" size="2" width="70%">
<p>这里是右对齐的分割线</p>
</body>
</html>
上述代码中定义了一个样式，定义了分割线的样式，然后在网页中使用<hr>元素添加了多个分割线。其中第一个分割线定义了宽度为70%，第二个分割线定义了宽度为30%以及左对齐，第三个分割线定义了宽度为70%以及右对齐。
<hr>标签的宽度属性可以帮助我们控制分割线的横向宽度，定制不同样式的分割线。在使用它的时候，要注意分清各个属性之间的区别，避免混淆。