Khóa học CSS - Bài 16 - Thuộc tính display

Quay về MỤC LỤC TỰ HỌC CSS

Thuộc tính display xác định cách thức/điều kiện hiển thị của 01 đối tượng HTML.

Giá trị mặc định của đối tượng tùy vào loại và thường là 01 trong 02 giá trị sau: block và inline.

1. Đối tượng dạng block

Là dạng đối tượng luôn bắt đầu bằng dòng mới, kéo dài từ đầu dòng đến hết chiều dài màn hình (full width).

Các đối tượng dạng block:

<div>

<h1> đến <h6>

<p>

<form>

<header>

<footer>

<section>

Ví dụ:

h1{border:3px solid green}

2. Đối tượng dạng inline

Đối tượng inline là dạng đối tượng không bắt đầu bằng 01 dòng mới và có chiều dài vừa đủ bao quanh nội dung.

Các đối tượng dạng inline:

<span>

<a>

<img>

Ví dụ:

span{ border:3px solid green}

3. Thuộc tính display:none

Thuộc tính này làm cho đối tượng HTML không hiện ra màn hình( nhưng vẫn tồn tại).

Người ta thường dùng thuộc tính này kết hợp Javascript để Tắt/Mở hiển thị 01 đối tượng HTML.

Ví dụ:

h1{border:3px solid green;display:none}

4. Thay đổi giá trị mặc định của thuộc tính display

Thay đối giá trị mặc định của đối tượng từ inline->block và ngược lại để tạo hiệu ứng.

Ví dụ:

Tạo menu khi thay đổi giá trị display là inline

li { display: inline;}

và các giá trị HTML trong phần body

<ul>

                <li>Trang chủ</li>

                <li>Sản phẩm</li>

                <li>Tuyển dụng</li>

                <li>Liên hệ</li>

</ul>

Các bạn tự trang trí và thêm liên kết cho menu đẹp hơn.

Chú ý: việc thay đổi giá trị display mặc định không làm thay đổi loại đối tượng HTML.

Đối tượng loại inline dù khai báo display:block vẫn không thể chứa 01 đối tượng block bên trong nó(sẽ có 01 dòng mới xuất hiện).

5. So sánh display:none và visibility:hidden

Cả 02 thuộc tính đều làm ẩn đối tượng.

Thuộc tính display:none làm biến mất đối tượng và không chiếm chỗ trống.

Thuộc tính visibility:hidden làm biến mất đối tượng nhưng vẫn chiếm chỗ trống.

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

Quay về MỤC LỤC TỰ HỌC CSS

Tác giả: #drM

Nguồn: Sưu Tầm