CSS calc() là một hàm tính toán trong CSS, cho phép bạn tính toán các giá trị động và sử dụng chúng để điều chỉnh kích thước, vị trí, padding, margin và các thuộc tính khác của phần tử trên trang web
Mục lục
Bạn có thể tạo container
Thông thường, có vài cách để bạn tạo container (wrapper), điển hình như
.container-fluid {
max-width: 1000px;
padding-right: 12px;
padding-left: 12px;
}Tất nhiên, tùy trường hợp, bạn có thể cần padding 2 bên. Cho nên, code trên có thể rút gọn bằng cách như sau
.wrapper {
max-width: 1000px;
width: calc(100vw - 24px);
margin: 0 auto;
}Trong CSS này, 1000px trong max-width có thể thay bằng width bạn mong muốn. Giả sử bạn muốn padding 2 bên của wrapper là 12px, vậy 12×2=24px. Wrapper sẽ có chiều rộng trừ đi 24px. Vậy là wrapper của bạn luôn có 2 padding, mỗi bên 12px. Bạn chỉ cần căng giữa nữa là xong.
Tạo hero image
Hero image là những dạng layout tương tự như thế này
Bình thường hero image sẽ chiếm vị trí ở đầu và full width. Vậy nếu image của bạn nằm trong một container và bạn lại muốn nó full width. Đây là sẽ là cách
.img-hero {
display: block;
width: 100vw;
margin: 0 calc(-50vw + 50%);
height: 30vw;
object-fit: cover;
}Trong đó, 2 CSS properties này được dùng để làm cho hero image của bạn được đẹp hơn, ảnh không bị méo mó
height: 30vw;
object-fit: cover;Giải thích
Một chút giải thích về dòng CSS này
margin: 0 calc(-50vw + 50%);Ban đầu, mình sẽ có
margin: 0 50%;Như vậy, margin-right và margin-left sẽ có giá trị là 50%, img sẽ bị sát về phía phải của trình duyệt
Khi đó, với CSS
margin: 0 calc(-50vw + 50%);-50vw sẽ có nhiệm vụ kéo img của bạn về phía trái trình duyệt. Do đó, img của bạn sẽ được trải đều full chiều rộng trình duyệt.
Những kiến thức trên mình được học từ clip trên Youtube này. Các bạn có thể tham khảo thêm
FAQ về CSS calc()
CSS calc() được sử dụng để làm gì?
CSS calc() được sử dụng để tính toán các giá trị động và điều chỉnh các thuộc tính CSS của phần tử trên trang web.
Các phép toán nào được hỗ trợ bởi CSS calc()?
CSS calc() hỗ trợ các phép toán cộng (+), trừ (-), nhân (*) và chia (/).
Làm thế nào để sử dụng CSS calc() trong CSS?
Để sử dụng CSS calc() trong CSS, bạn chỉ cần sử dụng cú pháp sau:
property: calc(expression);
Trong đó, “property” là thuộc tính CSS mà bạn muốn điều chỉnh, và “expression” là biểu thức toán học được tính toán bởi CSS calc().
CSS calc() hoạt động như thế nào?
CSS calc() hoạt động bằng cách tính toán giá trị của biểu thức toán học được cung cấp bởi bạn và sử dụng nó để điều chỉnh các thuộc tính CSS của phần tử trên trang web.
CSS calc() có hỗ trợ đơn vị đo không?
Có, CSS calc() hỗ trợ tất cả các đơn vị đo CSS, bao gồm cả đơn vị đo tuyệt đối (px, em, rem) và đơn vị đo tương đối (%).
CSS calc() có thể được sử dụng để tính toán các giá trị của các thuộc tính khác nhau không?
Có, CSS calc() có thể được sử dụng để tính toán các giá trị của các thuộc tính khác nhau, bao gồm cả độ rộng, chiều cao, độ dài và khoảng cách.
CSS calc() có được hỗ trợ trên tất cả các trình duyệt không?
CSS calc() được hỗ trợ trên hầu hết các trình duyệt hiện đại, bao gồm Chrome, Firefox, Safari, Opera và Microsoft Edge. Tuy nhiên, các trình duyệt cũ hơn có thể không hỗ trợ hoặc hỗ trợ không đầy đủ tính năng của CSS calc().