Hướng dẫn Tìm hiểu thuộc tính display và tùy biến loại phần tử với display

[PVS]

Tìm hiểu thuộc tính display và tùy biến loại phần tử với display

Ở phần đầu của serie Học CSS cơ bản này mình đã có nói qua về thuộc tính Block và Inline là như thế nào và tầm quan trọng của nó trong việc thiết kế bố cục chơ website với CSS. Hiện tại chắc bạn đã biết thế nào là Block và Inline rồi đúng không? Mình xin nhắc lại nếu bạn chưa nhớ nhé.

• Block: Các phần tử block nó sẽ được nằm một hàng riêng biệt khi hiển thị. Ví dụ như các thẻ <div>, <li>, <ul>, <h1>,..là các block.
• Inline: Các phần tử này sẽ hiển thị trên cùng một hàng trên nội dung khác. Ví dụ như các thẻ <span>, <strong>, <a>,..là các phần tử inline.

Vậy thì câu hỏi được đặt ra, làm thế nào để chuyển một phần tử inline sang block và ngược lại? Giải pháp trong CSS đó là sẽ sử dụng thuộc tínhdisplay.

Thuộc tính display có một số giá trị cơ bản như:

• inline: Chuyển phần tử về hiển thị trên cùng một hàng.
• inline-block: Chuyển phần tử về hiển thị trên cùng một hàng nhưng nó vẫn thừa hưởng các đặc tính của block như có thể tùy chỉnh kích thước, thêm background,…
• block: Chuyển phần tử về hiển thị kiểu block, sở hữu một hàng riêng.
• list-item: Chuyển phần tử về hiển thị như một mục danh sách, để có thể sử dụng thuộc tính list-style.
• none: Đơn giản là ẩn phần tử đó đi không cho hiển thị nữa, nó cũng sẽ ẩn luôn toàn bộ các khoảng trống mà nó sở hữu. Nếu bạn muốn ẩn đi mà vẫn đề lại “dấu vết” thì có thể sử dụng visibility: hidden.

Còn một số các giá trị khác ít dùng đến mà bạn có thể xem tại đây.

Ví dụ về thuộc tính display:

HTML:

<h3>Đưa các danh sách về dạng inline</h3>
<ul>
  <li class="inline">List Item 1</li>
  <li class="inline">List Item 3</li>
  <li class="inline">List Item 4</li>
  <li class="inline">List Item 5</li>
</ul>

<h3>Đưa các thẻ a về block</h3>
<a href="http://vnxf.vn" class="block">Link 1</a>
<a href="http://vnxf.vn" class="block">Link 1</a>
<a href="http://vnxf.vn" class="block">Link 1</a>

<h3>Ẩn phần tử</h3>
<p class="none">Ở đây có văn bản nè pa.</p>

CSS:

.inline {
  display: inline;
}
.block {
  display: block;
  background: #e8e8e8;
  margin: 5px 0;
}
.none {
  display: none;
}

Kết quả:

​

Chỉ vậy thôi, bạn nên nhớ là CSS luôn tồn tại một thuộc tính tên là display để đổi kiểu hiển thị cho phần tử là được vì chắc chắn sau này bạn sẽ sử dụng rất nhiều khi thực hành thực tế.

Chúc các bạn thành công.

Nguồn: thachpham.com​