home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

HTML Block-Level เทียบกับ Inline-Block Elements (ภาพรวม)

เรียนรู้เกี่ยวกับความแตกต่างระหว่าง ระดับบล็อก &บล็อคอินไลน์ องค์ประกอบใน 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:

    (เฉพาะในกรณีที่มีการควบคุมที่มองเห็นได้)