กฎพื้นฐานของ CSS (Normal flow, BFC, IFC)

เมื่อออกแบบ HTML CSS บางครั้งเลย์เอาต์อาจไม่ได้ออกมาตามที่ต้องการ

และฉันก็เคยค้นหาในกูเกิลบ่อยมากเลยล่ะ

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

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

ถึงแม้ว่าฉันจะรู้เรื่องนี้จากประสบการณ์อยู่แล้ว แต่ก็จำเป็นที่จะต้องสรุปมันเอาไว้

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

1. Normal Flow

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

* เวลาเขียนโพสต์ใน durumis แล้ววางแท็ก html ลงไป มันหายไปอ่ะ แก้ยังไงดี;;

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

2. BFC (Block Formatting Context)

- ส่วนใหญ่ใช้ในการสร้างเลย์เอาต์ (สร้างบล็อกแล้วใส่ข้อมูลอินไลน์ลงไปในนั้น)

- เป็นวิธีการที่องค์ประกอบระดับบล็อกเรียงซ้อนกัน

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

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

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

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

- สามารถตั้งค่า width, height, margin, padding ได้

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

- กรณีที่สร้าง BFC ขึ้นมามีดังนี้ สามารถค้นหาทีละรายการได้

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

3. IFC (Inline Formatting Context)

- สร้างขึ้นภายในองค์ประกอบบล็อก (ไม่ใช่ระดับบรรทัด)

- ไม่สามารถตั้งค่า width และ height ได้โดยตรง (ใช้ขนาดของเนื้อหา)

- สามารถใช้ padding และ margin ในแนวนอนได้เท่านั้น

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

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

แล้วใช้ตอนไหนล่ะ?

- bfc ใช้เพื่อจัดการกับการโต้ตอบของ float และการลบล้างมาร์จิน

1. การโต้ตอบของ float

- ถ้าตั้งค่าสไตล์ที่อิสระให้กับลูก (float, position absolute, fixed, display inline-block เป็นต้น...)

- พ่อจะไม่สามารถครอบคลุมได้

- ในกรณีนี้ ให้ใช้ bfc ในองค์ประกอบหลักเพื่อสร้างเลย์เอาต์

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

2. การลบล้างมาร์จิน

- css จะทำให้มาร์จินด้านบนและล่างของแท็กที่อยู่ติดกันทับซ้อนกัน

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

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

หมายเหตุ durumis มีวิธีการคัดลอกวาง html ยังไงอ่ะ;;