display

Thuộc tính display : Xác định sự hiển thị cho thành phần, chuyển đổi thành phần từ dạng dạng này sang dạng khác.

Thuộc tính display có rất nhiều dạng, trong phạm vi bài học chỉ đề cập đến các dạng thường dùng sau:

Chuẩn bị

Tạo file HTML và CSS có cấu trúc thư mục và nội dung như sau:

Cấu trúc thư mục

  • Html

    • index.html
    • css

      • style.css

Click vào dấu [+] để xem cấu trúc.

HTML viết

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8" />
<title>Tiêu đề trang web</title>
<link href="css/style.css" rel="stylesheet" media="screen,print" />
</head>

<body>
<p class="first">Thành phần A.</p>
<p class="second">Thành phần B.</p>
<p class="third"><a>thẻ inline a</a> <span>thẻ inline span</span></p>
</div>
</body>
</html>

Do Thành phần AThành phần B sử dụng thẻ <p>, nên nó thuộc dạng block.

Do thẻ inline a sử dụng thẻ <a>, thẻ inline span sử dụng thẻ <span> nên nó thuộc dạng inline.

Hiển thị trình duyệt khi chưa có CSS

Thành phần A.

Thành phần B.

Thẻ inline a thẻ inline span

CSS

Để dễ hình dung thuộc tính display, ta sẽ cho các thành phần định dạng như sau:

* {
    margin: 0;
    padding: 0;
}

p.first {
    background: #f3f3cf;
}

p.second {
    background: #e0e0fc;
}

p.third a {
    background: #befcc9;
}

p.third span {
    background: #fbdefd;
}

Hiển thị trình duyệt khi chưa sử dụng float

Thành phần A.

Thành phần B.

Thẻ inline a thẻ inline span

Download phần chuẩn bị

Tới đây ta đã xong bước chuẩn bị, bắt đầu thôi.

display: block

Thuộc tính display: block;: hiển thị thành phần thành dạng block.

Ta thêm nội dung display: block; cho Thẻ inline athẻ inline span:

* {
    margin: 0;
    padding: 0;
}

p.first {
    background: #f3f3cf;
}

p.second {
    background: #e0e0fc;
}

p.third a {
    background: #befcc9;
    display: block;
}

p.third span {
    background: #fbdefd;
    display: block;
}

Hiển thị trình duyệt khi sử dụng display: block;

Thành phần A.

Thành phần B.

Thẻ inline a thẻ inline span

Ta thấy hai thành phần Thẻ inline athẻ inline span đã trở thành thành phần block.

display: inline

Thuộc tính display: inline;: hiển thị thành phần thành dạng inline.

Ta thêm nội dung display: inline; cho Thành phần AThành phần B:

* {
    margin: 0;
    padding: 0;
}

p.first {
    background: #f3f3cf;
    display: inline;
}

p.second {
    background: #e0e0fc;
    display: inline;    
}

p.third a {
    background: #befcc9;
}

p.third span {
    background: #fbdefd;
}

Hiển thị trình duyệt khi sử dụng display: inline;

Thành phần A.

Thành phần B.

Thẻ inline a thẻ inline span

Ta thấy Thành phần AThành phần B đã trở thành thành phần inline.

display: none

Thuộc tính display: none;: không hiển thị thành phần.

Ta thêm nội dung display: none; cho Thành phần B:

* {
    margin: 0;
    padding: 0;
}

p.first {
    background: #f3f3cf;
}

p.second {
    background: #e0e0fc;
    display: none;    
}

p.third a {
    background: #befcc9;
}

p.third span {
    background: #fbdefd;
}

Hiển thị trình duyệt khi sử dụng display: none;

Thành phần A.

Thành phần B.

Thẻ inline a thẻ inline span

Ta thấy Thành phần B đã không hiển thị.