Code Thuộc tính display trong CSS

Code Thuộc tính display trong CSS

Code Thuộc tính display trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính display trong CSS</title>
<style>
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:100%; float:left; height: auto; padding:5px; background:#ddd; border: 1px solid red; margin-bottom: 10px}
span{color:#fff; background:green}
</style>
</head>
<body>

  <h1>Code Thuộc tính display trong CSS</h1>
  
  <p>Dùng để quy định cách hiển thị của một phần tử HTML hoặc các phần tử HTML con nằm trong phần tử HTML cha:</p>
  
  <div> 
  <h3>display:block;</h3>
  <p>Phần tử HTML có giá trị <span style="display:block;" >display:block;</span> sẽ chiếm hết một hàng</p>
  </div>
  
  <div> 
  <h3>display:none;</h3>
  <p>Phần tử HTML có giá trị <span style="display:none;" >display:none;</span> sẽ bị ẩn đi</p>
  </div>
  
  <div> 
  <h3>display:inline;</h3>
  <p>Phần tử HTML có giá trị <span style="display:inline;" >display:inline;</span> sẽ được hiển thị cùng trên một dòng với các chữ khác trong một câu, bản thân nó sẽ không được quy định chiều rộng và chiều cao</p>
  </div>
  
  <div> 
  <h3>display:inline-block;</h3>
  <p>Phần tử HTML có giá trị <span style="display:inline-block; width:100px; height:50px" >display:inline-block;</span> sẽ được hiển thị cùng trên một dòng với các chữ khác trong một câu, bản thân nó sẽ được quy định chiều rộng và chiều cao</p>
  </div>
  
  <div> 
  <h3>display:grid;</h3>
  <p style="display:grid;">Các phần tử con nằm trong phần tử HTML cha có giá trị <span>display:grid;</span> đều có chiều rộng full <span>100%</span>.</p>
  </div>
  
  <div> 
  <h3>display:flex;</h3>
  <p style="display:flex;">Các phần tử con nằm trong phần tử HTML cha có giá trị <span>display:flex;</span> đều nằm trên cùng một dòng, chiều cao của nó full theo phần tử cha nếu không quy định chiều cao, giá trị này thường kết hợp với thuộc tính khác để định dạng thêm.</p>
  </div>
  
</body>
</html>
Code Thuộc tính display trong CSS nằm trong bài viết Thuộc tính display trong CSS