Đơn Vị Trong HTML & CSS | CSS | TEMPLATE MẪU - Học Web Chuẩn

Đơn vị trong HTML & CSS
  • Trang chủ
  • Tham khảo
  • CSS
  • Đơn vị trong HTML & CSS

Đơn vị trong HTML & CSS

Đơn vị Mô tả
% Phần trăm
cm centimeter
in inch(1 inch = 2.54 cm)
mm millimeter
em

1em ngang bằng với kích cỡ font hiện hành, 2em = 2 lần kích cỡ font hiện hành.

vd: một thành phần được thiết lập font là 12pt, vậy 2em bằng với 24pt, ’em‘ là đơn vị rất hữu dụng trong css, nhất là trong trường hợp người dùng sử dụng zoom để phóng to chữ trong trình duyệt, đơn vị em sẽ giãn ra theo tỉ lệ chữ.

Nếu có nhiều tag lồng nhau, thì phần tử con khi sử dụng em sẽ chịu ảnh hưởng của phần tử cha kết tiếp.

rem Tương tự như đơn vị em tuy nhiên phần tử con sử dụng sẽ không chịu ảnh hưởng của phần tử cha kế tiếp, mà chịu ảnh hưởng của phần tử cha đầu tiên (root).
ex 1ex bằng chiều cao của chữ x in thường của font hiện hành. Do đó, đơn vị này không những phụ thuộc trên kích cỡ font chữ mà còn phụ thuộc loại font chữ vì cùng 1 cỡ 14ex nhưng chiều cao các chữ của các loại font là khác nhau.
pt point (1pt = 1/72inch)
pc pica (1pc = 12pt)
px Pixels (điểm ảnh trên màn hình máy tính)
vh 1vh sẽ bằng 1% chiều cao của màn hình hiển thị, ví dụ chiều cao trình duyệt hiển thị là 1000px, thì 1vh = 10px.
vw 1vw sẽ bằng 1% chiều rộng của màn hình hiển thị, ví dụ chiều rộng trình duyệt hiển thị là 1024px, thì vw = 10.24px.
vmin 1% màn hình tối thiểu, ví dụ trình duyệt hiển thị 1024x960, thì 1vmin = 9.6px.
vmax 1% màn hình tối đa, ví dụ trình duyệt hiển thị 1024x960, thì 1vmax = 10.24px.
calc() Đây là tính toán đơn vị, ví dụ: calc(100% - 20px), cách sử dụng này rất tiện lợi trong việc chỉnh responsive.

Chúng ta thường sử dụng các đơn vị sau để code: %: thường được dùng để định dạng phần trăm cho chiều rộng hay khoảng cách, hoặc font size. em: thường được dùng cho những nội dung có khả năng co giản khi zoom text. px: thường được dùng để định dạng khoảng cách, chiều rộng, chiều cao,...

Đầu trang

Học web chuẩn

HƯỚNG DẪN HỌC

  • Hướng dẫn học
  • Hướng dẫn học XHTML & HTML5
  • Hướng dẫn học CSS
  • Hướng dẫn học CSS3
  • Hướng dẫn học Responsive
  • Hướng dẫn học ES6
  • Hướng dẫn học React.js
  • Hướng dẫn học jQuery
  • Hướng dẫn học PHP
  • Hướng dẫn học Laravel
  • Hướng dẫn học Wordpress
  • Hướng dẫn học Webpack
  • Hướng dẫn học SCSS

BÀI TẬP

  • Bài tập XHTML & HTML5 cơ bản
  • Bài tập XHTML & HTML5 nâng cao
  • Bài tập CSS & CSS3 cơ bản
  • Bài tập CSS & CSS3 nâng cao
  • Bài tập jQuery

THAM KHẢO

  • Tham khảo
  • Tham khảo HTML4/XHTML
  • Tham khảo HTML5
  • Tham khảo CSS
  • Tham khảo CSS3
  • Tham khảo jQuery

CHUYÊN ĐỀ

  • Chuyên đề
  • Chuyên đề HTML/CSS
  • Chuyên đề HTML5/CSS3
  • Chuyên đề jQuery/JS
  • jQuery/JS plugin

CÔNG CỤ HỖ TRỢ

  • CSS3 Generator
  • Generator Tools
  • Web Tools
  • Random Tools
  • Công cụ test responsive
  • Chia sẻ web & tools hay

GÓP Ý - LIÊN HỆ

  • CÔNG CỤ TẠO CSS3CSS3 GENERATOR
  • BỘ CÔNG CỤGENERATOR TOOLS
  • CÔNG CỤ HỖ TRỢWEB TOOLS
  • CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
  • CÔNG CỤ KIỂM TRA RESPONSIVE TEST
  • CHIA SẺ HAYWEB & TOOLS
  • Follow us on hocwebchuan.com
  • Short URL
  • Rabbie theme

Từ khóa » đơn Vị đo Của Css