Đơn vị đo trong CSS

CSS cho phép sử dụng nhiều loại đơn vị để xác định kích thước và khoảng cách của các phần tử trên trang web. Dưới đây là một số đơn vị đo phổ biến:

px (pixels): Đơn vị đo tuyệt đối, cố định và không thay đổi dù kích thước màn hình có thay đổi.

.element {
  width: 200px;
  height: 100px;
}

em: Đơn vị đo tương đối, thường sử dụng để xác định kích thước dựa trên font-size của phần tử cha gần nhất.

.element {
  font-size: 16px;
  padding: 1em; /* tương đương với 16px */
}

rem: Giống như em nhưng dựa trên font-size của phần tử gốc (root element), thường là <html>.

.element {
  font-size: 16px;
}

.child-element {
  padding: 2rem; /* tương đương với 32px (2 * 16px) */
}

.element {
  width: 50vw; /* chiếm 50% chiều rộng của viewport */
}

.element {
  height: 50vh; /* chiếm 50% chiều cao của viewport */
}

Tạo một trang web đơn giản chứa một số phần tử HTML và sử dụng các đơn vị đo khác nhau để xác định kích thước và khoảng cách của chúng.
Thay đổi kích thước của trình duyệt và quan sát sự thay đổi trong kích thước của các phần tử sử dụng đơn vị đo tuyệt đối và đơn vị đo tương đối.
Thử sử dụng đơn vị đo viewport để tạo ra một layout linh hoạt có thể điều chỉnh kích thước theo kích thước của trình duyệt.

Last updated 1 year ago