Menu
GIỚI THIỆU
  • Bài học hôm nay chúng ta học và tìm hiểu Thuộc tính display trong CSS (inline - block -none), sự khác nhau giữa inline và block và inline-block trong CSS

Bài 07: Tìm hiểu thuộc tính display trong CSS

Ở 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é.

Các thuộc tính của display chính bao gồm:

inline: hiển thị trên một hàng

block: hiển thị dang khối

inline-block: kết hợp cả 2 cách hiển thị trên

none: không hiển thị

Các display thuộc tính CSS quy định cụ thể các loại hộp dùng cho một yếu tố rendering. Trong HTML, display giá trị thuộc tính mặc định được lấy từ các hành vi được mô tả trong các thông số HTML hoặc từ biểu định kiểu mặc định của trình duyệt / người dùng. Giá trị mặc định trong XML là inline.

Ngoài các loại hộp hiển thị khác nhau, giá trị none cho phép bạn tắt hiển thị của một phần tử. Khi bạn sử dụng none, tất cả các phần tử hậu duệ cũng bị tắt màn hình của chúng. Tài liệu được hiển thị như thể phần tử không tồn tại trong cây tài liệu.

/* <display-outside> values */
display: block;
display: inline;
display: run-in;

/* <display-inside> values */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;
display: subgrid;

/* <display-outside> plus <display-inside> values */
display: block flow;
display: inline table;
display: flex run-in;

/* <display-listitem> values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/* <display-internal> values */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/* <display-box> values */
display: contents;
display: none;

/* <display-legacy> values */
display: inline-block;
display: inline-list-item;
display: inline-table;
display: inline-flex;
display: inline-grid;

/* Global values */
display: inherit;
display: initial;
display: unset;

Cú pháp Display

Được viết như sau

  • <display-outside>
  • <display-inside>
  • <display-listitem>
  • <display-internal>
  • <display-box>
  • <display-legacy>

Hiện tại, tốt nhất nên chỉ định displaysử dụng một từ khoá: mặc dù các đặc tả mới nhất cho phép bạn kết hợp một số từ khóa, nhưng trình duyệt vẫn chưa hỗ trợ.

Tìm hiểu từng giá trị

<display-outside>

Những từ khoá này chỉ định kiểu hiển thị bên ngoài của phần tử, chủ yếu là vai trò của nó trong cách bố trí luồng. Chúng được định nghĩa như sau:

Giá trị Sự miêu tả
block Phần tử tạo ra một phần tử khối.
inline Phần tử tạo ra một hoặc nhiều hộp nội tuyến.
run-in Phần tử tạo ra một hộp chạy vào. Các yếu tố chạy được hoạt động như đường thẳng hoặc khối, phụ thuộc vào các yếu tố xung quanh. Đó là:
  • Nếu hộp chạy vào chứa một hộp khối, giống như khối.
  • Nếu một hộp khối sau hộp chạy vào, hộp chạy vào hộp thoại nội tuyến đầu tiên của hộp khối.
  • Nếu một hộp nội tuyến sau, hộp chạy vào hộp văn bản sẽ trở thành một khối.

<display-inside>

Các từ khoá này chỉ định loại hiển thị bên trong của phần tử, định nghĩa loại ngữ cảnh định dạng đưa ra nội dung của nó (giả sử nó là một phần tử không được thay thế). Chúng được định nghĩa như sau:

Giá trị Sự miêu tả
flow Phần tử này trình bày nội dung của nó bằng cách sử dụng cách bố trí lưu lượng (cách bố trí khối và đường nội tuyến).

Nếu kiểu hiển thị bên ngoài của nó là inline hoặc run-in, và nó đang tham gia vào một ngữ cảnh định dạng khối hoặc nội tuyến, thì nó sẽ tạo ra một hộp nội tuyến. Nếu không nó tạo ra một hộp container khối.

Tùy thuộc vào giá trị của các thuộc tính khác (chẳng hạn như position,, floathoặc overflow) và cho dù đó là tham gia vào một ngữ cảnh định dạng khối hay nội tuyến, nó sẽ thiết lập một ngữ cảnh định dạng khối mới cho nội dung của nó hoặc tích hợp nội dung của nó vào ngữ cảnh định dạng gốc của nó.

flow-root Phần tử tạo ra một khối phần tử khối thiết lập một ngữ cảnh định dạng khối mới .
table Các phần tử này hoạt động giống như <table>các phần tử HTML. Nó định nghĩa một hộp cấp khối.
flex Phần tử hoạt động giống như một phần tử khối và đặt ra nội dung của nó theo mô hình flexbox .
-webkit-flex Bí danh cho flex.
-moz-box / -webkit-box Phần tử hoạt động giống như một hộp linh hoạt theo một đặc điểm kỹ thuật đã lỗi thời của Flexbox.
grid Phần tử hoạt động giống như một phần tử khối và đặt ra nội dung của nó theo mô hình lưới.
subgrid Nếu phần tử cha mẹ có display:grid, chính phần tử đó và nội dung của nó được đặt ra theo mô hình lưới.
ruby  Phần tử hoạt động giống như một phần tử nội tuyến và trình bày nội dung của nó theo mô hình định dạng ruby. Nó hoạt động giống như các <ruby>phần tử HTML tương ứng .

<display-listitem>

Phần tử tạo một hộp khối cho nội dung và một hộp nội tuyến riêng biệt trong danh sách.

Nếu không có <display-inside>giá trị được chỉ định, kiểu hiển thị nội bộ của hộp chính sẽ mặc định flow. Nếu không có <display-outside>giá trị được chỉ định, loại hiển thị bên ngoài của hộp chính sẽ mặc định block.

<display-internal>

Một số mô hình bố trí, chẳng hạn như bảng và ruby, có cấu trúc nội bộ phức tạp, với nhiều vai trò khác nhau mà con cái và con cháu của họ có thể điền vào. Phần này định nghĩa những giá trị hiển thị "nội bộ", chỉ có ý nghĩa trong chế độ bố cục cụ thể đó.

Trừ khi được chỉ định khác, cả kiểu hiển thị bên trong và loại hiển thị bên ngoài của các phần tử sử dụng các giá trị hiển thị này được đặt thành từ khóa nhất định.

Giá trị Sự miêu tả
table-row-group Các phần tử này hoạt động giống như <tbody>các phần tử HTML
table-header-group Các phần tử này hoạt động giống như <thead>các phần tử HTML.
table-footer-group Các phần tử này hoạt động giống như <tfoot>các phần tử HTML.
table-row Các phần tử này hoạt động giống như <tr>các phần tử HTML.
table-cell Các phần tử này hoạt động giống như <td>các phần tử HTML.
table-column-group Các phần tử này hoạt động giống như <colgroup>các phần tử HTML.
table-column Các phần tử này hoạt động giống như <col>các phần tử HTML.
table-caption Các phần tử này hoạt động giống như <caption>các phần tử HTML.
ruby-base Những yếu tố này hành xử giống như <rb>các yếu tố.
ruby-text  Những yếu tố này hành xử giống như <rt>các yếu tố.
ruby-base-container  Các phần tử này hoạt động giống như <rbc>các phần tử được tạo ra dưới dạng các hộp ẩn danh.
ruby-text-container  Những yếu tố này hành xử giống như <rtc>các yếu tố.

<display-box>

Các giá trị này xác định liệu một phần tử tạo ra các hộp hiển thị hay không.
Giá trị Sự miêu tả
contents  Những yếu tố này không sản xuất một hộp cụ thể của mình. Chúng được thay thế bởi hộp giả của chúng và hộp con của chúng.
none

Tắt hiển thị của một phần tử sao cho nó không ảnh hưởng đến bố cục (tài liệu được hiển thị như thể phần tử không tồn tại). Tất cả các phần tử hậu duệ cũng bị tắt màn hình.

Để có một phần tử chiếm một khoảng trống mà nó thường có, nhưng không thực sự vẽ bất cứ điều gì, hãy sử dụng visibilitytài sản để thay thế.

<display-legacy>

CSS 2 đã sử dụng một cú pháp từ khoá đơn cho thuộc displaytính, yêu cầu các từ khoá riêng biệt cho các biến thể cấp độ và cấp độ nội tuyến của cùng một chế độ bố trí. Chúng được định nghĩa như sau:
Giá trị Sự miêu tả
inline-block

Phần tử tạo ra một hộp phần tử khối sẽ được truyền với nội dung xung quanh như thể nó là một hộp nội tuyến đơn (hành xử giống như một phần tử được thay thế sẽ)

Nó tương đương với inline flow-root.

inline-list-item Giá trị này làm cho phần tử là một mục trong danh sách, với các hiệu ứng được mô tả ở trên. Ngoài ra, outsidegiá trị list-style-positiontính cho insidephần tử này. Nếu không, giá trị hiển thị này được xử lý giống hệt nhau.
inline-table

Các inline-table giá trị không có một ánh xạ trực tiếp trong HTML. Nó hoạt động như một <table>phần tử HTML, nhưng như một hộp nội tuyến, chứ không phải là một hộp cấp khối. Bên trong hộp bảng là một ngữ cảnh cấp khối.

Nó tương đương với inline table.

inline-flex

Phần tử hoạt động giống như một phần tử nội tuyến và trình bày nội dung của nó theo mô hình flexbox.

Nó tương đương với inline flex.

-webkit-inline-flex Bí danh cho inline-flex.
-moz-inline-box/ -webkit-inline-box Phần tử hoạt động giống như một hộp linh hoạt nội tuyến theo một đặc điểm kỹ thuật đã lỗi thời của Flexbox.
inline-grid Phần tử hoạt động giống như một phần tử nội tuyến và trình bày nội dung của nó theo mô hình lưới.

Cú pháp chính thức


<display-outside> = block | inline | run-in
<display-inside> = flow | flow-root | table | flex | grid | subgrid | ruby
<display-listitem> = list-item && <display-outside>? && [ flow | flow-root ]?
<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container
<display-box> = contents | none
<display-legacy> = inline-block | inline-list-item | inline-table | inline-flex | inline-grid

Nội dung HTML

<p>Visible text</p>
<p class="secret">Invisible text</p>

Nội dung CSS

p.secret {
  display: none;
}

XEM VÍ DỤ

Tóm lược bài học

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ế.

Ghi nguồn hoicode.com khi đăng tải lại bài viết này.
Link: Bài 07: Tìm hiểu thuộc tính display trong CSS
Tags: css cơ bản css display thuộc tính display inline block none
Category: CSS Cơ bản
Mạnh xã hội: Follow fanpage của team https://www.facebook.com/hoicode/ để tiếp tục theo dõi các loạt bài mới nhất về CSS Cơ bản,Java,C,C++,Javascript,HTML,PHP,Python,Database,Mobile.... mới nhất của chúng tôi.

Chia sẻ liên kết

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Facebook để được hỗ trợ nhanh nhất.

    Email của bạn sẽ được sử dụng với mục đích thông báo tin tuyển dụng mới hoặc các bài viết mới.

    captcha