Bố cục trong CSS – Thuộc tính display
Thuộc tính display là một trong những thuộc tính quan trọng để định dạng bố cục trong CSS. Thuộc tính display Thuộc tính display xác định cách các phần tử được hiển thị. Mỗi phần tử HTML có giá trị hiển thị mặc định tùy thuộc vào loại phần tử đó. Giá trị hiển ...
Thuộc tính display là một trong những thuộc tính quan trọng để định dạng bố cục trong CSS.
Thuộc tính display
Thuộc tính display xác định cách các phần tử được hiển thị. Mỗi phần tử HTML có giá trị hiển thị mặc định tùy thuộc vào loại phần tử đó. Giá trị hiển thị mặc định cho hầu hết các phần tử là block hoặc inline.
Các phần tử Block-level
Một phần tử block-level luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn (trải dài ra bên trái và phải càng nhiều càng tốt).
Ví dụ về phần tử block-level:
- <div>
- <h1> – <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
Các phần tử inline
Một phần tử inline không bắt đầu trên một dòng mới và chỉ chiếm chiều rộng đủ để hiển thị.
Ví dụ về phẩn tử inline:
- <span>
- <a>
- <img>
Display: none;
display: none; thường được sử dụng trong JavaScript để ẩn hoặc hiện phần tử mà không xóa hay tạo lại chúng. Phần tử <script> mặc định sử dụng display: none;
Ghi đề giá trị display mặc định
Như đã nói ở trên, mỗi phần tử đều có giá trị hiển thị mặc định. Tuy nhiên bạn có thể ghi đè lên giá trị đó. Thay phần tử inline bằng phần tử block hoặc ngược lại. Điều này có thể hữu dụng để hiển thị trang web được thuận mắt hơn mà vẫn đảm bảo đáp ứng tiêu chuẩn.
Ví dụ phổ biến là tùy biến phần tử <li> theo thanh menu ngang:
li { display: inline; }
Lưu ý: thiết lập thuộc tính display của phần tử chỉ thay đổi cách mà phần tử đó được hiển thị, không thay đổi loại phần tử đó. Vì thế phần tử inline với display:block; không cho phép phần tử block khác nằm trong nó.
Xem ví dụ dưới đây hiển thị phần tử <span> như phần tử block:
span { display: block; }
Ẩn một phần tử – display:none hay visibility:hidden
Ẩn một phần tử có thể làm bằng cách thiết lập thuộc tính display thành giá trị none. Phần tử có thể bị ẩn đi và trang web sẽ không hiển thị phần tử đó:
h1.hidden { display: none; }
visibility:hidden; cũng ẩn một phần tử. Tuy nhiên phần tử sẽ vẫn tạo một khoảng trắng ở đó. Phần tử ẩn đi nhưng bố cục hiển thị khoảng trắng ở đó.
h1.hidden { visibility: hidden; }
Thuộc tính Display/Visibility trong CSS
Thuộc tính | Mô tả |
display | xác định cách hiển thị phần tử |
visibility | xác định phần tử được hiển thị hay bị ẩn |
- Học lập trình front-end cơ bản với bootstrap 4/html5/css3
- Học lập trình front-end nâng cao qua Project thực tế
- Học thiết kế web với Photoshop, CSS theo kiểu SASS
- Học cách sử dụng Git_hub cho lập trình viên
- Học lập trình Back-end PHP theo mô hình MVC cơ bản
- Học lập trình Back-end PHP theo mô hình MVC nâng cao
- Học lập trình Cơ sở dữ liệu với AngularJS
- Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
- Combo lập trình front-end từ cơ bản – nâng cao
- Combo lập trình back-end từ cơ bản đến nâng cao
- Combo lập trình web với word press từ A-Z