Hướng dẫn hàm trong css
Đôi lờiChào các bạn. Mình là Minh, hiện tại đang làm Front End Developer tại công ty Framgia. Đối với một Front End Dev như mình, dựng layout cho websites là công việc hàng ngày, và đảm bảo các websites này tương thích với các trình duyệt cũng như responsive là yêu cầu bắt buộc. Sau đây mình sẽ nói về một bài toán khá là cơ bản khi dựng layout. Bài toánYêu cầu: Dàn layout 2 cột HTML
Với yêu cầu bài toán như vậy, ta có thể có một vài cách để CSS như sau: Cách 1
Demo Cách 1 Cách 1 này code viết rõ ràng mạch lạc đấy
nhưng độ rộng đang tính theo đơn vị Cách 2
Demo Cách 2 Sau khi xem demo Cách 2 , chúng ta thấy cách này làm đúng như yêu cầu bài toán, có điều mình thấy code chưa thật tốt, set cho thằng Có một
giải pháp mà giải quyết được cả 2 vấn đề ở Cách 1 và Cách 2. Đó là dùng hàm Calc() là gì?Chào các bạn. Hôm nay mình sẽ giới thiệu tới các bạn hàm Cú phápĐây là một ví dụ như kết hợp giữa hai đơn vị
Hoặc với
Trình duyệt hỗ trợHàm Cách dùngChúng ta có thể sử dụng hàm 1: Set giá trị cho các elements.Như ví dụ trên khi mình muốn set
2: Tạo khoảng cách cho các elements.Yêu cầu: Tạo 1 row có 2 columns với độ rộng là 50% và cách nhau 30px, giả sử 2 columns đó có class là HTML
CSS
3: Code dễ hiểu hơn và chính xác hơn.Yêu cầu: Tạo 1 row có 6 columns với độ rộng bằng nhau, giả sử 6 columns đó có class là
Nhìn vào đoạn code trên ta thấy khá là khó hiểu, hơn nữa
Đáp án bài toánSau khi cùng tìm hiểu về hàm
Demo Cách 3 Kết luậnTrên đây là một số hiểu biết của mình về hàm |