Calc 100 là gì

Sử dụng calc () trong CSS3

Bài đăng này đã không được cập nhật trong 3 năm

Quảng cáo

Xin chào các bạn,

Trong bài viết này, tôi sẽ giới thiệu calc () trong CSS3

I. Giới thiệu về calc ()

Như chúng ta đã biết, từ CSS3, chúng ta có hàm calc () cho phép chúng ta thực hiện các phép toán ngay trong thuộc tính. Thay vì khai báo các giá trị pixel tĩnh cho chiều rộng của phần tử, chúng ta có thể sử dụng calc () để xác định kết quả dựa trên nhiều giá trị số.

Ví dụ.foo {width: calc (100px + 50px); }

II. Tại sao sử dụng calc ()

Nếu bạn sử dụng bộ xử lý chuyên nghiệp CSS như SASS, những gì bạn cần viết như trên sẽ là: .foo {width: 100px + 50px; } // Hoặc sử dụng các biến SASS $ width-one: 100px; $ width-hai: 50px; .bar {width: $ width-one + $ width-hai; }

Tuy nhiên, hàm calc () ở trên sẽ cho chúng ta một giải pháp tốt hơn vì:

  • Đầu tiên, chúng tôi có thể kết hợp nhiều đơn vị để xác định giá trị kích thước của thuộc tính. Đặc biệt chúng ta có thể kết hợp giữa tỷ lệ phần trăm và khung nhìn với các đơn vị tuyệt đối như pixel.

Ví dụ: .foo {width: calc (100% – 50px); }

Trong ví dụ trên, phần tử .foo luôn có chiều rộng 50px nhỏ hơn 100% kích thước của phần tử gốc chứa nó.

  • Lý do thứ hai, sử dụng calc (), giá trị được tính là giá trị của biểu thức của nó. Điều này có nghĩa là khi sử dụng các biểu thức toán học trên, giá trị hiển thị sẽ là biểu thức biểu thức.

Ví dụ: // Giá trị được chỉ định trong SCSS .foo {width: 100px + 50px; } // CSS đã biên dịch và giá trị được tính toán trong trình duyệt .foo {width: 150px; }

Tuy nhiên, nếu calc () được sử dụng, giá trị được trình duyệt phân tích cú pháp sẽ vẫn là biểu thức calc () // Giá trị được chỉ định trong CSS .foo {width: calc (100% – 50px); } // Giá trị được tính trong trình duyệt .foo {width: calc (100% – 50px); }

Điều này có nghĩa là giá trị của nó trên trình duyệt sẽ là động. Sau đó, nếu một phần của khung nhìn (chiều cao hoặc chiều rộng) bị thay đổi, giá trị của nó sẽ bị thay đổi và giá trị tuyệt đối của nó (50px) sẽ bị trừ đi.

III. Khi nào sử dụng calc ()?

Sử dụng calc () khi bạn muốn thực hiện các phép cộng, trừ, nhân và chia với các giá trị thuộc tính số. Đặc biệt bạn có thể sử dụng nó với các kiểu dữ liệu như độ dài, tần số, góc, thời gian, số, số nguyên

Ví dụ: .foo {width: calc (50vmax + 3rem); đệm lót: calc (1vw + 1em); biến đổi: xoay (calc (1turn + 28deg)); nền: hsl (100, calc (3 * 20%), 40%); cỡ chữ: calc (50vw / 3); }

IV. Lồng hàm

calc () có thể được sử dụng trong tổ, tuy nhiên nó được coi là biểu thức tính toán đơn giản

Ví dụ: .foo {width: calc (100% / calc (100px * 2)); }

Giá trị được tính toán của hàm sẽ tương ứng với: .foo {width: calc (100% / (100px * 2)); }

V. Cung cấp Dự phòng

calc () khá phổ biến, vì nó hỗ trợ hầu hết các trình duyệt hiện tại

Calc 100 là gì?

Đối với các trình duyệt không hỗ trợ calc (), các biểu thức sẽ bị bỏ qua. Sau đó, chúng tôi có thể cung cấp các giải pháp dự phòng với static value.foo {width: 90%; / * Dự phòng cho các trình duyệt cũ hơn * / width: calc (100% – 50px); }

TẠI VÌ. Khi nào sử dụng calc ()

calc () hữu ích trong nhiều trường hợp, vì vậy chúng ta có thể kết hợp nó trong các bài toán cụ thể.

Ví dụ sử dụng calc () để xử lý các phần tử căn giữa: // giả sử.foo là chiều cao 300px và chiều rộng 300px .foo {position: Absolute top: 50%; trái: 50%; marging-top: -150px; margin-left: -150px; }

Thay thế bằng calc (). Foo {position: Absolute top: calc (50% – 150px); trái: calc (50% – 150px); }

VII. Phần kết luận

Trên đây là phần giới thiệu về calc () trong CSS3, hy vọng nó sẽ hữu ích cho các bạn.

Cảm ơn vì đã đọc!!!

Sử dụng calc () trong CSS3

Bài đăng này đã không được cập nhật trong 3 năm

