CSS Display là thuộc tính quan trọng nhất của CSS, được sử dụng để kiểm soát bố cục của phần tử. Nó chỉ định cách phần tử được hiển thị.
Mỗi phần tử có một giá trị hiển thị mặc định theo tính chất của nó. Mỗi phần tử trên trang web là một hộp hình chữ nhật và thuộc tính CSS xác định hành vi của hộp hình chữ nhật đó.
Cú pháp:
Có các giá trị hiển thị CSS sau đây thường được sử dụng.
Phần tử nội tuyến chỉ có chiều rộng yêu cầu. Nó không buộc ngắt dòng để dòng văn bản không bị ngắt trong ví dụ nội tuyến.
Các yếu tố nội tuyến là:
Phần tử khối nội tuyến hiển thị CSS rất giống với phần tử nội tuyến nhưng điểm khác biệt là bạn có thể đặt chiều rộng và chiều cao.
Phần tử khối hiển thị CSS chiếm nhiều không gian ngang nhất có thể. Có nghĩa là phần tử khối có chiều rộng đầy đủ có sẵn. Họ thực hiện một ngắt dòng trước và sau chúng.
Thuộc tính này không hoạt động trong Mozilla Firefox. Các yếu tố này không tự sản xuất một hộp cụ thể.
Nếu hộp chạy có chứa hộp bock, nó sẽ giống như khối.
Nếu hộp khối theo hộp chạy, hộp chạy trở thành hộp nội tuyến đầu tiên của hộp khối.
Nếu hộp nội tuyến đi theo hộp chạy, hộp chạy sẽ trở thành hộp chặn.
Giá trị "không" hoàn toàn loại bỏ phần tử khỏi trang. Nó sẽ không mất bất kỳ không gian.
Mỗi phần tử có một giá trị hiển thị mặc định theo tính chất của nó. Mỗi phần tử trên trang web là một hộp hình chữ nhật và thuộc tính CSS xác định hành vi của hộp hình chữ nhật đó.
Cú pháp:
display:value;CSS display values
Có các giá trị hiển thị CSS sau đây thường được sử dụng.
display: inline;1) CSS display inline
display: inline-block;
display: block;
display: run-in;
display: none;
Phần tử nội tuyến chỉ có chiều rộng yêu cầu. Nó không buộc ngắt dòng để dòng văn bản không bị ngắt trong ví dụ nội tuyến.
Các yếu tố nội tuyến là:
<span>Hãy xem một ví dụ về CSS hiển thị nội tuyến.
<a>
<em>
<b> etc.
<!DOCTYPE html>2) CSS display inline-block
<html>
<head>
<style>
p {
display: inline;
}
</style>
</head>
<body>
<p>Hello tienanhvn.com</p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</html>
Phần tử khối nội tuyến hiển thị CSS rất giống với phần tử nội tuyến nhưng điểm khác biệt là bạn có thể đặt chiều rộng và chiều cao.
<!DOCTYPE html>3) CSS display block
<html>
<head>
<style>
p {
display: inline-block;
}
</style>
</head>
<body>
<p>Hello Javatpoint.com</p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</html>
Phần tử khối hiển thị CSS chiếm nhiều không gian ngang nhất có thể. Có nghĩa là phần tử khối có chiều rộng đầy đủ có sẵn. Họ thực hiện một ngắt dòng trước và sau chúng.
<!DOCTYPE html>4) CSS display run-in
<html>
<head>
<style>
p {
display: block;
}
</style>
</head>
<body>
<p>Hello Javatpoint.com</p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</html>
Thuộc tính này không hoạt động trong Mozilla Firefox. Các yếu tố này không tự sản xuất một hộp cụ thể.
Nếu hộp chạy có chứa hộp bock, nó sẽ giống như khối.
Nếu hộp khối theo hộp chạy, hộp chạy trở thành hộp nội tuyến đầu tiên của hộp khối.
Nếu hộp nội tuyến đi theo hộp chạy, hộp chạy sẽ trở thành hộp chặn.
<!DOCTYPE html>5) CSS display none
<html>
<head>
<style>
p {
display: run-in;
}
</style>
</head>
<body>
<p>Hello tienanhv.com</p>
<p>Java Tutorial.</p>
<p>SQL Tutorial.</p>
<p>HTML Tutorial.</p>
<p>CSS Tutorial.</p>
</body>
</html>
Giá trị "không" hoàn toàn loại bỏ phần tử khỏi trang. Nó sẽ không mất bất kỳ không gian.
<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1>This heading is visible.</h1>
<h1 class="hidden">This is not visible.</h1>
<p>You can see that the hidden heading does not contain any space.</p>
</body>
</html>