Thuộc tính CSS Display

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 đó.
Thuộc tính CSS Display

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;
display: inline-block;
display: block;
display: run-in;
display: none;
1) CSS display inline
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>
<a>
<em>
<b> etc.
Hãy xem một ví dụ về CSS hiển thị nội tuyến.
<!DOCTYPE html> 
<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>   
 2) CSS display inline-block
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> 
<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>  
3) CSS display block
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> 
<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>  
4) CSS display run-in
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> 
<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>  
5) CSS display none
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>  

Post a Comment

Previous Post Next Post

Labels Max-Results No.

Boxed(True/False)