Các quy tắc cơ bản của CSS (Normal flow, BFC, IFC)

Khi thiết kế HTML CSS, bố cục thường không được sắp xếp như ý muốn

Tôi đã từng tìm kiếm rất nhiều trên Google.

Gần đây, khi xem video nói chuyện của nhà phát triển từ Zerocho, tôi đã quyết định tìm hiểu về những kiến thức cơ bản của CSS.

- Tôi muốn hiểu về các yếu tố khối, yếu tố nội tuyến, margin và cách căn chỉnh.

Mặc dù đã có kinh nghiệm thực tế, nhưng tôi vẫn cần phải hệ thống lại.

■ Khi cần sửa đổi CSS, nếu chỉ áp dụng theo kinh nghiệm và thực hiện dựa trên những gì nhìn thấy, thì có thể gặp phải vấn đề trong thiết kế phản hồi hoặc gặp khó khăn trong việc bảo trì sau này.

1. Luồng Bình thường (Normal Flow)

- Không cần phải suy nghĩ gì đặc biệt. Tất cả các yếu tố đều được sắp xếp từ trên xuống dưới, từ trái sang phải.

* Khi dán thẻ html vào khi viết bài trên durumis, nội dung bị mất, bạn có biết cách khắc phục không;;

- Thẻ p tạo ra hai khối và thẻ span được hiển thị trên cùng một dòng.

2. BFC (Block Formatting Context)

- Thường được sử dụng khi thiết kế bố cục. (Tạo khối và đặt nội tuyến bên trong khối đó.)

- Là cách các yếu tố cấp khối được xếp chồng lên nhau.

- Các yếu tố cấp khối bao gồm:

<div>, <p>, <h1>~<h6>, <ul>, <ol>, <li>, <table>, <form>

- Bất kể độ dài nội dung bên trong, yếu tố này luôn chiếm toàn bộ chiều rộng của phần tử cha. (Một dòng)

- Có thể đặt khối bên trong khối hoặc đặt yếu tố nội tuyến bên trong khối.

- Có thể thiết lập width, height, margin, padding.

- Hai dòng được tạo ra bên trong thẻ div.

- BFC được tạo ra trong các trường hợp sau: Bạn có thể tìm kiếm từng trường hợp cụ thể.

• Khi thuộc tính float không phải là none
• Khi position là absolute hoặc fixed
• Khi display là inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid
• Khi overflow không phải là visible, v.v.
  
  

3. IFC (Inline Formatting Context)

- Được tạo ra bên trong yếu tố khối. (Không theo từng dòng)

- Không thể thiết lập width và height trực tiếp. (Chiếm diện tích theo kích thước nội dung.)

- Chỉ có thể áp dụng padding và margin theo chiều ngang.

- Chỉ có thể bao gồm các yếu tố nội tuyến bên trong yếu tố nội tuyến.

<span>, <a>, , <img>, <input> v.v.

Vậy khi nào thì sử dụng?

- BFC được sử dụng để xử lý tương tác float và chồng lấn margin.

1. Tương tác float

- Nếu áp dụng kiểu dáng tự do cho phần tử con, thì phần tử cha sẽ không bao bọc được.

(float, position absolute, fixed, display inline-block, v.v...)

- Lúc này, chúng ta sẽ áp dụng BFC cho phần tử cha để thiết kế bố cục.

(Áp dụng display: inline-block, overflow: auto, float: left, v.v. cho thẻ cha.)

2. Chồng lấn margin

- Trong CSS, margin trên và dưới của hai thẻ liền kề sẽ chồng lên nhau.

Ví dụ: Khoảng cách trên và dưới giữa hai thẻ div bên dưới là 100px chứ không phải 150px.

- Trong trường hợp này, chúng ta sẽ thêm một yếu tố BFC mới giữa hai thẻ.

Ghi chú: Bạn có biết cách sao chép dán html trên durumis không;;