Hàm calc trong CSS và cách sử dụng

Posted on by mtoplistChuyên mục:Top List

Hàm calc trong CSS và cách sử dụng

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 CSSHướng dẫn 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-css1calc-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-css2calc-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é.

mtoplist