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.