Hàm Calc CSS là gì? Khi nào cần sử dụng hàm này? Bạn có gặp khó khăn khi thực hiện các bước chia Layout cho các cột kích thước hiển thị trên màn hình không? Làm thế nào để điều chỉnh kích thước theo mong muốn và sở thích thay vì để ở trạng thái mặc định?
Nếu đặt cho các cột kích thước hiển thị có độ chênh lệch với nhau sẽ khiến cho giao diện website không được đẹp và chuyên nghiệp.
Để khắc phục tình trạng này, việc sử dụng các tính năng Responsive ngày càng được chú trọng. Nhờ thế việc thiết lập kích thước cho cột sẽ được căn chỉnh chuyên nghiệp hơn.
Hàm Calc trong CSS sẽ giúp bạn giải quyết các vấn đề nêu trên. Cals CSS sẽ cho phép bạn thực hiện các phép tính đơn giản như “+”, “-”, “*”, “/”. Front end Developer sẽ dùng hàm tự động tính toán cho các thuộc tính width, height, margin, padding,…
Hàm Calc CSS là gì?
Calc CSS là một hàm trong CSS cho phép bạn thực hiện các phép tính đơn giản như “+”, “-”, “*”, “/”. Calc CSS được sử dụng dùng để tính toán cho tất cả các thuộc tính CSS về kích thước.
Một số thuộc tính được sử dụng với hàm Calc CSS gồm có: width, height, margin, padding, top, left, background-position.
Một điểm thú vụ của hàm Calc CSS chính là nó không chỉ tính toán các thuộc tính riêng biệt. Nhưng hàm hày còn cho phép tính toán số liệu kích thước giữa các thuộc tính/ đơn vị với nhau.
Thật thú vị phải không? Nếu biết cách sử dụng hàm này thành thạo chắc chắn sẽ giúp ích cho bạn rất nhiều trong công việc. Chắc hẳn giờ đây bạn đang thắc mắc không biết làm thế nào để sử dụng hàm này phải không?
Hãy cùng theo dõi xem cấu trúc của hàm CALC CSS là gì trước nhé.
Một ví dụ về cú pháp của hàm Calc CSS
Một bài toán đơn giản đặt ra chính là hãy kết hợp giữa hai đơn vị % và px để gán độ rộng cho class .container là 100% – 30px.
Cấu trúc cú pháp cụ thể như sau:
.container {
width: calc(100 % -30 px);
width: -moz - calc(100 % -30 px);
width: -webkit - calc(100 % -30 px);
}
Nếu bạn sử dụng SASS thì có thể dùng mixin như sau:
@mixin calc($property, $expression) {
#
{
$property
}: -moz - calc(#{
$expression
});
# {
$property
}: -webkit - calc(#{
$expression
});
# {
$property
}: calc(#{
$expression
});
}
.container { @
include calc(width, '100% - 30px');
}
Những trình duyệt nào hỗ trợ hàm CALC CSS?
Hiện nay hàm CALC CSS được hỗ trợ trên hầu hết các trình duyệt hiện nay. Dưới đây là hình ảnh về một số trình duyệt hỗ trợ calc css và thông tin về trình duyệt đó.
Hướng dẫn cách sử dụng hàm Calc CSS
Sau đây là hướng dẫn chi tiết cách sử dụng hàm Calc CSS bạn đọc cùng theo dõi nhé. Một số cách sử dụng rất đơn giản, nếu muốn bạn đọc cũng có thể ghi chú và lưu lại thông tin để sử dụng.
Để giúp bạn dễ dàng hình dung về cách sử dụng calc css chúng tôi sẽ đưa ra một số ví dụ cụ thể. Dưới đây là 3 ví dụ về cách sử dụng hàm calc trong CSS.
Tình huống 1. Cài đặt giá trị cho các elements
Như ví dụ chúng tôi đã nêu ở trên, khi bạn muốn cài đặt width, height hoặc thuộc tính khác cho một element thì cú pháp rất đơn giản.
Dưới đây là một ví dụ khác trong tình huống cài đặt thuộc tính Left cho Class.position-left khoảng cách 50% – 15px:
Cấu trúc cú pháp chi tiết như sau:
.position - left {
left: calc(50 % -15 px);
left: -moz - calc(50 % -15 px);
left: -webkit - calc(50 % -15 px);
}
Tình huống 2. Hướng dẫn tạo khoảng cách cho các elements
Bài toán đặt ra như sau: Hãy tạo một row có 2 cột với chiều rộng là 50% và cách nhau 30px. Giả sử hai cột này có class là .column-1-2 chúng ta sẽ viết như sau:
HTML
<div class='row'>
<div class='column-1-2'>Column width 50%</div>
<div class='column-1-2'>Column width 50%</div>
</div>
CSS
.column - 1 - 2 {
display: inline - block;
width: calc(50 % -15 px);
width: -moz - calc(50 % -15 px);
width: -webkit - calc(50 % -15 px);
}
.column - 1 - 2: first - child {
margin - right: 30 px;
}
Tình huống 3. Calc CSS giúp cho code dễ hiểu và chính xác hơn
Trong tình huống 3, hãy tạo 1 row có 6 cột với độ rộng như nhau. Chúng tôi giả sử 6 cột này có class là .column-1-6.
Bạn cũng có thể tự tính toán được độ rộng của mỗi cột là bao nhiêu phải không?
Độ rộng của mỗi cột sẽ là:
100 % / 6 ~ 16.6667%
.column - 1 - 6 {
width: 16.6667 % ;
}
Nhìn vào đoạn code ở trên có lẽ bạn sẽ thấy khó hiểu và không biết là kết quả có phải là làm tròn của 100 chia cho 6 hay không.
Trên thực tế bạn hoàn toàn có thể sử dụng hàm calc css để giúp cho đoạn code trở nên đơn giản và dễ hiểu hơn rất nhiều. Dưới đây là đoạn code chi tiết:
.column - 1 - 6 {
width: calc(100 % / 6);
width: -moz - calc(100 % / 6);
width: -webkit - calc(100 % / 6);
}
Từ ví dụ trên bạn có thể thấy việc sử dụng hàm calc css thật hữu ích phải không. Đây chỉ là ba ví dụ cơ bản về cách sử dụng hàm này. Còn nhiều cách sử dụng phức tạp hơn về hàm calc, do thời lượng có hạn nên chúng tôi xin phép sẽ giới thiệu vào một dịp khác.
Kết luận
Trên đây là một số thông tin hữu ích về hàm Calc CSS. Chúng tôi đã phân tích chi tiết về cú pháp cũng như 3 cách sử dụng đơn giản của hàm này. Hy vọng rằng những thông tin trên giúp bạn đọc sử dụng công cụ Calc CSS một cách thành thạo.
Nếu có bất kỳ thắc mắc hay câu hỏi nào liên quan đến cách sử dụng hàm này hãy liên hệ với chúng tôi để được giải đáp. Cảm ơn bạn đọc đã quan tâm theo dõi.
Các tìm kiếm liên quan đến chủ đề “Calc CSS”
Px to rem calc css
Calc in CSS
Calc CSS là gì
CSS 100vh px
Height: calc CSS
Calc css compatibility
Calc not working CSS
CSS calc vh
Bài viết liên quan
Thuộc tính z index trong css là gì? Hướng dẫn 2 cách sử dụng dễ hiểu
Những vấn đề về flex css cho người mới bắt đầu
Thuộc tính Float CSS là gì? Phân biệt Float và Clear trong CSS
Media CSS là gì? Giới thiệu 02 cách sử dụng Media CSS cơ bản
