Khi thực hiện chia Layout nếu đặt cho các cột kích thước nhất định hiển thị trên các màn hình khác nhau sẽ không tốt. Tính năng Responsive ngày càng được chú trọng chính vì vậy việc thiết lập kích thước cho column khá cần thiết.
Hàm calc trong CSS sẽ giải quyết vấn đề như đã nêu ở trên. Calc() trong CSS3 cho phép thực hiện các phép tính đơn giản như +, -, *, /. Front end Developer có thể sử dụng hàm để tự động tính toán cho các thuộc tính như width, height, margin, padding vv…
Cách sử dụng hàm calc trong CSS
Để hiểu rõ hơn về calc trong Css bạn hãy làm ví dụ sau:
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: absolute;
left: 50px;
width: 100%;
border: 2px solid green;
background-color: blue;
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
Khi chạy mã thì bạn sẽ thấy rằng div bị đẩy sang phải một khoảng là 50px. Khiến cho màn hình xuất hiện thanh scrollbar.
Thay thế width: 100% thành width: calc(100% – 100px); và kết quả sẽ được là
Với height bạn cũng làm tương tự
height: calc(100vh - 80px);
Tiếp tục ví dụ khác:
<!DOCTYPE html>
<html>
<head>
<style>
.demo-box .item {
border: 2px solid orange;
height: 100px;
width: calc(100%/4);
float: left;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="demo-box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
Khi đặt width: calc(100%/4); trình duyệt tính toán chia đều cho 4 cột, mỗi cột chiếm 25%.
Kết luận: Trên đây mình đã giới thiệu về calc trong CSS. Một hàm cũng được sử dụng tương đối rộng rãi khi thiết kế giao diện cho website. Qua ví dụ trên bạn hãy tìm hiểu và áp dụng cho trang web của mình nhé.
