CSS - การแสดงผล

คำอธิบาย

จอแสดงสถานที่ให้บริการมีผลต่อการนำเสนอพื้นฐานที่สุดขององค์ประกอบได้อย่างมีประสิทธิภาพ classing องค์ประกอบเป็นชนิดหนึ่งขององค์ประกอบ การแสดงผลขององค์ประกอบอาจขึ้นอยู่กับประเภทการแสดงผลเป็นอย่างมากและคุณสมบัติบางอย่างจะใช้ได้เฉพาะกับองค์ประกอบที่มีค่าการแสดงผลเฉพาะเท่านั้น

ค่าที่เป็นไปได้

  • inline- ค่านี้ทำให้องค์ประกอบสร้างกล่องระดับอินไลน์ ตัวอย่างเช่นองค์ประกอบ HTML STRONG, CODE หรือ EM (อื่น ๆ ) องค์ประกอบจะสร้างกล่องอินไลน์อย่างน้อยหนึ่งกล่องเมื่อแสดงขึ้น

  • block- ค่านี้ทำให้องค์ประกอบสร้างกล่องระดับบล็อก ตัวอย่างเช่นองค์ประกอบ HTML P, H1 หรือ PRE (อื่น ๆ ) องค์ประกอบจะสร้างกล่องบล็อกเมื่อมีการแสดง

  • list-item- ค่านี้ทำให้องค์ประกอบสร้างทั้งกล่องบล็อกและกล่องรายการแบบอินไลน์ ใน HTML องค์ประกอบ LI เป็นเพียงตัวอย่างเดียวขององค์ประกอบดังกล่าว

  • run-in- ภายใต้เงื่อนไขบางประการค่านี้จะทำให้องค์ประกอบถูกแทรก เป็นจุดเริ่มต้นขององค์ประกอบต่อไปนี้ หากองค์ประกอบ A ถูกตั้งค่าให้แสดง: run-in และตามด้วยองค์ประกอบระดับบล็อก B ดังนั้น A จะกลายเป็นกล่องระดับอินไลน์แรกของ B ถ้าองค์ประกอบต่อไปนี้ A ไม่ใช่ระดับบล็อก A จะกลายเป็น กล่องระดับบล็อก

  • compact - ภายใต้เงื่อนไขบางประการค่านี้จะทำให้องค์ประกอบถูกวางไว้ที่ด้านใดด้านหนึ่งขององค์ประกอบต่อไปนี้

  • marker- ค่านี้จะตั้งค่าเนื้อหาที่สร้างขึ้นเป็นเครื่องหมาย ดังนั้นจึงควรใช้ร่วมกับองค์ประกอบ: before และ: after pseudo- เมื่อตั้งค่าเป็นองค์ประกอบระดับบล็อกเท่านั้น

  • table- ค่านี้ทำให้องค์ประกอบสร้างกล่องตารางระดับบล็อก สิ่งนี้คล้ายคลึงกับองค์ประกอบ HTML TABLE

  • inline-table- ค่านี้ทำให้องค์ประกอบสร้างกล่องตารางแบบอินไลน์ แม้ว่าจะไม่มีอะนาล็อกใน HTML แต่ก็สามารถจินตนาการได้ว่าเป็นตาราง HTML แบบดั้งเดิมซึ่งสามารถปรากฏอยู่ตรงกลางบรรทัดของข้อความ

  • table-cell- ค่านี้ประกาศให้องค์ประกอบเป็นเซลล์ตาราง สิ่งนี้คล้ายคลึงกับองค์ประกอบ HTML TD

  • table-row- ค่านี้ประกาศให้องค์ประกอบเป็นแถวของเซลล์ตาราง สิ่งนี้คล้ายคลึงกับองค์ประกอบ HTML TR

  • table-row-group- ค่านี้ประกาศให้องค์ประกอบเป็นกลุ่มแถวของตาราง สิ่งนี้คล้ายคลึงกับองค์ประกอบ HTML TBODY

  • table-column- ค่านี้ประกาศให้องค์ประกอบเป็นคอลัมน์ของเซลล์ตาราง สิ่งนี้คล้ายคลึงกับองค์ประกอบ HTML COL

  • table-column-group- ค่านี้ประกาศให้องค์ประกอบเป็นกลุ่มคอลัมน์ของตาราง สิ่งนี้คล้ายคลึงกับองค์ประกอบ HTML COLGROUP

  • table-header-group- ค่านี้ประกาศให้องค์ประกอบเป็นกลุ่มเซลล์ที่มองเห็นได้ที่ด้านบนของตารางเสมอโดยวางไว้ก่อนแถวหรือกลุ่มแถวใด ๆ แต่อยู่หลังคำอธิบายภาพตารางที่จัดชิดบนสุด สิ่งนี้คล้ายคลึงกับองค์ประกอบ HTML THEAD

  • table-footer-group- ค่านี้ประกาศให้องค์ประกอบเป็นกลุ่มเซลล์ซึ่งมองเห็นได้ที่ด้านล่างของตารางเสมอโดยวางไว้หลังแถวหรือกลุ่มแถวใด ๆ แต่ก่อนคำอธิบายภาพตารางที่จัดชิดด้านล่าง สิ่งนี้คล้ายคลึงกับองค์ประกอบ HTML TFOOT

  • table-caption- ค่านี้ประกาศให้องค์ประกอบเป็นคำบรรยายสำหรับตาราง สิ่งนี้คล้ายคลึงกับ CAPTION องค์ประกอบ HTML

  • none - องค์ประกอบจะไม่สร้างกล่องใด ๆ เลยดังนั้นจะไม่มีการแสดงหรือส่งผลกระทบต่อเค้าโครงของเอกสาร

นำไปใช้กับ

องค์ประกอบ HTML ทั้งหมด

ไวยากรณ์ DOM

object.style.cueAfter = url("music.wav");

ตัวอย่าง

นี่คือตัวอย่าง -

<p style = "display:inline;">
   This paragraph will inline with the next paragraph
</p>

<p style = "display:inline;">
   and will make a single line.
</p>

<br />
<br />

<div style = "display:block;">
   This paragraph will be separate from the next paragraph
</div>

<div style = "display:block;">
   and this is second paragraph.
</div>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

This paragraph will inline with the next paragraph

and will make a single line.



This paragraph will be separate from the next paragraph
and this is second paragraph.

CSS ตอบสนอง

Language