Thiết Lập Kiểu Hiển Thị Của Phần Tử Bằng Thuộc Tính Display Trong CSS
- HTML
- CSS
- JAVASCRIPT
- JQUERY
- MYSQL
- PHP
- Trong loạt tài liệu hướng dẫn học HTML thì tôi đã từng giới thiệu sơ qua với các bạn về hai loại phần tử, đó chính là phần tử khối và phần tử nội tuyến, lý do mà các phần tử này được phân loại như vậy là bởi vì cách thức hiển thị của chúng (ví dụ như các phần tử <div>, <p>, <h1>, <h2>, <h3>, . . . . được liệt vào nhóm phần tử khối là do khi hiển thị thì chúng luôn bắt đầu trên một hàng mới và trải dài từ trái sang phải chiếm toàn bộ chiều rộng phần content của cha chúng, còn các phần tử như <span>, <i>, <u>, . . . . được liệt vào nhóm phần tử nội tuyến là do khi hiển thị thì chúng sẽ tiếp nối trên hàng hiện tại và chiều rộng phụ thuộc vào kích cỡ của nội dung nằm ở bên trong chúng)
- Vậy câu hỏi được đặt ra ở đây là: tại sao tất cả đều là phần tử, mà phần tử này thì lại có cách thức hiển thị như thế này, phần tử kia thì lại có cách thức hiển thị như thế kia !? |
❏ TRẢ LỜI: Trong CSS, ban đầu mỗi phần tử đều được thiết lập thuộc tính display với một giá trị mặc định, giá trị này sẽ quyết định cách thức hiển thị của phần tử, ví dụ:
- Đối với các phần tử như <div>, <p>, <h1>, . . . thì mặc định chúng được thiết lập thuộc tính display với giá trị block, cho nên chúng sẽ hiển thị dưới dạng khối.
- Đối với các phần tử như <span>, <i>, <u>, . . . thì mặc định chúng được thiết lập thuộc tính display với giá trị inline, cho nên chúng sẽ hiển thị dưới dạng nội tuyến.
⛔ Chỉ cần thiết lập lại giá trị cho thuộc tính display của phần tử thì đồng nghĩa với việc chúng ta có thể thay đổi cách thức hiển thị của phần tử đó.
Ví dụ:- Cách thức hiển thị của phần tử <span> được chuyển sang dạng khối.
- Cách thức hiển thị của phần tử <div> được chuyển sang dạng nội tuyến.
<style> span{ display:block; } div{ display:inline; } </style> Xem ví dụ- Tuy nhiên, cách thức hiển thị của phần tử không chỉ dừng lại ở hai dạng khối & nội tuyến, mà thật ra nó còn có rất nhiều dạng khác nữa, dưới đây là danh sách những giá trị (cũng chính là cách thức hiển thị) mà chúng ta có thể gán cho thuộc tính display. Các bạn vui lòng bấm vào hình để tìm hiểu chi tiết khi chúng ta sử dụng giá trị đó thì cách thức hiển thị của phần tử sẽ trông như thế nào nhé !
inline | - Phần tử sẽ hiển thị dưới dạng nội tuyến. |
block | - Phần tử sẽ hiển thị dưới dạng khối. |
inline-block | - Phần tử sẽ hiển thị dưới dạng khối nội tuyến. |
none | - Phần tử sẽ bị ẩn đi. |
flex | - Phần tử sẽ hiển thị dưới dạng một cái thùng chứa flex dạng khối. |
grid | - Phần tử sẽ hiển thị dưới dạng một cái thùng chứa grid dạng khối. |
inline-flex | - Phần tử sẽ hiển thị dưới dạng một cái thùng chứa flex dạng nội tuyến. |
inline-grid | - Phần tử sẽ hiển thị dưới dạng một cái thùng chứa grid dạng nội tuyến. |
list-item | - Cách thức hiển thị của phần tử sẽ giống với một phần tử <li> |
table | - Cách thức hiển thị của phần tử sẽ giống với một phần tử <table> |
table-caption | - Cách thức hiển thị của phần tử sẽ giống với một phần tử <caption> |
table-column-group | - Cách thức hiển thị của phần tử sẽ giống với một phần tử <colgroup> |
table-header-group | - Cách thức hiển thị của phần tử sẽ giống với một phần tử <thead> |
table-footer-group | - Cách thức hiển thị của phần tử sẽ giống với một phần tử <tfoot> |
table-row-group | - Cách thức hiển thị của phần tử sẽ giống với một phần tử <tbody> |
table-cell | - Cách thức hiển thị của phần tử sẽ giống với một phần tử <td> |
table-column | - Cách thức hiển thị của phần tử sẽ giống với một phần tử <col> |
table-row | - Cách thức hiển thị của phần tử sẽ giống với một phần tử <tr> |
- Khi chúng ta thiết lập thuộc tính display với giá trị inline thì phần tử sẽ hiển thị dưới dạng nội tuyến.
- Một phần tử hiển thị dưới dạng nội tuyến sẽ có các đặc điểm như sau:
|
- Khi chúng ta thiết lập thuộc tính display với giá trị block thì phần tử sẽ hiển thị dưới dạng khối.
- Một phần tử hiển thị dưới dạng khối sẽ có các đặc điểm như sau:
|
- Khi chúng ta thiết lập thuộc tính display với giá trị inline-block thì phần tử sẽ hiển thị dưới dạng khối nội tuyến.
- Một phần tử hiển thị dưới dạng khối nội tuyến sẽ có các đặc điểm như sau:
|
- Khi chúng ta thiết lập thuộc tính display với giá trị none thì phần tử sẽ bị ẩn đi (giống như không hề tồn tại)
Ví dụ: <!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <style> h1:nth-child(2){ display:none; } </style> </head> <body> <h1>1) Tài liệu học HTML</h1> <h1>2) Tài liệu học CSS</h1> <h1>3) Tài liệu học JavaScript</h1> </body> </html> Xem ví dụ- Khi chúng ta thiết lập thuộc tính display với giá trị flex thì phần tử sẽ hiển thị dưới dạng một cái thùng chứa flex, nó thường được sử dụng kết hợp với lệnh truy vấn @media để thiết kế giao diện responsive (loại giao diện tương thích với nhiều thiết bị, tùy vào kích thước màn hình của thiết bị mà trang web sẽ hiển thị theo một kiểu khác)
- Các bạn sẽ được tìm hiểu chi tiết cách sử dụng nhóm thuộc tính flex trong các bài hướng dẫn tiếp theo. |
- Khi chúng ta thiết lập thuộc tính display với giá trị grid thì phần tử sẽ hiển thị dưới dạng một cái thùng chứa grid, nó thường được sử dụng để thiết kế giao diện dạng lưới.
- Các bạn sẽ được tìm hiểu chi tiết cách sử dụng nhóm thuộc tính grid trong các bài hướng dẫn tiếp theo. |
Từ khóa » Hàng Css
-
[CSS] Hướng Dẫn Xây Dựng Những Mẫu CSS Hàng đầu Hiện Nay (P2)
-
[CSS] Hướng Dẫn Xây Dựng Những Mẫu CSS Hàng đầu Hiện Nay (P1)
-
{Css Thực Chiến} Hiển Thị Danh Sách Sản Phẩm Web Bán Hàng Với ...
-
Căn Lề Text-align Và Vertical-align Trong CSS
-
Học CSS - Tìm Hiểu Thuộc Tính "display" - Thạch Phạm
-
Một Số Phương Thức Khác Nhau Của CSS Cho Việc Thay đổi Thứ Tự ...
-
Hướng Dẫn CSS Cho Mỗi Item Sản Phẩm - Free Web App
-
Css Thẳng Hàng Hoặc Nhiều Dòng Thẳng Hàng? - HelpEx
-
Căn Chỉnh - Align Trong CSS
-
Tổng Hợp Các Thuộc Tính Của CSS | Tìm ở đây
-
Tạo Danh Sách Sản Phẩm Bằng Html Css Vừa Dễ Vừa đẹp
-
CSS Box Model - Các Cách Hiển Thị Element Với Thuộc Tính Display
-
Tìm Hiểu Chi Tiết Về Spacing Trong CSS - Evondev Blog
-
Tìm Hiểu Các Thuộc Tính Quy định Vị Trí Trôi Nổi, Dàn Hàng Ngang Sử ...