07/09/2018, 14:38

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
Tham khảo thêm các khóa học lập trình web từ Front-end đến Back-end do trực tiếp giảng viên quốc tế trường FPT Arena giảng dạy giúp bạn thành thạo kỹ năng lập trình web từ CƠ BẢN – NÂNG CAO với giá chỉ từ 290,000đ:
  • 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
0