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,… 

Calc CSS là gì

Giới thiệu về hàm Calc CSS là gì?

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àm CALC CSS

Những trình duyệt hỗ trợ hàm CALC CSS hiện nay

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 

calc css

Hướng dẫn cách sử dụng hàm Calc CSS

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 

Thẻ:

Nhà đăng ký chăm sóc khách hàng tên miền ".VN" xuất sắc nhất năm 2021

MÁCH BẠN LỘ TRÌNH XÂY DỰNG MỘT WEBSITE HOÀN CHỈNH

REVIEW KHÁCH HÀNG

  • Michitran

  • Minh Tuan Pham

  • Shawn

  • Shawn

  • Lê Văn Thiện

Website cùng thuộc GMO-Z.com RUNSYSTEM

  • companion1
  • companion2
  • companion3
  • companion4
Hỗ trợ trực tuyến
TENTEN.VN CÓ THỂ HỖ TRỢ GÌ CHO BẠN?