Để tạo bố cục CSS đẹp mắt bắt đầu bằng việc gán 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 nhiều người yêu cầu luôn là khả năng chỉ định kích thước bằng cách sử dụng hỗn hợp đơn vị kích thước. Ví dụ: sẽ tốt hơn nếu bạn có thể đặt trước 50% diện tích cộng với một lượng không gian cố định, chẳng hạn như 10px. Bạn có thể làm 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ố, nhờ vậy bạn có thể sử dụng để định vị mọi thứ hoặc dùng trong các giá trị màu rgb(). Như vậy, tính năng này có rất nhiều công dụng tuyệt vời trong biểu định kiểu.
Bạn có thể làm gì với calc()?
Bạn có thể sử dụng thuộc tính calc() ở bất cứ nơi nào có độ dài hoặc số CSS trong biểu định kiểu của bạn.
Trình bổ trợ này cung cấp cho bạn 2 tính năng chính giúp bố cục linh hoạt hơn:
- Tỷ lệ phần trăm kết hợp và giá trị tuyệt đối.
- Đang kết hợp đơn vị kích thước.
Tỷ lệ phần trăm kết hợp với đơn vị tuyệt đối
Hãy cùng 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ừ số lượng 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 là màu xanh lục, ảnh sẽ trông như sau:
và nếu bạn thu nhỏ kích thước thành phần mẹ, kết quả sẽ có dạng như sau:
Điều tuyệt vời ở đây là chúng tôi luôn biết rằng cạnh phải của nội dung sẽ là 100px về bên trái của giữa vùng chứa. Việc có thể kết hợp các loại giá trị khác nhau 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.
Thiết bị kết hợp
Một điều tuyệt vời khác là khả năng kết hợp các đơn vị có số đo khác nhau để có được kích thước thu được. 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ụ hay 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 loại khả năng. Bạn có thể sử dụng calc() ở bất kỳ nơi nào có thể sử dụng độ dài hoặc số 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 suất. 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 (sử dụng thuộc tính -moz-calc) và trong Internet Explorer kể từ phiên bản 9 (chưa có tiền tố). Hãy chia sẻ suy nghĩ của bạn bằng cách để lại bình luận bên dưới.