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. Mỗi hàm toán học này có thể được sử dụng theo những cách không mong muốn, chẳng hạn như trong các hàm màu và độ dốc, nhưng cũng có thể kết hợp với các thuộc tính CSS tùy chỉnh. Có thể thực hiện các phép tính toán động để đặt giá trị thuộc tính bằng cách sử dụng hàm calc(), giúp đơn giản hóa thao tác của chúng Show Để thực hiện các yếu tố tiếp thu, các hàm min() và max() là giải pháp rất tốt để thiết lập thiết kế cụ thể mà bạn muốn triển khai trong ứng dụng của mình Đọc. Thư viện và Công cụ HTML, CSS và JavaScript Các hàm toán học CSS là gì?Trong hướng dẫn phát triển web CSS này, chúng tôi sẽ giải thích các hàm toán học min()<, max(), calc() và clamp(). Chúng ta sẽ khám phá các trường hợp sử dụng thực tế và tìm hiểu cú pháp của từng chức năng. Hãy bắt đầu bằng cách giải thích riêng từng hàm toán học và sử dụng chúng trong các ví dụ cụ thể Hàm calc() trong CSScú pháp CSS. calc(biểu thức) Hàm calc() thực hiện các phép tính toán học để xác định giá trị cho các thuộc tính. Bạn có thể thực hiện cộng, trừ, nhân và chia trong các giá trị thuộc tính CSS. Chức năng này rất hữu ích để phát triển các trang web và ứng dụng đáp ứng Dưới đây là một ví dụ mã cho thấy cách sử dụng hàm calc() trong CSS <!DOCTYPE html> <html> <head> <style> #demo { background-color: #4040a1; position: absolute; height: 100px; left: 50px; width: calc(100% - 100px); padding: 5px; display: flex; justify-content: center; font-size: 21px; color: white; align-items: center; } </style> </head> <body> <h1>The calc() Function</h1> <p>I created a div that extends on the window with a space of 100px between both sides of the div and the edge of the window. Please resize the browser window to see the effect.</p> <div id="demo">The calc() Function</div> <p></p> </body> </html> Mã này dẫn đến đầu ra sau  Một ví dụ khác cho việc sử dụng hàm calc() để tạo bảng màu bằng HSL, xuất phát từ màu sắc, độ bão hòa và độ sáng Chúng tôi đã tính toán các giá trị bổ sung để xây dựng các sắc thái khác nhau. Đây là ví dụ mã <!DOCTYPE html> <html> <head> <style> .colors { display: flex; position: absolute; list-style-type: none; height: 100px; left: 30px; padding: 5px; font-size: 21px; font-family: arial; color: white; align-items: center; --base-hue: 120; --saturation: 85%; --lightness: 70%; --rotation: 40; } .color-base { padding: 14px; height: 85px; background-color: hsl(var(--hue), var(--saturation), var(--lightness)); } .colorOne { --hue: calc(var(--base-hue)); } .colorTwo { --hue: calc(var(--base-hue) + var(--rotation) * 2); } .colorThree { --hue: calc(var(--base-hue) + var(--rotation) * 3); } </style> </head> <body> <h1>The calc() Function</h1> <p>We used the calc () function to calculate values complementary to the initial colors to build different shades</p> <div> <ul class="colors"> <li class="color-base colorOne">Color One</li> <li class="color-base colorTwo">Color Two</li> <li class="color-base colorThree">Color Three</li> </ul> </div> </body> </html> Đây là đầu ra dự kiến của việc chạy mã này Đọc. CSS Sprite. Cách tạo họa tiết hình ảnh Hàm clamp() trong CSScú pháp CSS. kẹp (giá trị1, giá trị2, giá trị3) Hàm clamp() hạn chế một giá trị nhất định giữa giới hạn trên và giới hạn dưới, dựa trên giá trị lý tưởng đã thiết lập. Nó chấp nhận ba giá trị và thứ tự quan trọng vì giá trị đầu tiên là nhỏ nhất trong phạm vi đã cho, giá trị ở giữa là giá trị lý tưởng và giá trị thứ ba là giá trị cao nhất trong phạm vi đã cho. Mục đích của chức năng này là để ngăn các tiêu đề trang lớn chiếm quá nhiều không gian trong chế độ xem. Đây là một ví dụ về cách sử dụng hàm clamp() trong CSS <!DOCTYPE html> <html> <head> <style> .demo { font-family: arial; font-size: clamp(15px, 2.5vw, 17px); padding: 5px; } </style> </head> <body> <h1>The clamp() Function</h1> <p>We used the clamp () function for setting a font size that increases with the size of the viewport</p> <p class="demo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed arcu velit, eleifend at ultricies eu, suscipit et mauris. Vivamus et diam vel tellus auctor rutrum. Fusce ornare semper justo vitae dictum. Vivamus semper porta ligula sit amet viverra. Morbi placerat massa felis, quis pellentesque ante faucibus in. Morbi iaculis odio elit. </p> </body> </html> Trong ví dụ này, chúng tôi đặt kích thước phông chữ tăng theo kích thước của chế độ xem nhưng không co lại dưới kích thước phông chữ tối thiểu hoặc trên kích thước phông chữ tối đa Hàm min() trong CSScú pháp CSS. min(giá trị1, giá trị 2,…) Hàm min() cho phép các nhà phát triển web xác định một số giá trị cho thuộc tính CSS và sẽ chọn giá trị nhỏ nhất từ các giá trị đã cho. Các giá trị bên trong hàm phải được phân tách bằng dấu phẩy. Dưới đây là một ví dụ về cách sử dụng hàm CSS min() <!DOCTYPE html> <html> <head> <style> #demo { background-color: #6b5b95; height: 100px; width: min(50%, 270px); padding: 10px; display: flex; justify-content: center; font-size: 21px; color: white; align-items: center; } </style> </head> <body> <h1>The min() Function</h1> <p> Use min() to set the width of #demo to whichever value is smallest, <br /> 50% or 270px: </p> <div id="demo">The min() Function</div> <p>Please resize the browser window to see the effect.</p> </body> </html> Nếu bạn cố thay đổi kích thước cửa sổ trình duyệt, nó sẽ kiểm tra kích thước màn hình và chọn giá trị tối thiểu từ các giá trị đã cho. Điều này sẽ đặt giá trị làm chiều rộng cho mục Đọc. Tạo kiểu văn bản với CSS Hàm max() trong CSScú pháp CSS. max(giá trị 1, giá trị 2,…) Hàm max() cho phép lập trình viên web xác định một số giá trị cho thuộc tính CSS và sẽ chọn giá trị lớn nhất từ các giá trị đã cho. Các giá trị bên trong hàm phải được phân tách bằng dấu phẩy. Dưới đây là một ví dụ về cách sử dụng hàm CSS max() <!DOCTYPE html> <html> <head> <style> #demo { background-color: #92a8d1; height: 100px; width: min(50%, 270px); padding: 10px; display: flex; justify-content: center; font-size: 21px; color: white; align-items: center; } </style> </head> <body> <h1>The max() Function</h1> <p> Use max() to set the width of #demo to whichever value is largest, <br /> 50% or 270px: </p> <div id="demo">The min() Function</div> <p>Please resize the browser window to see the effect.</p> </body> </html> Nếu bạn cố thay đổi kích thước cửa sổ trình duyệt, nó sẽ kiểm tra kích thước màn hình và chọn giá trị tối đa từ các giá trị đã cho. Điều này sẽ đặt giá trị làm chiều rộng cho mục Tóm tắt các hàm toán học CSSCác hàm toán học CSS (min(), max(), calc() và clamp()) rất hữu ích, mạnh mẽ và dễ sử dụng trong các trang web và ứng dụng web của bạn. Bây giờ bạn đã được giới thiệu về các hàm toán học CSS này trong các ví dụ thực tế, tất cả những gì bạn phải làm là sử dụng chúng để xây dựng giao diện người dùng (UI) đáp ứng Sử dụng Calc trong CSS có ổn không?Hàm calc() cho phép bạn thực hiện tính toán khi chỉ định giá trị thuộc tính CSS . Nó đặc biệt hữu ích để tính toán độ dài, tỷ lệ phần trăm, thời gian, số, số nguyên, tần số và góc, trong số những thứ khác. Một trong những siêu năng lực của hàm CSS calc() là khả năng kết hợp các đơn vị khác nhau.
Có toán học trong CSS không?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().
Làm cách nào để tính calc trong CSS?CSS calc()
. Nó sử dụng bốn toán tử số học đơn giản cộng (+), nhân (*), trừ (-) và chia (/) . Đây là một khái niệm CSS mạnh mẽ vì nó cho phép chúng tôi kết hợp bất kỳ đơn vị nào, chẳng hạn như tỷ lệ phần trăm và pixel.
Làm cách nào để đặt chiều cao bằng calc trong CSS?Số không có đơn vị cũng được chấp nhận. Ví dụ: chiều cao dòng. calc(1. 2*1. 2); . xoay(calc(10deg * 5));. . |
