在 HTML 和 CSS 中，我們經(jīng)常需要創(chuàng)建豎線來美化我們的頁面并且能夠更好地顯示一頁的布局。下面是兩種經(jīng)典的豎線代碼：

.vertical-line {
border-left: 1px solid black;
height: 100%;
position: absolute;
left: 50%;
}

這個代碼使用了邊框的方式來創(chuàng)建一個寬度為 1px 的黑色豎線。通過設(shè)置高度和絕對定位，我們可以確保這個豎線撐滿整個容器的高度。它的位置垂直居中并稍稍向右移動。

.vertical-line {
position: absolute;
width: 1px;
height: 100%;
background-color: black;
left: 50%;
overflow: hidden;
}

這個代碼使用了背景顏色的方式來創(chuàng)建豎線。我們只需要設(shè)置一個寬度為 1px 的豎形 div 容器，并將其左側(cè)撐滿整個容器。通過將其容器設(shè)置為溢出隱藏，可以確保豎線不會向左或右擴(kuò)大。此代碼的優(yōu)勢在于省略了邊框，這意味著您可以更好地控制頁面的邊緣和空白。