Xin chào các bạn,

Trong bài viết này, tôi sẽ giới thiệu calc () trong CSS3

I. Giới thiệu về calc ()

Như chúng ta đã biết, từ CSS3, chúng ta có hàm calc () cho phép chúng ta thực hiện các phép toán ngay trong thuộc tính. Thay vì khai báo các giá trị pixel tĩnh cho chiều rộng của phần tử, chúng ta có thể sử dụng calc () để xác định kết quả dựa trên nhiều giá trị số.

Ví dụ.foo {width: calc (100px + 50px); }

II. Tại sao sử dụng calc ()

Nếu bạn sử dụng bộ xử lý chuyên nghiệp CSS như SASS, những gì bạn cần viết như trên sẽ là: .foo {width: 100px + 50px; } // Hoặc sử dụng các biến SASS $ width-one: 100px; $ width-hai: 50px; .bar {width: $ width-one + $ width-hai; }

Tuy nhiên, hàm calc () ở trên sẽ cho chúng ta một giải pháp tốt hơn vì:

  • Đầu tiên, chúng tôi có thể kết hợp nhiều đơn vị để xác định giá trị kích thước của thuộc tính. Đặc biệt chúng ta có thể kết hợp giữa tỷ lệ phần trăm và khung nhìn với các đơn vị tuyệt đối như pixel.

Ví dụ: .foo {width: calc (100% – 50px); }

Trong ví dụ trên, phần tử .foo luôn có chiều rộng 50px nhỏ hơn 100% kích thước của phần tử gốc chứa nó.

  • Lý do thứ hai, sử dụng calc (), giá trị được tính là giá trị của biểu thức của nó. Điều này có nghĩa là khi sử dụng các biểu thức toán học trên, giá trị hiển thị sẽ là biểu thức biểu thức.

Ví dụ: // Giá trị được chỉ định trong SCSS .foo {width: 100px + 50px; } // CSS đã biên dịch và giá trị được tính toán trong trình duyệt .foo {width: 150px; }

Tuy nhiên, nếu calc () được sử dụng, giá trị được trình duyệt phân tích cú pháp sẽ vẫn là biểu thức calc () // Giá trị được chỉ định trong CSS .foo {width: calc (100% – 50px); } // Giá trị được tính trong trình duyệt .foo {width: calc (100% – 50px); }

Điều này có nghĩa là giá trị của nó trên trình duyệt sẽ là động. Sau đó, nếu một phần của khung nhìn (chiều cao hoặc chiều rộng) bị thay đổi, giá trị của nó sẽ bị thay đổi và giá trị tuyệt đối của nó (50px) sẽ bị trừ đi.

III. Khi nào sử dụng calc ()?

Sử dụng calc () khi bạn muốn thực hiện các phép cộng, trừ, nhân và chia với các giá trị thuộc tính số. Đặc biệt bạn có thể sử dụng nó với các kiểu dữ liệu như độ dài, tần số, góc, thời gian, số, số nguyên

Ví dụ: .foo {width: calc (50vmax + 3rem); đệm lót: calc (1vw + 1em); biến đổi: xoay (calc (1turn + 28deg)); nền: hsl (100, calc (3 * 20%), 40%); cỡ chữ: calc (50vw / 3); }

IV. Lồng hàm

calc () có thể được sử dụng trong tổ, tuy nhiên nó được coi là biểu thức tính toán đơn giản

Ví dụ: .foo {width: calc (100% / calc (100px * 2)); }

Giá trị được tính toán của hàm sẽ tương ứng với: .foo {width: calc (100% / (100px * 2)); }

V. Cung cấp Dự phòng

calc () khá phổ biến, vì nó hỗ trợ hầu hết các trình duyệt hiện tại

Calc 100 là gì?

Đối với các trình duyệt không hỗ trợ calc (), các biểu thức sẽ bị bỏ qua. Sau đó, chúng tôi có thể cung cấp các giải pháp dự phòng với static value.foo {width: 90%; / * Dự phòng cho các trình duyệt cũ hơn * / width: calc (100% – 50px); }

TẠI VÌ. Khi nào sử dụng calc ()

calc () hữu ích trong nhiều trường hợp, vì vậy chúng ta có thể kết hợp nó trong các bài toán cụ thể.

Ví dụ sử dụng calc () để xử lý các phần tử căn giữa: // giả sử.foo là chiều cao 300px và chiều rộng 300px .foo {position: Absolute top: 50%; trái: 50%; marging-top: -150px; margin-left: -150px; }

Thay thế bằng calc (). Foo {position: Absolute top: calc (50% – 150px); trái: calc (50% – 150px); }

VII. Phần kết luận

Trên đây là phần giới thiệu về calc () trong CSS3, hy vọng nó sẽ hữu ích cho các bạn.

Cảm ơn vì đã đọc!!!

Bạn đang xem chuyên mục Hỏi đáp
Thuộc website web giải đáp

Quảng cáo
Hỏi đáp

Leave a Reply

Email của bạn sẽ không được hiển thị công khai.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>