HTML/CSS | Đơn vị %, vw, vh

Học HTML, CSS từ Zero Tới Hero

Tài nguyên sử dụng trong bài học:

• W3Schools CSS Units

Đơn vị %

Các đơn vị tương đối luôn có một yếu tố để phụ thuộc vào. Đơn vị % phụ thuộc vào thẻ cha của nó.

Ví dụ:

<main>
  <div id="child"></div>
</main>

<style>
main {
  width: 200px;
  border: 1px solid black;
}

#child {
  width: 50%;
  background-color: orange;
  height: 20px;
}
</style>

Thẻ <div> chứa #child có width: 50%. Điều này có nghĩa chiều rộng được tính toán của nó sẽ bằng 50% chiều rộng thẻ cha chứa nó (200px).

Lúc này #child có chiều rộng là: (200px / 100%) * 50% = 100px.

Đương nhiên, nếu bạn cập nhật chiều rộng của thẻ <main>, chiều rộng của #child cũng sẽ được cập nhật theo để đảm bảo luôn bằng 50% so với thẻ cha chứa nó.

Đơn vị % được sử dụng với các nhóm thuộc tính: font-size, line-height, padding, border, margin, width, height, v.v.

Đơn vị vw, vh

Từ vw là từ viết tắt của viewport width - chiều rộng khung nhìn. Từ vh là từ viết tắt của viewport height - chiều cao khung nhìn. Trong CSS, đơn vị vw biểu thị 1% chiều rộng khung nhìn. Tương tự, đơn vị vh biểu thị 1% chiều cao khung nhìn.

Set width: 50vw, chiều rộng của .half-screen tương ứng với 50% (một nửa) tổng chiều rộng của khung nhìn. Tương tự, set height: 50vh, chiều cao của .half-screen tương ứng với 50% tổng chiều cao của khung nhìn.

Tóm tắt

• Đơn vị % thuộc nhóm tương đối, phần tử sử dụng đơn vị % phụ thuộc vào thẻ cha chứa nó.
• Đơn vị % được sử dụng với các nhóm thuộc tính: font-size, line-height, padding, border, margin, width, height, v.v.
• Từ vw được viết tắt của viewport width. Trong CSS, vw ứng với 1% chiều rộng khung nhìn.
• Từ vh được viết tắt của viewport height. Trong CSS, vh ứng với 1% chiều cao khung nhìn.