07/05/2018, 15:07
Tìm hiểu về Đơn vị trong CSS
Trong cuộc sống hàng ngày chúng ta có nhiều đơn vị để cân, đo, đong đếm mọi thứ hữu hình, ví dụ như cm, km, kg, … Vậy, với một trang web, để xác định xem phần tử này phải nằm ở khu vực này, hình ảnh kia phải hiển thị ở chỗ kia, thì ta phải dùng đơn vị gì để xác định. Mét, kilomet ...
Trong cuộc sống hàng ngày chúng ta có nhiều đơn vị để cân, đo, đong đếm mọi thứ hữu hình, ví dụ như cm, km, kg, … Vậy, với một trang web, để xác định xem phần tử này phải nằm ở khu vực này, hình ảnh kia phải hiển thị ở chỗ kia, thì ta phải dùng đơn vị gì để xác định. Mét, kilomet hay centimet.
Chương này sẽ giúp bạn làm quen một số đơn vị được sử dụng thường xuyên trong CSS.
| Đơn vị | Miêu tả | Ví dụ |
|---|---|---|
| % | Đơn vị %, là đơn vị tham chiếu tỉ lệ so với một phần tử mẹ dựa vào kích thước. Ví dụ: bạn có một khung mẹ có kích thước là 400px và bạn muốn đặt một khung khác vào bên trong khung mẹ này. Tùy theo lựa chọn thì khung con này sẽ có nhiều kích thước, và tương ứng với kích thước khung mẹ thì bạn sẽ có tỉ lệ tương ứng. Ví dụ: nếu là 50% thì khung con có kích thước là 200px | p {font-size: 16pt; line-height: 125%;} |
| cm | Đơn vị centimet | div {margin-bottom: 2cm;} |
| em | Một đơn vị được sử dụng cho chiều cao của font. Một đơn vị em tương đương với kích cỡ của một font đã cho, nếu bạn gán kích cỡ của font là 12pt thì mỗi đơn vị em sẽ là 12pt, do đó 2em sẽ là 24pt | p {letter-spacing: 7em;} |
| ex | Đơn vị được sử dụng cho chiều cao của chữ cái x thường (hay là x-height) | p {font-size: 24pt; line-height: 3ex;} |
| in | Đơn vị inch (=2.54 cm) | p {word-spacing: .15in;} |
| mm | Đơn vị milimet | p {word-spacing: 15mm;} |
| pc | Đơn vị pica. Một pica = 12 point và do đó 1 inch = 6 pica | p {font-size: 20pc;} |
| pt | Đơn vị point. 1 inch = 72 point | body {font-size: 18pt;} |
| px | Đơn vị được sử dụng trên màn hình hiển thị, một px sẽ tương đương với một điểm ảnh trên màn hình. Chất lượng của điểm ảnh sẽ hoàn toàn khác nhau trên một số thiết bị, ví dụ như một điểm ảnh trên các thiết bị in ấn sẽ khác một điểm ảnh trên các thiết bị màn hình có độ phân giải thấp. | p {padding: 25px;} |
Loạt bài hướng dẫn Học CSS cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: và
Follow fanpage của team hoặc facebook cá nhân Nguyễn Thanh Tuyền để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Bài học CSS phổ biến khác tại vietjack.com:
