Câu hỏi phỏng vấn CSS
Câu hỏi

Calc trong CSS dùng để làm gì?

Câu trả lời

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.

Cách Hoạt Động

  • Biểu thức: Bạn có thể kết hợp các toán hạng trong biểu thức sử dụng các toán tử như +, -, *, /. 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.
  • Kết hợp đơn vị: Một trong những tính năng mạnh mẽ của 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.

Ứng Dụng

  • Điều chỉnh kích thước: 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.
  • Tạo bố cục đáp ứng: Sử dụng calc() kết hợp với đơn vị viewport như vhvw để 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.

Lưu Ý

  • Tính tương thích trình duyệt: 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.
  • Sử dụng với các thuộc tính khác nhau: 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():

css Copy
/* Đ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

middle

Gợi ý câu hỏi phỏng vấn

middle

Sự khác biệt giữa CSS gridflexbox trong CSS là gì?

middle

rule set trong CSS là gì?

junior

Sự khác biệt giữa inline, blockinline-block trong CSS là gì?

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào