RECAP - BOX MODEL & BEM

BOX MODEL

Bất kỳ phần tử HTML nào của trang web cũng có Box model. Box model dùng để mô tả khoảng cách mà mỗi phần tử trên website được sỡ hữu.

Box model gồm 4 thành phần: margin, border, padding và content

Margin, border và padding sẽ có 4 giá trị: top-bottom-right-left

Content bên trong cùng có 2 giá trị: right-left

GAP là 1 thuộc tính của CSS dùng để chỉnh khoảng cách, khi gắn GAP vô cha thì nó quyết định tất cả đều phải cách đều nhau bằng 1 khoảng cách nhất định

**** Phân biệt sự khác nhau giữa khoảng cách bằng padding và margin:**

Padding của phần tử cha

Marging của phần tử con bên trong cha

Margin	Padding
Margin sẽ thay đổi khoản cách bên ngoài của phần tử so với các phần tử khác mà không làm thay đổi kích thước của phân tử	Padding sẽ thay đổi khoảng cách của nội dung bên trong phần tử so với các lề của nó và sẽ làm thay đổi kích thước của phần tử
Margin chấp nhận số âm và cả số thực	Padding không chấp nhận các giá trị âm
Margin có thuộc tính auto	Padding không có thuộc tính auto
Margin không có màu nền	Màu nền của Padding phụ thuộc vào màu nền của element

Thiết kế layout là cách bố cục và sắp xếp các nội dung chính trên 1 trang web

*Tác dụng của vẽ layout – Sơ đồ khối:
Chia nhỏ công việc, làm đơn giản trang web, dễ nắm bắt việc cần làm.
Giảm thời gian làm -> tăng hiệu quả công việc.
Giúp những người làm chung hiểu công việc của nhau.
Giúp có 1 cái nhìn tổng quan về trang web sắp làm, giúp về sau maintain đơn giản hơn.
Các element đặt đúng vị trí, giúp code clean.
Tránh làm thiếu.
Phân biệt với các element khác dễ hơn => dễ tìm
- Quy tắc vẽ layout: