Bây giờ chúng ta sẽ có thể thiết lập rõ ràng kiểu hiển thị của các phần tử bằng hai cú pháp có giá trị của hiển thị CSS. Điều này sẽ cho phép chúng tôi thay đổi bố cục luồng của phần tử
Cú pháp
Cú pháp của thuộc tính hiển thị CSS như sau -
Selector {
display: /*inside*/ /*outside*/
} Ví dụ
Các ví dụ sau minh họa thuộc tính hiển thị 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> Điều này cho kết quả sau trong Firefox
Ví dụ
<!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> Điều này cho kết quả sau
