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>
Hướng dẫn sử dụng hàm calc trong CSS
Cách sử dụng hàm calc trong CSS

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à

calc-css1

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>

calc-css2

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é.

Category:

Bình luận!

Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *