Thuộc tính display trong CSS

Thuộc tính display trong CSS tác động đến phần trình bày cơ bản nhất của một phần tử. Việc hiển thị nội dung phần tử có thể phụ thuộc rất nhiều vào kiểu hiển thị (Display Type), và các thuộc tính cụ thể chỉ làm việc trên các phần tử mà có kiểu hiển thị cụ thể.

Thuộc tính display có thể nhận giá trị:

inline: giá trị này làm cho phần tử tạo một Inline-Level Box (ví dụ: các phần tử STRONG, CODE, hoặc EM trong HTML). Phần tử sẽ tạo một hoặc nhiều Inline Box khi nó được hiển thị.
block: giá trị này làm cho phần tử tạo một Block-Level Box (ví dụ: phần tử P, H1 hoặc PRE trong HTML). Phần tử sẽ tạo một Block Box khi nó được hiển thị.
list-item: giá trị này làm phần tử tạo cả Block Box và một List-Item Box. Trong HTML, phần tử LI là ví dụ cho loại phần tử này.
run-in: dưới những điều kiện cụ thể, giá trị này làm phần tử được chèn vào trong phần đầu của phần tử tiếp theo. Ví dụ, nếu phần tử A được thiết lập là display: run-in và được theo sau bởi một phần tử B dạng Block-Level, thì A sẽ trở thành Inline-Level đầu tiên của B. Nếu theo sau A không phải là Block-Level thì A trở thành một Block-Level.
compact: dưới các điều kiện cụ thể, giá trị này làm phần tử được đặt vào một bên cạnh nào đó của phần tử theo sau.
marker: giá trị này sẽ thiết lập phần nội dung được tạo để làm một marker (bạn có thể hiểu là các bullet trong một list). Vì thế, nó nên chỉ được sử dụng kết hợp với các phần tử :before và :after Pseudo Element khi chúng được thiết lập trên các phần tử Block-Level.
table: giá trị này làm phần tử tạo một Block-Level Table. Nó tương tự như phần tử TABLE trong HTML.
inline-table: giá trị này làm phần tử tạo một Inline-Level Table. Bạn có thể hiểu rằng nó tương tự như phần tử TABLE trong HTML mà có thể xuất hiện ở giữa một dòng text.
table-cell: giá trị này khai báo phần tử là dạng một ô trong bảng. Tương tự như phần tử TD trong HTML.
table-row: giá trị này khai báo phần tử là dạng một hàng các ô trong bảng. Tương tự như phần tử TR trong HTML.
table-row-group: giá trị này khai báo phần tử là dạng một nhóm các hàng trong bảng. Tương tự như phần tử TBODY trong HTML.
table-column: giá trị này khai báo phần tử là dạng một cột trong bảng. Tương tự như phần tử COL trong HTML.
table-column-group: giá trị này khai báo phần tử là dạng một nhóm các cột trong bảng. Tương tự như phần tử COLGROUP trong HTML.
table-header-group: giá trị này khai báo phần tử là dạng một nhóm các ô trong bảng hiển thị dưới dạng một Header xuất hiện tại phần đầu của bảng. Phần Header này được đặt trước bất kỳ hàng nội dung nào và đặt sau phần caption.Tương tự như phần tử THEAD trong HTML.
table-footer-group: giá trị này khai báo phần tử là dạng một nhóm các ô trong bảng hiển thị dưới dạng một Footer xuất hiện tại phần cuối của bảng. Phần Footer này được đặt sau bất kỳ hàng nội dung nào và đặt trước phần caption.Tương tự như phần tử TFOOT trong HTML.
table-caption: giá trị này khai báo phần tử là một caption cho một bảng. Tương tự như phần tử CAPTION trong HTML.
none: phần tử sẽ không tạo bất kỳ Box nào và vì thế sẽ không được hiển thị hoặc không ảnh hưởng tới Layout của trang.

Thuộc tính display có thể áp dụng cho:

Tất cả các phần tử HTML.

Quảng cáo

Cú pháp thuộc tính display trong DOM

object.style.display = "inline";

Ví dụ thuộc tính display trong CSS

Tiếp theo là ví dụ về cách sử dụng của thuộc tính display trong CSS.

<p style="display:inline;">
Doan text nay se la Inline voi Doan text sau
</p>

<p style="display:inline;">
va se tao nen mot dong.
</p>

<br />
<br />

<div style="display:block;">
Doan text nay se la Rieng re voi doan text sau
</div>

<div style="display:block;">
va day se la doan van thu hai.
</div>

Kết quả là:

Doan text nay se la Inline voi Doan text sau

va se tao nen mot dong.

Doan text nay se la Rieng re voi doan text sau

va day se la doan van thu hai.

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: