CSS各種距離介紹

CSS中有很多種不同的距離，如下：

• px（像素）
• em（相對于父元素的字體大?。?/li>
• rem（相對于根元素的字體大?。?/li>
• %（相對于父元素的寬度）
• vw（相對于視窗的寬度）
• vh（相對于視窗的高度）

在下面的示例中，我們將使用pre標簽添加一些CSS代碼，展示不同單位的用法：

/* 使用像素 */
#box {
width: 200px;
height: 50px;
font-size: 16px;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
}
/* 使用em */
#box-em {
width: 20em;
height: 5em;
font-size: 1em;
margin-top: 2em;
margin-bottom: 2em;
padding: 1em;
}
/* 使用rem */
#box-rem {
width: 20rem;
height: 5rem;
font-size: 1rem;
margin-top: 2rem;
margin-bottom: 2rem;
padding: 1rem;
}
/* 使用% */
#box-percentage {
width: 50%;
height: 50px;
font-size: 16px;
margin-top: 5%;
margin-bottom: 5%;
padding: 2%;
}
/* 使用vw */
#box-vw {
width: 50vw;
height: 50px;
font-size: 16px;
margin-top: 5vw;
margin-bottom: 5vw;
padding: 2vw;
}
/* 使用vh */
#box-vh {
width: 50vh;
height: 50px;
font-size: 16px;
margin-top: 5vh;
margin-bottom: 5vh;
padding: 2vh;
}

通過上述示例，我們可以看到不同單位的用法及效果。在實際使用中，應根據具體情況選擇合適的距離單位，以達到最佳的視覺效果。