Để tạo một bố cục CSS đẹp mắt, bạn cần bắt đầu bằng cách chỉ định kích thước cho tất cả các thành phần được đặt trong ứng dụng web. Một tính năng được yêu cầu nhiều nhất luôn là khả năng chỉ định kích thước bằng cách kết hợp các đơn vị kích thước. Ví dụ: bạn nên đặt trước 50% diện tích cộng với một khoảng không gian cố định, chẳng hạn như 10px. Bạn có thể thực hiện việc đó ngay bây giờ bằng cách sử dụng thuộc tính calc(). Bạn có thể sử dụng tính năng này ở bất kỳ nơi nào sử dụng độ dài hoặc số, vì vậy, bạn có thể sử dụng tính năng này để định vị các mục hoặc trong các giá trị màu rgb(). Vì vậy, tính năng này có rất nhiều ứng dụng tuyệt vời trong một trang tính kiểu.
Bạn có thể làm gì với hàm calc()?
Bạn có thể sử dụng thuộc tính calc() ở bất kỳ vị trí nào có độ dài hoặc số CSS trong tệp kiểu.
Tính năng này cung cấp cho bạn hai tính năng chính để giúp bố cục linh hoạt hơn:
- Kết hợp tỷ lệ phần trăm và giá trị tuyệt đối.
- Kết hợp các đơn vị đo kích thước.
Kết hợp tỷ lệ phần trăm với đơn vị tuyệt đối
Hãy xem ví dụ về cách kết hợp tỷ lệ phần trăm với đơn vị tuyệt đối. Giả sử chúng ta muốn phân bổ 50% diện tích có sẵn trừ đi một số pixel cố định, thì chúng ta có thể viết như sau:
#foo {
width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>
Nếu có màu nền xanh lục, thì nó sẽ có dạng như sau:
và nếu bạn thu nhỏ kích thước mẹ, thì nó sẽ có dạng như sau:
Điều thú vị ở đây là chúng ta luôn biết cạnh bên phải của nội dung sẽ cách giữa vùng chứa 100px về bên trái. Việc có thể kết hợp nhiều loại giá trị theo cách này cho phép ứng dụng web của bạn xử lý bố cục trên các thiết bị có kích thước khác nhau với khả năng kiểm soát lớn hơn nhiều so với trước đây.
Đơn vị kết hợp
Một điểm tuyệt vời khác là khả năng kết hợp các đơn vị với các phép đo khác nhau để có được kích thước kết quả. Ví dụ: bạn có thể đặt kích thước tương ứng với kích thước phông chữ hiện tại bằng cách kết hợp các đơn vị "em" và "px".
#bar {
height: calc(10em + 3px);
}
Bạn có thể tìm thấy một số ví dụ tuyệt vời về cách kết hợp các giá trị tại đây và tại đây.
Dùng thử
Với calc(), bạn có thể sử dụng +, -, * và / để cộng, trừ, nhân và chia các giá trị, cho phép mọi khả năng. Bạn có thể sử dụng calc() ở bất cứ nơi nào có thể sử dụng số hoặc độ dài CSS. Chúng tôi cũng đang nỗ lực để sớm bổ sung calc() cho các thuộc tính góc và tần số. Thuộc tính calc() cho độ dài hiện có trong Chrome 19 (bản dựng kênh nhà phát triển) bằng cách sử dụng thuộc tính -webkit-calc, trong Firefox kể từ phiên bản 8 bằng cách sử dụng thuộc tính -moz-calc và trong Internet Explorer kể từ phiên bản 9 không có tiền tố. Hãy cho chúng tôi biết ý kiến của bạn bằng cách để lại bình luận bên dưới.