Hàm toán học CSS
Các hàm toán học CSS cho phép sử dụng các biểu thức toán học làm giá trị thuộc tính. Ở đây, chúng tôi sẽ giải thích các hàm calc()
, max()
và min()
.
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ụ:
Ví 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ãy tự mình thử »Hàm max()
Hàm max()
sử dụng giá trị lớn nhất, từ danh sách các 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ụ:
Ví dụ
Sử dụng max() để đặt chiều rộng của #div1 thành bất kỳ giá trị nào lớn nhất, 50% hoặc 300px:
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
Hãy tự mình thử » Hàm min()
Hàm min()
sử dụng giá trị nhỏ nhất, từ danh sách các 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ụ:
Ví dụ
Sử dụng min() để đặt chiều rộng của #div1 thành bất kỳ giá trị nào nhỏ nhất, 50% hoặc 300px:
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
Hãy tự mình thử »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 |