Hôm nay mọi người lại tiếp tục học về CSS, bài học hôm nay là thiết kế bố cục trang web với CSS. Những kiến thức mà mình đã góp nhặt được hôm nay bao gồm: box model, layout, responsive web design và grid view. Tựu chung thì những kiến thức này là những thứ cơ bản cần biết để mình có thể tạo ra layout cho trang web tiến đến việc thiết kế giao diện của một website.

Trước tiên, box model hay còn gọi là mô hình hộp là gì? Tất cả các phần tử html có thể được xem như các hộp. Hộp này là thứ bao bọc bên ngoài các phần tử và có các thành phần như: margin, border, padding và content. Vậy công dụng của nó là gì? Tại sao chúng ta cần quan tâm đến nó? Box model là thứ giúp chúng ta định hình các khối, các layout và phần tử được hiển thị trên giao diện. Nó giúp chúng ta phác thảo và xác định các thành phần của trang web dễ dàng hơn để có thể dễ dàng triển khai ý tưởng và thiết kế của mình. Nói đơn giản, nó là như là bước xác định và vẽ khối trước khi vẽ trong môn hội họa vậy.

Responsive web design- thiết kế thích ứng, là kĩ thuật được sử dụng để trang web có thể hiển thị tốt hơn trên các loại thiết bị khác nhau. Vào thời điểm mà xã hội chúng ta bùng nổ một thứ đồ công nghệ gọi là smartphone, nhu cầu cấp thiết cho việc xây dựng giao diện trên thứ công cụ nhỏ gọn và tiện lợi này trở nên cần thiết hơn bao giờ hết. Và việc phải thiết kế nhiều bản thiết kế để hiển thị trên từng loại thiết bị là một cái gì đó quá tốn công sức và phiền phức, thì RWD ra đời. Một trang web được sử dụng RWD sẽ đem lại trải nghiệm tốt hơn cho người dùng khi nội dung hay giao diện của trang web ấy sẽ được thay đổi kích thước, ẩn hoặc thêm một vài yếu tố để có thể hiển thị tốt và đáp ứng thói quen sử dụng của người dùng. Nó hoàn toàn tiện lợi và mang lại hiệu ứng tích cực cho cả người dùng và người thiết kế và tạo nên trang web.

Gridview là thứ mà ai cũng phải biết khi sử dụng RWD. Đơn giản, gridview là việc phân bố nội dung và bố cục của trang web theo dạng lưới, có nghĩa là trang web đấy được chia thành nhiều cột. Việc sử dụng gridview sẽ giúp chúng ta dễ dàng phân bố nội dung lên trang web, cũng như tạo nên việc thích ứng giao diện lên các màn hình trên các thiết bị khác nhau hiệu quả và thân thiện với người dùng hơn. Với việc phân chia trang web thành 12 cột bằng nhau, các cột sẽ được thu phóng theo cửa sổ trình duyệt. Nó là thứ quan trọng giúp tạo nên RWD.