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:

• display: block
• display: inline
• display: none

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

Do Thành phần A và Thà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

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

Download phần chuẩn bị

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

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 a và thẻ 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;

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

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 A và Thà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;

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

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;

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