Khi vẽ HTML CSS, bố cục không được cấu trúc như mong đợi

Tôi đã có kinh nghiệm tìm kiếm rất nhiều trên Google.

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

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

Tôi đã biết kinh nghiệm về nó, nhưng tôi cần phải sắp xếp nó.

■ Tôi cần sửa đổi css, nhưng nếu tôi áp dụng nó theo cách kinh nghiệm và thực hiện nó theo những gì tôi thấy, nó sẽ gây ra vấn đề trong thiết kế đáp ứng hoặc phức tạp khi bảo trì sau này.

1. Luồng Bình thường

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

* Khi viết bài trên durumis, nếu bạn dán thẻ html, nó sẽ biến mất, bạn có biết cách giải quyết không;;

 <div>
 	<p>Đoạn văn đầu tiên</p>
 	<p>Đoạn văn thứ hai</p>
 	<span>Yếu tố nội tuyến 1</span>
 	<span>Yếu tố nội tuyến 2</span>

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

 Đoạn văn đầu tiên
 Đoạn văn thứ hai

2. BFC (Bối cảnh Định dạng Khối)

- Chủ yếu được sử dụng để cấu trúc bố cục. (Cấu trúc khối và cấu trúc nội tuyến bên trong nó.)

- Đây 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 là như sau.

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

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

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

- Bạn có thể đặt width, height, margin, padding.

 <div style="padding :10px;"> 
 	<h1>Tiêu đề</h1>
 	<p>Đây là một đoạn văn ngắn. </p>

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

- Khi BFC được tạo ra là như sau. Bạn có thể tìm kiếm theo từng trường hợp.

• 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 (Bối cảnh Định dạng Nội tuyến)

<p>
	Xin chào! <strong> durumis </strong> Đây là bài viết thứ hai của tôi!
	<span style="color: pink;">Bấm vào</button> nút thích.

- Được cấu trúc bên trong các yếu tố khối. (Không theo từng dòng)

- Bạn không thể đặt width và height trực tiếp. (Nó chiếm diện tích tương ứng với kích thước của nội dung.)

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

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

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

Vậy nó được sử dụng khi nào?

- bfc được sử dụng để xử lý tương tác float hoặc margin trùng lặp.

1. Tương tác float

- Nếu bạn áp dụng phong cách tự do cho con cái, cha mẹ sẽ không thể bao bọc nó.

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

- Lúc này, bạn tạo bfc cho phần tử cha để cấu trúc bố cục.

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

<div class="cha" style="display: inline-block;">
	<div class="con" style="float: left;">...</div>

2. Margin trùng lặp

- Trong css, margin trên và dưới của hai thẻ liền kề sẽ chồng chéo 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.

<div style="margin-bottom: 100px;">
..
</div>
<div style="margin-top: 50px;">
,,

- Trong trường hợp trên, bạn thêm một yếu tố bfc mới giữa hai thẻ.

<div style="margin-bottom: 100px;"></div> 

<div style="overflow: auto;"></div> <!-- bfc mới-->

Lưu ý. Bạn có biết cách sao chép html từ durumis không;;