ตอนนี้เราจะสามารถตั้งค่าประเภทการแสดงผลขององค์ประกอบได้อย่างชัดเจนด้วยการแสดง CSS สองรูปแบบ ซึ่งจะทำให้เราสามารถเปลี่ยนรูปแบบการไหลขององค์ประกอบ
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติการแสดงผล CSS มีดังต่อไปนี้ -
Selector {
display: /*inside*/ /*outside*/
} ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงคุณสมบัติการแสดงผล CSS
<!DOCTYPE html>
<html>
<head>
<style>
body,div,span {
box-shadow: inset 0 0 12px lightgreen;
border: 2px dotted gray;
}
span {
padding: 2%;
display: inline flow-root;
}
</style>
</head>
<body>
<div>
<p>
Aliquam non metus diam. Suspendisse ac euismod eros, quis feugiat lacus.
</p>
<img src="https://images.unsplash.com/photo-1611625618313-68b87aaa0626?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=128&ixlib=rb-1.2.1&q=80&w=128" />
<span>Inline Block</span> <span>Span</span>
Quisque sit amet consequat sem. Morbi eleifend erat et orci faucibus lacinia.
</div>
</body>
</html> สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ใน Firefox
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
body,div,span {
margin: 2%;
box-shadow: inset 0 0 12px orange;
border: 2px ridge cadetblue;
}
span {
padding: 2%;
display: block flow;
}
</style>
</head>
<body>
<div>
<p>
Aliquam non metus diam. Suspendisse ac euismod eros, quis feugiat lacus.
</p>
<span>Block is now</span> <span>Block Flow</span>
Quisque sit amet consequat sem. Morbi eleifend erat et orci faucibus lacinia.
</div>
</body>
</html> ซึ่งจะได้ผลลัพธ์ดังต่อไปนี้
