Hướng dẫn Cách tính toán kích thước trong CSS bằng hàm calc()

[PVS]

Cách tính toán kích thước trong CSS bằng hàm calc()

Đây là một hàm đặc biệt hỗ trợ trong CSS3 được sử dụng để tính toán kích thước chiều dài, chiều rộng, góc, thời gian... Trong thiết kế giao diện responsive đơn vị theo phần trăm là cách thức bạn sẽ sử dụng tuy nhiên bạn sẽ phải tính toán để trừ đi các kích thước margin, padding, border. Giả sử giao diện của bạn có 2 cột, mỗi cột bạn sẽ đặt chiều rộng là 50%, vấn đề bây giờ là bạn muốn chiều rộng 50% đó bao gồm cả giá trị margin và padding thì sao, giả sử 2 cột đó bạn sẽ đặt thuộc tính float và muốn chúng cách nhau 20px vấn đề này chắc bạn phải cần đến javaScript tính toán rồi gán giá trị cho 2 phần tử tương đương với 2 cột theo ý của bạn, lúc này bạn sẽ thấy hàm calc() vô cùng hữu ích, bạn chỉ cần áp dụng như ví dụ sau:

#div1, #divt2 {
  float: left;
  width: calc(50% - 10px);
}
#div2 {
  margin-left: 20px;
}

Với cách làm trên bạn sẽ luôn có được sự đảm bảo rằng giao diện responsive của bạn có thể co giản một cách thoải mái và sẽ vẫn dữ nguyên tỷ lệ kích thước mà bạn đặt. Bây giờ nếu bạn muốn thêm 10px padding nữa và 1px border nữa thì cũng vô cùng đơn giản, ví dụ:

#div1, #div2 {
  float: left;
  width: calc(50% - 10px - 20px - 2px);
  padding: 10px;
  border: 1px solid #003366;
}
#div2 {
  margin-left: 20px;
}

Tính năng nay hiện chỉ hỗ trợ ở các trình duyệt hiện đại, với Internet Explorer từ phiên bản 9 trở lên, Firefox và Chrome thì phải sử dụng thêm tiền tố prefix riêng -moz-, -webkit-. Xem chi tiết trình duyệt và phiên bản hỗ trợ tại caniuse.com.

Chúc các bạn thành công.

Nguồn: sothichweb.com​