เมื่อเขียน HTML CSS อาจทำให้การจัดวางไม่เป็นไปตามที่ต้องการ

เคยมีประสบการณ์ค้นหาใน Google มากมาย

เมื่อเร็วๆ นี้ ฉันได้ดูวิดีโอพูดคุยเกี่ยวกับนักพัฒนาจาก Zerocho และตัดสินใจเรียนรู้พื้นฐานของ CSS

- ต้องการทำความเข้าใจเกี่ยวกับองค์ประกอบแบบบล็อก องค์ประกอบแบบอินไลน์ ปลายขอบ และการจัดแนว

แม้ว่าจะรู้จากประสบการณ์ แต่ก็จำเป็นต้องจัดเรียง

■ หากต้องแก้ไข css ด้วยประสบการณ์เพียงอย่างเดียวแล้วนำไปใช้ หากนำไปใช้กับการออกแบบแบบ responsive จะทำให้เกิดปัญหาหรือซับซ้อนเมื่อบำรุงรักษาในอนาคต

1. โฟลว์ปกติ

- ไม่ต้องคิดอะไรมาก ทุกองค์ประกอบจะถูกวางจากบนลงล่าง จากซ้ายไปขวา

* ใน durumis เมื่อแทรกแท็ก html จะหายไป คุณรู้วิธีแก้ไขหรือไม่;;

 <div>
 	<p>ย่อหน้าแรก</p>
 	<p>ย่อหน้าที่สอง</p>
 	<span>องค์ประกอบแบบอินไลน์ 1</span>
 	<span>องค์ประกอบแบบอินไลน์ 2</span>

- แท็ก p จะสร้างบล็อกสองบล็อก และแท็ก span จะวาดเป็นหนึ่งบรรทัด

 ย่อหน้าแรก
 ย่อหน้าที่สอง

2. BFC (Block Formatting Context)

- มักใช้ในการจัดวางเลย์เอาต์ (จัดเรียงบล็อกแล้วจัดเรียงอินไลน์ภายใน)

- วิธีการวางซ้อนองค์ประกอบแบบบล็อก

- องค์ประกอบระดับบล็อกมีดังนี้

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

- จะครอบคลุมความกว้างทั้งหมดขององค์ประกอบหลัก ไม่ว่าเนื้อหาภายในจะมีความยาวเท่าใดก็ตาม (หนึ่งบรรทัด)

- สามารถใส่บล็อกภายในบล็อกหรือใส่องค์ประกอบแบบอินไลน์ได้

- สามารถตั้งค่าความกว้าง ความสูง ปลายขอบ การเว้นระยะ

 <div style="padding :10px;"> 
 	<h1>หัวข้อ</h1>
 	<p>ย่อหน้าสั้นๆ</p>

- ในแท็ก div จะสร้างสองบรรทัด

- กรณีที่สร้าง BFC มีดังนี้ ค้นหาเมื่อจำเป็น

• หากคุณสมบัติ float ไม่ใช่ none
• หากตำแหน่งเป็น absolute หรือ fixed
• หากแสดงเป็น inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid
• หาก overflow ไม่ใช่ visible เป็นต้น
  

3. IFC (Inline Formatting Context)

<p>
	สวัสดี! <strong> durumis </strong> บทความที่สอง!
	<span style="color: pink;">ชอบ</button> กดปุ่ม

- จัดเรียงภายในองค์ประกอบแบบบล็อก (ไม่ใช่ตามบรรทัด)

- ไม่สามารถตั้งค่าความกว้างและความสูงโดยตรงได้ (ครอบคลุมขนาดของเนื้อหาเท่านั้น)

- สามารถใช้การเว้นระยะแบบแนวนอนได้เท่านั้น

- สามารถใส่เฉพาะองค์ประกอบแบบอินไลน์ภายในองค์ประกอบแบบอินไลน์ได้

<span>, <a>, , <img>, <input> เป็นต้น

แล้วจะใช้เมื่อไหร่ล่ะ?

- bfc ใช้สำหรับจัดการปฏิสัมพันธ์แบบลอยหรือการยกเลิกปลายขอบ

1. ปฏิสัมพันธ์แบบลอย

- หากให้สไตล์แบบอิสระกับลูก องค์ประกอบหลักจะไม่สามารถห่อหุ้มได้

(float, position absolute, fixed, display inline-block เป็นต้น...)

- ในกรณีนี้ ให้ใช้ bfc เพื่อจัดวางเลย์เอาต์

(ใช้ display: inline-block, overflow: auto, float: left ในแท็กหลัก)

<div class="หลัก" style="display: inline-block;">
	<div class="ลูก" style="float: left;">...</div>

2. การยกเลิกปลายขอบ

- css จะทับซ้อนกันที่ปลายขอบบนและล่างของแท็กที่อยู่ติดกัน

เช่น) ระยะห่างระหว่างสองแท็ก div ด้านล่างคือ 100px ไม่ใช่ 150px

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

- ในสถานการณ์ข้างต้น ให้เพิ่มองค์ประกอบ bfc ใหม่ระหว่างสองแท็ก

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

<div style="overflow: auto;"></div> <!-- BFC ใหม่-->

ps. คุณรู้วิธีคัดลอกและวาง HTML ใน durumis หรือไม่;;