Calc
trong CSS dùng để làm gì?
Calc
trong CSS dùng để làm gì?
Trong CSS, hàm calc()
cho phép bạn thực hiện các phép tính khi xác định giá trị cho các thuộc tính CSS. Hàm này có thể được sử dụng với các giá trị như <length>
, <frequency>
, <angle>
, <time>
, <percentage>
, <number>
, hoặc <integer>
. Hàm calc()
nhận một biểu thức duy nhất làm tham số, và kết quả của biểu thức này sẽ được sử dụng làm giá trị cho một thuộc tính CSS.
+
, -
, *
, /
. Khi biểu thức chứa nhiều toán hạng, calc()
sẽ áp dụng các quy tắc ưu tiên toán tử tiêu chuẩn.calc()
là khả năng kết hợp các đơn vị đo lường khác nhau trong cùng một biểu thức, ví dụ như kết hợp phần trăm và pixel.calc()
thường được sử dụng để điều chỉnh kích thước của các phần tử dựa trên các giá trị động, như trừ đi một khoảng cách cố định từ 100% chiều rộng của phần tử cha.calc()
kết hợp với đơn vị viewport như vh
và vw
để tạo ra các bố cục đáp ứng, điều chỉnh kích thước phần tử dựa trên kích thước của viewport.calc()
được hỗ trợ rộng rãi bởi các trình duyệt hiện đại. Tuy nhiên, các trình duyệt cũ hơn như IE8 và bên dưới không hỗ trợ hàm này.calc()
có thể được sử dụng với nhiều thuộc tính CSS khác nhau, bao gồm width
, height
, margin
, padding
, font-size
, và nhiều hơn nữa.Ví dụ về sử dụng calc()
:
/* Điều chỉnh chiều rộng của một phần tử, trừ đi 80px */
.element {
width: calc(100% - 80px);
}
/* Điều chỉnh kích thước font dựa trên viewport và một giá trị cố định */
.text {
font-size: calc(1rem + 2vw);
}
Như vậy, calc()
là một công cụ linh hoạt và mạnh mẽ trong CSS, giúp tạo ra các bố cục và kiểu dáng đáp ứng và tinh tế mà không cần phải viết mã CSS cứng nhắc và phức tạp
middle
Gợi ý câu hỏi phỏng vấn
Chưa có bình luận nào