6.1 Các tính năng chính của hàm calc()
Hàm calc() cung cấp khả năng thực hiện các phép toán trong CSS, cho phép tạo ra các kiểu dáng linh hoạt và thích ứng hơn. Hàm này đặc biệt hữu ích để kết hợp các đơn vị đo lường khác nhau và tính toán động các giá trị như kích thước, khoảng cách, viền và các thuộc tính khác.
Hàm calc() cho phép thực hiện bốn phép toán cơ bản: cộng, trừ, nhân và chia. Những phép toán này có thể được sử dụng để kết hợp các đơn vị đo lường khác nhau (pixel, phần trăm, em, rem vv.), giúp đơn giản hóa việc tạo các kiểu dáng thích ứng và động.
Cú pháp:
selector {
property: calc(expression);
}
Ví dụ các phép toán
- Cộng:
calc(100% + 20px) - Trừ:
calc(50% - 10px) - Nhân:
calc(10px * 2) - Chia:
calc(100px / 2)
Ví dụ:
<div>
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
div {
width: calc(100% - 50px);
margin: calc(1em + 10px);
background: lightblue;
}
Trong ví dụ này:
- Chiều rộng phần tử được tính bằng
100%trừ50px - Khoảng cách được tính là tổng của
1emvà10px
6.2 Ví dụ sử dụng hàm calc()
1. Cộng và trừ
Hàm calc() thường được sử dụng để cộng và trừ các giá trị, cho phép kiểm soát chính xác hơn kích thước và khoảng cách của các phần tử.
Ví dụ 1: Cộng phần trăm và pixel
Trong ví dụ này, chiều rộng của container được tính bằng 100% chiều rộng của phần tử cha trừ đi 40 pixel. Điều này cho phép tính toán khoảng cách và các phần tử khác bên trong container:
<div class="container">
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
.container {
width: calc(100% - 40px);
margin: 20px;
background: lightgreen;
}
Ví dụ 2: Trừ giá trị cố định
Trong ví dụ này, chiều rộng của sidebar được tính bằng 100% chiều rộng của phần tử cha trừ đi 250 pixel, để lại không gian cho nội dung chính:
<div class="sidebar">
<ul>
<li><a href="#"></a>Article 1</li>
<li><a href="#"></a>Article 2</li>
<li><a href="#"></a>Article 3</li>
</ul>
</div>
.sidebar {
width: calc(100% - 250px);
background: tomato;
}
2. Nhân và chia
Hàm calc() cũng cho phép thực hiện phép nhân và chia, có thể hữu ích để tạo ra kích thước và khoảng cách tỷ lệ.
Ví dụ 3: Nhân
Trong ví dụ này, chiều cao của phần tử được tính bằng 20 pixel nhân với 3, cho ra 60 pixel:
<div class="element">Element</div>
.element {
height: calc(20px * 3);
background: lightpink;
}
Ví dụ 4: Chia
Trong ví dụ này, chiều rộng của khối được tính là một phần ba chiều rộng của phần tử cha, tạo ra ba cột bằng nhau:
<div class="box">
Box
</div>
.box {
width: calc(100% / 3);
background: yellow;
}
6.3 Kết hợp các đơn vị đo lường khác nhau
Một trong những khả năng chính của hàm calc() là kết hợp các đơn vị đo lường khác nhau, cho phép tạo ra các kiểu dáng linh hoạt và thích ứng.
Ví dụ 5: Kết hợp phần trăm và pixel
Trong ví dụ này, chiều cao của tiêu đề được tính bằng 100% chiều cao của cửa sổ xem (viewport height) trừ đi 50 pixel, cho phép tính toán khoảng cách cố định.
<header class="header">
<nav>
<ul>
<li>Trang chủ</li>
<li>Về chúng tôi</li>
<li>Liên hệ</li>
</ul>
</nav>
</header>
.header {
height: calc(100vh - 100px);
background: lightgreen;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-around;
padding: 10px;
}
Tính toán kích thước động
Hàm calc() hữu ích trong việc tạo ra các kích thước động được tính toán, làm cho thiết kế trở nên linh hoạt và thích ứng hơn.
Ví dụ 6: Tính toán chiều rộng động
Trong ví dụ này, chiều rộng của nội dung được tính bằng 100% chiều rộng của phần tử cha trừ đi hai lần khoảng cách 20 pixel mỗi bên:
<div class="content">
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
.content {
width: calc(100% - 2 * 20px);
background: lightgreen;
}
6.4 Sử dụng calc() trong media queries
Hàm calc() có thể được sử dụng bên trong media queries để tạo ra các kiểu dáng thích ứng.
Ví dụ 7: Khoảng cách thích ứng trong media queries
Trong ví dụ này, khoảng cách của container tăng lên với độ rộng của cửa sổ khi đạt độ rộng tối thiểu 600 pixel:
<div class="container">
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
.container {
padding: 10px;
background: tomato;
}
@media (min-width: 600px) {
.container {
padding: calc(10px + 2vw);
}
}
Ví dụ 8: Kích thước thích ứng trong media queries
Trong ví dụ này, khoảng cách của container giảm đi một nửa trên màn hình có độ rộng đến 600 pixel, cải thiện sự thích ứng của thiết kế:
<div class="container">
Lorem ipsum odor amet, consectetuer adipiscing elit. Montes malesuada pharetra mi suscipit suspendisse ornare.
Fringilla feugiat cursus finibus commodo, faucibus himenaeos.
</div>
:root {
--main-padding: 20px;
}
.container {
padding: var(--main-padding);
background: yellow;
}
@media (max-width: 600px) {
.container {
padding: calc(var(--main-padding) / 2);
}
}
6.5 Ưu điểm và hạn chế
Ưu điểm của việc sử dụng hàm calc():
1. Linh hoạt. Hàm calc() cho phép tạo ra những thiết kế linh hoạt và thích ứng hơn, kết hợp nhiều đơn vị đo lường và thực hiện các phép toán.
2. Quản lý phong cách động. Với calc(), bạn có thể thay đổi kích thước và khoảng cách của phần tử một cách động, làm cho thiết kế đáp ứng và thích ứng hơn.
3. Đơn giản hóa các phép toán phức tạp. Hàm calc() đơn giản hóa việc thực hiện các phép toán phức tạp trực tiếp trong CSS, tránh việc cần phải sử dụng JavaScript cho các phép toán cơ bản.
Hạn chế và đặc điểm của hàm calc():
1. Khoảng trắng quanh các toán tử. Trong các biểu thức calc() yêu cầu phải có khoảng trắng quanh các toán tử.
Ví dụ, calc(100% - 50px) đúng, còn calc(100%-50px) sẽ dẫn đến lỗi.
2. Tương thích trình duyệt. Hàm calc() được hỗ trợ bởi hầu hết các trình duyệt hiện đại, nhưng
đối với các phiên bản cũ có thể cần kiểm tra tính tương thích.
3. Hiệu suất. Sử dụng hàm calc() có thể tăng thêm chút thời gian render của trang,
đặc biệt khi có các phép toán phức tạp hoặc thay đổi giá trị thường xuyên.
GO TO FULL VERSION