[Bài 3] CSS Layout – Tìm hiểu CSS cùng BIT

Bạn đang ở bài 4 trong 6 bài của serie Học Css cơ bản.

CSS layout để làm gì?

Một website, blog đều cần một có một layout dựa trên một chuẩn thiết kế nhất định (dễ hiểu hơn đó là một CSS framework). Một số CSS framework phổ biến nhất hiện nay là:

Và còn nhiều framework khác nữa. Nhưng để sử dụng được những framework nêu trên bạn cần có một kiến thức nhất định về layout trong CSS và hôm nay mình sẽ giúp bạn thực hiện điều đó.

Bạn đã sẵn sàng chưa? Tuyệt vời chúng ta cùng bắt đầu thôi!

Tìm hiểu khái niệm về division – <div>

Thẻ <div> được sử dụng thường xuyên nhất trong thiết kế web vì nó sẽ cho phép chúng phân chia bố cục, định nghĩa vị trí, kích thước cho một hoặc nhiều thẻ HTML khác nằm phía trong nó. Sau đây mình sẽ demo một layout đơn giản, phổ biến nhất:

VD1

Như bạn đã thấy trong CSS mình có dùng một thuộc tính là position – nó dùng để định nghĩa vị trí cho một đối tượng trong HTML, thông qua nó chúng ta sẽ có thể tạo ra nhiều layer dựa vào thuộc tính z-index tương tự như trong thiết kế Photoshop. Layer có z-index lớn hơn sẽ nằm ở trên những layer có z-index thấp hơn nó, mỗi layer sẽ có những thuộc tính về kích thước, màu sắc, trạng thái khác nhau. Mặc định z-index của một đối tượng sẽ là 0.

VD2

Bạn hãy thử thay đổi giá trị z-index của 2 class div1 và div2 để thấy sự khác biệt. Ngoài position: relative chúng ta còn có một số giá trị khác như:

  • absolute: đối tượng này sẽ luôn luôn nằm trong đối tượng cha, có position là relative
  • fixed: neo đối tượng ở một vị trí cố định trên website kể cả khi bạn cuộn trang, đặc biệt đối tượng này sẽ không bị ràng buộc vị trí bởi bất kỳ đối tượng nào ở phía ngoài nó giống như giá trị absolute
  • static: quay về vị trí mặc định

Tiếp đến, một thuộc tính quan trọng khác trong phần bố cục layout là các thuộc tính định vị như top, right, bottom và left (thứ tự này sẽ được áp dụng cho nhiều thuộc tính như margin, padding và border mình sẽ viết ở bài sau).

VD3

Bạn hãy thử ứng dụng các thuộc tính vị trí ở phía trên cho VD3 và cùng xem kết quả nhé.

Kết luận

Sau khi xem bài viết này, bạn đã có một ít kiến thức về layout trong CSS và có thể hiểu được phần nào cách phân chia bố cục của các framework CSS rồi. Nếu có bất kỳ câu hỏi gì về phần này, mời bạn đặt câu hỏi ở phía dưới.

Cảm ơn 500 ae và hãy chờ bài tiếp theo nhé!

[Bài 3] CSS Layout – Tìm hiểu CSS cùng BIT
Đánh giá bài viết:

Bình luận

Hãy trở thành người đầu tiên bình luận!

Thông báo
avatar
wpDiscuz