Tìm hiểu về CSS basic: Đơn vị tính

Việc hiểu và sử dụng đơn vị trong css là một điều quan trọng, bạn không thể đặt giá trị cho một thuộc tính là số mà không đi kèm với đơn vị, trừ trường hợp giá trị là 0 thì bạn không cần đặt đơn vị. Đơn vị trong css được chia làm hai loại chính là đơn vị tuyệt đối, và đơn vị tương đối.

Đơn vị tương đối

• Css có 3 đơn vị tương đối cơ bản
• em: cho biết kích cỡ của font hiện tại
• ex: chiều cao của font hiện tại
• px: đơn vị là điểm ảnh pixels

Đơn vị em và ex phụ thuộc vào kích cỡ của font được áp dụng cho phần tử trước đó, ta thấy đơn vị em thường được sử dụng nhiều do kích thước được kế thừa từ một kích thước đặt làm chuẩn ví dụ bạn đặt là 1.2em đồng nghĩa với việc kích thước của nó là gấp 1.2 lần của đơn vị trước đó, em sẽ là đơn vị thường dùng để tạo tỉ lệ hài hòa dữa các font chữ trong thiết kế. Trong khi đó đơn vị px thường được áp dụng cho các khối và đường line để định vị độ rộng và dài. 1px chuẩn là 0.26mm (1/96 inch) những màn hình có độ phân giải cao ta thấy điểm ảnh sẽ nhỏ hơn và các đường nét trông sẽ mảnh hơn.

Đơn vị tuyệt đối

• mm: millimeters
• cm: centimeters
• in: inches
• pt: points
• pc: picas

Những đơn vị này thường rất ít người dùng trong thiết kế.

Ngoài ra bạn còn có đơn vị phần trăm, bạn thường sử dụng nó để định tỉ lệ các khối trong giao diện của bạn, bạn sẽ thấy nó cũng gần tương tự như đơn vị em vậy.