Hàm calc() là một hàm CSS tích hợp sẵn để thực hiện các phép tính động. Nó giúp xác định giá trị thuộc tính CSS một cách linh hoạt hơn. Hàm này cho phép kết hợp các đơn vị khác nhau như phần trăm và pixel. Bạn có thể dùng các phép toán số học cơ bản như cộng trừ nhân chia. Bài viết này khám phá cú pháp, cách dùng và lợi ích của hàm calc(). Chúng tôi sẽ trình bày các ứng dụng thực tế qua các ví dụ minh họa. Điều này giúp bạn tăng tính linh hoạt và hiệu quả thiết kế web.
Syntax:
calc( Expression )
Parameters: Hàm này chấp nhận một tham số duy nhất bắt buộc là Expression. Tham số này chứa các biểu thức toán học cần được thực hiện. Các toán tử được sử dụng bởi tham số này là: +, -, *, /.
Example: Chương trình dưới đây minh họa hàm calc() trong CSS:
html<!DOCTYPE html>
<html>
<head>
<title>calc function</title>
<style>
.geeks {
position: absolute;
left: 50px;
width: calc(100% - 20%);
height: calc(500px - 300px);
background-color: green;
padding-top: 30px;
text-align: center;
}
.gfg {
font-size: 40px;
font-weight: bold;
color: white
}
h1 {
color: white;
}
</style>
</head>
<body>
<div class="geeks">
<div class="gfg">GeeksforGeeks</div>
<h1>The calc() Function</h1>
</div>
</body>
</html>
Output:
Understanding the working of the calc() function in CSS:
- Hàm
calc()trong CSS thực hiện các phép tính dựa trên giá trị của phần tử cha. Nó cũng có thể dựa trên các giá trị do người dùng cung cấp trong quá trình tính toán.
Hãy cùng tìm hiểu sâu hơn về cách hoạt động thông qua một số ví dụ:
Example 1: Ví dụ này cho thấy cách hàm calc() hoạt động trong CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=">
<title>Calc Function</title>
<style>
.parent{
background-color: skyblue;
}
.heading {
left: 30px;
width: calc(50% - 100px);
height: 100px;
background-color: #579dcf;
padding-top: 20px;
text-align: center;
}
h2 {
color: #e9e8e9;
}
</style>
</head>
<body>
<br>
<div class="parent">
<div class="heading">
<h2>
Welcome to GEEKSFORGEEKS.
</h2>
</div>
</div>
</body>
</html>
Trong ví dụ code trên, hàm calc() được sử dụng để gán giá trị chiều rộng cho phần heading. Ở đây, chúng ta dùng giá trị của phần tử cha, mặc định là 100% chiều rộng màn hình. calc(50% - 100px) có nghĩa là chiều rộng của heading bằng "50% chiều rộng cha - 100px". Vì vậy, ở đây chúng ta dùng hàm calc() với cả giá trị từ phần tử cha và một hằng số.
Here is the output of the code:
Example 2: This example shows the working of the calc() function in CSS.
HTML<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=">
<title>Calc Function</title>
<style>
.parent{
background-color: skyblue;
width: calc(80% - 2em);
}
.heading {
left: 30px;
width: calc(50% - 100px);
height: 100px;
background-color: #579dcf;
padding-top: 20px;
text-align: center;
}
h2 {
color: #e9e8e9;
}
</style>
</head>
<body>
<br>
<div class="parent">
<div class="heading">
<h2>
Welcome to GEEKSFORGEEKS.
</h2>
</div>
</div>
</body>
</html>
Trong ví dụ code trên, chúng ta đã sử dụng hàm calc() hai lần. Đầu tiên, chúng ta dùng hàm calc() để định nghĩa giá trị cho phần tử div cha. Sau đó, dùng giá trị của phần tử div cha và hàm calc() để định nghĩa giá trị cho phần tử div heading. Như vậy, rõ ràng hàm calc() ở phần tử cha có thể truy cập giá trị từ hàm calc() của phần tử con.
Here is the output of the code:
Hàm calc() trong CSS cung cấp một cách linh hoạt để thực hiện các phép tính động. Bạn có thể thực hiện trực tiếp trong các stylesheet của mình. Bằng cách tận dụng hàm này, bạn có thể tạo bố cục đáp ứng và thích ứng hơn. Bạn có thể kết hợp liền mạch các đơn vị và giá trị khác nhau. Hiểu và sử dụng hàm calc() có thể cải thiện đáng kể hiệu quả CSS của bạn. Nó cũng giúp bảo trì CSS dễ dàng hơn, dẫn đến thiết kế web tinh tế và dễ điều chỉnh hơn.
Supported Browser:
- Google Chrome
- Edge
- Firefox
- Opera
- Safari