เรียนรู้เกี่ยวกับความแตกต่างระหว่าง ระดับบล็อก &บล็อคอินไลน์ องค์ประกอบใน HTML
ใน HTML องค์ประกอบทั้งหมดจะมี แสดง . เริ่มต้น ค่าที่สืบทอดมาจาก User Agent Stylesheet (UAS) ซึ่งมีอยู่ในเบราว์เซอร์ทั้งหมด
มีสองตัวเลือกค่าที่แสดง บล็อก และ อินไลน์:
- บล็อกใน CSS:
display:block; - inline ใน CSS:
display:inline-block;
ลักษณะการทำงานหรือรูปแบบขององค์ประกอบ HTML ที่ได้รับมาจาก User Agent Stylesheet (UAS) ของเบราว์เซอร์ - ซึ่งคุณสามารถแทนที่ได้อย่างง่ายดาย ดังนั้นองค์ประกอบระดับบล็อกใดๆ สามารถแปลงเป็นองค์ประกอบแบบอินไลน์ได้ด้วยการประกาศง่ายๆ:display:inline-block; — และในทางกลับกัน
องค์ประกอบระดับบล็อกคืออะไร
ใน HTML องค์ประกอบระดับบล็อก เป็นองค์ประกอบที่ขึ้นบรรทัดใหม่เสมอ (เช่น การขึ้นบรรทัดใหม่) และใช้ความกว้างเต็มของคอนเทนเนอร์ (องค์ประกอบหลัก)
ดังนั้นถ้าฉันเพิ่ม
ตัวอย่างโค้ด:
<div>I’m a block-level element.</div>ผลลัพธ์:
ฉันเป็นองค์ประกอบระดับบล็อกตกลงยากที่เห็นว่าจะใช้ความกว้างเต็มที่ เพื่อให้มองเห็นได้ง่ายขึ้น มาเพิ่มเส้นขอบให้:
<div style="border:1px solid #dd4c4f">I’m a block-level element.</div>ผลลัพธ์:
ฉันเป็นองค์ประกอบระดับบล็อก
ตอนนี้คุณสามารถดู
ดังที่ฉันได้กล่าวไปแล้ว องค์ประกอบระดับบล็อกจะเริ่มต้นขึ้นบรรทัดใหม่ และนี่คือลักษณะที่ปรากฏในระดับโค้ดและลักษณะการแสดงผลในเบราว์เซอร์จากมุมมองของผู้ใช้:
<div style="border:1px solid #dd4c4f">I’m a block-level element.</div>
<div style="border:1px solid #dd4c4f">I’m another block-level element.</div>ลักษณะที่ปรากฏ:
ฉันเป็นองค์ประกอบระดับบล็อก ฉันเป็นอีกหนึ่งองค์ประกอบระดับบล็อก
ถ้าทั้งสอง
องค์ประกอบระดับบล็อก HTML ทั้งหมด
รายการองค์ประกอบระดับบล็อกทั้งหมดใน HTML:
- ข้อมูลการติดต่อ
- เนื้อหาบทความ
- นอกเหนือจากเนื้อหา
- ใบเสนอราคาแบบยาว ("บล็อก")
- วิดเจ็ตการเปิดเผยข้อมูล
- กล่องโต้ตอบ
- อธิบายคำศัพท์ในรายการคำอธิบาย
- แผนกเอกสาร
- รายการคำอธิบาย
- คำอธิบายรายการคำศัพท์
- ป้ายกำกับชุดฟิลด์
- คำบรรยายภาพ
- จัดกลุ่มเนื้อหาสื่อที่มีคำบรรยาย
) - ส่วนหรือส่วนท้ายของหน้า
- แบบฟอร์มการป้อนข้อมูล
,,,,,- ระดับหัวเรื่อง 1-6
- ส่วนหัวของส่วนหรือหน้า
- ข้อมูลส่วนหัวของกลุ่ม
- กฎแนวนอน (เส้นแบ่ง)
- รายการ
- คอนเทนเนอร์เนื้อหาหลัก
- มีลิงค์การนำทาง
- รายการสั่งซื้อ
- ย่อหน้า
<div style="display:inline-block;border:1px solid #dd4c4f;"> I’m a inline-block element </div>ลักษณะที่ปรากฏ:
ฉันเป็นองค์ประกอบบล็อกแบบอินไลน์องค์ประกอบอินไลน์บล็อกไม่ขึ้นบรรทัดใหม่ (ตัวแบ่งบรรทัด)
ดังนั้น หากคุณมีองค์ประกอบบล็อกแบบอินไลน์สององค์ประกอบที่อยู่ติดกันในระดับโค้ด:
<div style="display:inline-block;border:1px solid #dd4c4f"> I’m a inline block element. </div> <div style="display:inline-block;border:1px solid #dd4c4f"> I’m a another inline block element. </div>จากนั้นจะแสดงผลในเบราว์เซอร์ดังนี้:
ฉันเป็นองค์ประกอบบล็อกแบบอินไลน์ฉันเป็นองค์ประกอบบล็อกแบบอินไลน์อื่นและเพียงเพื่อให้เห็นว่า inline block &block แตกต่างกันอย่างไร เรามาเปรียบเทียบกันแบบ “เคียงข้างกัน”:
ฉันเป็นองค์ประกอบบล็อกแบบอินไลน์ฉันเป็นองค์ประกอบบล็อกองค์ประกอบบล็อกแบบอินไลน์ HTML ทั้งหมด
รายการองค์ประกอบแบบอินไลน์ทั้งหมดใน HTML: