CSS QUIZ (PART-2)

float

position

display

grid

toolbar

form

menu

Các layouts phức tạp nói chung

Có thể sắp xếp các phần tử theo 1 hoặc nhiều chiều

Không thể mở rộng hoặc thu nhỏ phần tử theo không gian có sẵn

Để căn chỉnh các items trong Flexbox ta sử dụng thuộc tính flex-direction

Có thể thay đổi thứ tự của các items trong Flexbox

Box Model

Flexbox Model

Grid Layout Model

Float Model

1 - Border

2 - Margin

3 - Padding

4 - Content

1 - Margin

2 - Padding

3 - Border

4 - Content

1 - Margin

2 - Border

3 - Padding

4 - Content

1 - Border

2 - Padding

3 - Margin

4 - Content

margin

color

width

height

vertical, blur, horizontal

blur, vertical, horizontal

vertical, horizontal, blur

horizontal, vertical, blur

Inline items chỉ có thể điều chỉnh margin và padding left và right

Inline items chỉ có thể điều chỉnh margin và padding top và bottom

Các inline items sẽ nằm trên cùng một dòng

Inline items không thể set width và height

display: block thường được sử dụng để tạo thanh điều hướng (navbar)

Có thể set width, height, margin, padding đủ 4 hướng cho các inline-block items

display: inline-block sẽ được sắp xếp giống với kiểu display: block

Tất cả đều sai

Cột thứ nhất và thứ hai sẽ có chiều rộng là 1 đơn vị fr

Cột thứ ba và thứ tư sẽ chiếm 1 đơn vị fr của phần chiều rộng còn lại

Cột thứ ba và thứ tư sẽ có chiều rộng là 150px

Cột thứ nhất và thứ hai sẽ chiếm 150px của phần chiều rộng còn lại