CSS positioning

Tác dụng chủ yếu của 2 thẻ div và span là để dùng trong css
div: dùng để style cho các khối có chiều rộng chiều cao
span: dùng để style cho text, cho đoạn văn

-----
Float (trôi nổi): làm cho 1 element trôi về 1 trong 2 phía là trái hoặc phải

Chú ý khi sử dụng float

- Một phần tử float sẽ làm cho phần tử không float đằng sau nó chồng lên, có thể gây ra hiệu quả không mong muốn.

- Để tránh hiện tượng trên, ta có thể áp dụng thuộc tính clear cho phần tử không float như sau:

.no-float {
    clear: both;
}

• Clear both ngăn không cho float cả 2 phía, nó cũng có thể nhận các giá trị như: left (chỉ ngăn không cho float bên trái) hay right (ngăn không cho float bên phải).
• Thuộc tính này được dùng khá nhiều trong các trang web và thường được đặt trong 1 class chung (ví dụ như .clear, .clearfix,... ) để tiện sử dụng tại nhiều trang khác nhau.

- Ngoài ra nếu 1 phần tử không float, nhưng toàn bộ phần tử con lại dùng float thì chiều cao của phần tử cha sẽ bằng 0, và các phần tử bên dưới sẽ chồng lên nó. Để khắc phục ta có thể dùng một trong các cách sau:

• Chèn thêm 1 thẻ div rỗng vào cuối nội dung phần tử cha (hoặc sử dụng pseudo class ::after) và đặt thuộc tính clear.
• Sử dụng thuộc tính display: table cho phần tử cha (cần đặt chiều rộng phù hợp).
• Sử dụng thuộc tính overflow: auto cho phần tử cha.

kích thước thật = kích thước lý thuyết + padding + border (chú ý: kích thước thật ko bao gồm margin)

khi sử dụng box-sizing: border-box; thì kích thước thật = kích thước lý thuyết nên dễ căn lề hơn

Nên sử dụng box-sizing: border-box cho toàn bộ element trong trang để style cho dễ 

* {
    box-sizing: border-box;
}

thuộc tính display: thay đổi cách thức hiển thị của phần tử
inline: <a> <img> <span>
block: <div> <h1> đến <h6> <p>
khác nhau:
block thì chấp nhận thuộc tính width và height, còn inline thì ko
block có chiều rộng mặc định 100%, còn inline thì có chiều rộng bằng nội dung bên trong nó
các thuộc tính margin, padding : khi áp dụng cho inline thì chỉ làm giãn khoảng cách theo chiều ngang. còn với block thì cả 2 chiều dọc ngang

các giá trị khác
inline-block
none: làm cho element ko hiển thị trên trình duyệt