Hàm calc () CSS
Calc () là một hàm CSS cho phép bạn tính toán các giá trị ngay trong CSS của bạn . Ví dụ:
.pirate {
position: absolute;
/* lets have the pirate 20px from the left */
left: calc(50px - 30px);
}
Thoạt nhìn, bạn có thể nghĩ tại sao tôi lại quan tâm? Tôi chỉ có thể đặt nó thành 20px . Mọi thứ trở nên thú vị khi bạn nhận ra rằng bạn có thể kết hợp và kết hợp các đơn vị:
left: calc(1.5em - 8px);
Và mọi thứ thậm chí còn thú vị hơn khi bạn kết hợp các giá trị phần trăm. Các giá trị sau đặt chiều rộng của phần tử đã chọn thành 80px nhỏ hơn 100%:
width: calc(100% - 80px);
Đảm bảo sử dụng khoảng trắng xung quanh toán hạng. Ví dụ: v1 + v2, không phải v1 + v2 hoặc v1 + v2.
Bạn có thể sử dụng calc () ở bất kỳ nơi nào bạn muốn sử dụng các giá trị số (ví dụ: chiều rộng, chiều cao tối đa, lề trái,…)
Calc () rất hữu ích như căn giữa theo chiều dọc nếu bạn biết chiều cao của phần tử bạn muốn căn giữa. Bạn chỉ cần thêm margin-top vào phần tử bằng 50% chiều cao khung nhìn trừ đi một nửa chiều cao của phần tử. Giả sử phần tử của ta cao 100px:
.my-element {
display:block;
margin-left:auto;
margin-right:auto;
/* 50vh = 50% viewport height */
margin-top: calc( 50vh - 50px );
width: 200px;
height: 50px;
}
Hỗ trợ trình duyệt
Tôi có thể sử dụng calc không? Dữ liệu về hỗ trợ cho tính năng calc trên các trình duyệt chính từ caniuse.com.
Các tin liên quan
Cách sử dụng Bộ tiền xử lý CSS LESS trên VPS Ubuntu2014-01-27
