Các hàm toán học CSS
Các hàm toán học CSS cho phép các biểu thức toán học được sử dụng làm giá trị thuộc tính. Ở đây, chúng tôi sẽ giải thích về calc(),
max()và min()các chức năng.
Hàm calc ()
Hàm calc()thực hiện một phép tính được sử dụng làm giá trị thuộc tính.
Cú pháp CSS
calc(expression)
| Value | Description |
|---|---|
| expression | Required. A mathematical expression. The result will be used as the value. The following operators can be used: + - * / |
Chúng ta hãy xem xét một ví dụ:
Thí dụ
Sử dụng calc () để tính chiều rộng của phần tử <div>:
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
Hàm max ()
Hàm max()sử dụng giá trị lớn nhất, từ danh sách giá trị được phân tách bằng dấu phẩy, làm giá trị thuộc tính.
Cú pháp CSS
max(value1, value2, ...)
| Value | Description |
|---|---|
| value1, value2, ... | Required. A list of comma-separated values - where the largest value is chosen |
Chúng ta hãy xem xét một ví dụ:
Thí dụ
Sử dụng max () để đặt chiều rộng của # div1 thành giá trị nào lớn nhất, 50% hoặc 300px:
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
Hàm min ()
Hàm min()sử dụng giá trị nhỏ nhất, từ danh sách giá trị được phân tách bằng dấu phẩy, làm giá trị thuộc tính.
Cú pháp CSS
min(value1, value2, ...)
| Value | Description |
|---|---|
| value1, value2, ... | Required. A list of comma-separated values - where the smallest value is chosen |
Chúng ta hãy xem xét một ví dụ:
Thí dụ
Sử dụng min () để đặt chiều rộng của # div1 thành giá trị nào nhỏ nhất, 50% hoặc 300px:
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
Tất cả các hàm toán học CSS
| Function | Description |
|---|---|
| calc() | Allows you to perform calculations to determine CSS property values |
| max() | Uses the largest value, from a comma-separated list of values, as the property value |
| min() | Uses the smallest value, from a comma-separated list of values, as the property value |