Hiển thị thẻ trong HTML

Thuộc tính CSS display được chỉ định bằng các giá trị từ khóa

/* precomposed values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* box generation */
display: none;
display: contents;

/* two-value syntax */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;

/* Global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

Các giá trị từ khóa có thể được nhóm thành sáu loại giá trị

.container {
  display: inline flex;
}

Các từ khóa này chỉ định loại hiển thị bên ngoài của phần tử, về cơ bản là vai trò của nó trong bố cục luồng

.container {
  display: inline flex;
}

Phần tử tạo hộp phần tử khối, tạo ngắt dòng cả trước và sau phần tử khi ở luồng bình thường

.container {
  display: inline flex;
}

Phần tử tạo một hoặc nhiều hộp phần tử nội tuyến không tạo ngắt dòng trước hoặc sau chính chúng. Trong luồng bình thường, phần tử tiếp theo sẽ nằm trên cùng một dòng nếu có khoảng trống

Ghi chú. Các trình duyệt hỗ trợ cú pháp hai giá trị, khi chỉ tìm giá trị bên ngoài, chẳng hạn như khi chỉ định

.container {
  display: inline flex;
}

.container {
  display: inline flex;
}

.container {
  display: inline flex;
}

.container {
  display: inline flex;
}

Các từ khóa này chỉ định loại hiển thị bên trong của phần tử, xác định loại bối cảnh định dạng mà nội dung của nó được trình bày (giả sử đó là phần tử không được thay thế)

.container {
  display: inline flex;
}

Phần tử trình bày nội dung của nó bằng cách sử dụng bố cục luồng (bố cục khối và nội tuyến)

Nếu loại hiển thị bên ngoài của nó là

.container {
  display: inline flex;
}

.container {
  display: inline-flex;
}

Tùy thuộc vào giá trị của các thuộc tính khác (chẳng hạn như

.container {
  display: inline-flex;
}

.container {
  display: inline-flex;
}

.container {
  display: inline-flex;
}

.container {
  display: inline-flex;
}

Phần tử tạo ra một hộp phần tử khối thiết lập ngữ cảnh định dạng khối mới, xác định vị trí của gốc định dạng

.container {
  display: inline-flex;
}

Các phần tử này hoạt động giống như các phần tử

.container {
  display: inline-flex;
}

.container {
  display: inline-flex;
}

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

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

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

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

Phần tử này 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 phần tử HTML

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

Ghi chú. Các trình duyệt hỗ trợ cú pháp hai giá trị, khi chỉ tìm giá trị bên trong, chẳng hạn như khi chỉ định

.container {
  display: inline flex;
}

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

.container {
  display: inline flex;
}

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

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

Một giá trị duy nhất của

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

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

display = 
  [  ||  ]         |
                                  |
                                  |
                                       |
                                    |
   || [  | math ]  

 = 
  block   |
  inline  |
  run-in  

 = 
  flow       |
  flow-root  |
  table      |
  flex       |
  grid       |
  ruby       

 = 
  ?     &&
  [ flow | flow-root ]?  &&
  list-item              

 = 
  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  

 = 
  contents  |
  none      

 = 
  inline-block  |
  inline-table  |
  inline-flex   |
  inline-grid   

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

.container {
  display: inline flex;
}

.container {
  display: inline flex;
}

.container {
  display: inline-flex;
}

.container {
  display: inline flex;
}

Ghi chú. Trong các trình duyệt hỗ trợ cú pháp hai giá trị, nếu không có giá trị bên trong nào được chỉ định, nó sẽ mặc định là

.container {
  display: inline flex;
}

.container {
  display: inline flex;
}

display = 
  [  ||  ]         |
                                  |
                                  |
                                       |
                                    |
   || [  | math ]  

 = 
  block   |
  inline  |
  run-in  

 = 
  flow       |
  flow-root  |
  table      |
  flex       |
  grid       |
  ruby       

 = 
  ?     &&
  [ flow | flow-root ]?  &&
  list-item              

 = 
  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  

 = 
  contents  |
  none      

 = 
  inline-block  |
  inline-table  |
  inline-flex   |
  inline-grid   

Một số mô hình bố cục như

.container {
  display: inline-flex;
}

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

<article class="container">
  <span>Firstspan>
  <span>Secondspan>
  <span>Thirdspan>
article>

<article class="container">
  <span>Firstspan>
  <span>Secondspan>
  <span>Thirdspan>
article>

<div>
  <label for="display">Choose a display value:label>
  <select id="display">
    <option selected>blockoption>
    <option>inlineoption>
    <option>inline-blockoption>
    <option>noneoption>
    <option>flexoption>
    <option>inline-flexoption>
    <option>gridoption>
    <option>inline-gridoption>
    <option>tableoption>
    <option>list-itemoption>
  select>
div>

Các phần tử này hoạt động giống như các phần tử HTML của

<article class="container">
  <span>Firstspan>
  <span>Secondspan>
  <span>Thirdspan>
article>

<article class="container">
  <span>Firstspan>
  <span>Secondspan>
  <span>Thirdspan>
article>

<div>
  <label for="display">Choose a display value:label>
  <select id="display">
    <option selected>blockoption>
    <option>inlineoption>
    <option>inline-blockoption>
    <option>noneoption>
    <option>flexoption>
    <option>inline-flexoption>
    <option>gridoption>
    <option>inline-gridoption>
    <option>tableoption>
    <option>list-itemoption>
  select>
div>

<article class="container">
  <span>Firstspan>
  <span>Secondspan>
  <span>Thirdspan>
article>

<article class="container">
  <span>Firstspan>
  <span>Secondspan>
  <span>Thirdspan>
article>

<div>
  <label for="display">Choose a display value:label>
  <select id="display">
    <option selected>blockoption>
    <option>inlineoption>
    <option>inline-blockoption>
    <option>noneoption>
    <option>flexoption>
    <option>inline-flexoption>
    <option>gridoption>
    <option>inline-gridoption>
    <option>tableoption>
    <option>list-itemoption>
  select>
div>

Các phần tử này hoạt động giống như các phần tử HTML

<article class="container">
  <span>Firstspan>
  <span>Secondspan>
  <span>Thirdspan>
article>

<article class="container">
  <span>Firstspan>
  <span>Secondspan>
  <span>Thirdspan>
article>

<div>
  <label for="display">Choose a display value:label>
  <select id="display">
    <option selected>blockoption>
    <option>inlineoption>
    <option>inline-blockoption>
    <option>noneoption>
    <option>flexoption>
    <option>inline-flexoption>
    <option>gridoption>
    <option>inline-gridoption>
    <option>tableoption>
    <option>list-itemoption>
  select>
div>

<article class="container">
  <span>Firstspan>
  <span>Secondspan>
  <span>Thirdspan>
article>

<article class="container">
  <span>Firstspan>
  <span>Secondspan>
  <span>Thirdspan>
article>

<div>
  <label for="display">Choose a display value:label>
  <select id="display">
    <option selected>blockoption>
    <option>inlineoption>
    <option>inline-blockoption>
    <option>noneoption>
    <option>flexoption>
    <option>inline-flexoption>
    <option>gridoption>
    <option>inline-gridoption>
    <option>tableoption>
    <option>list-itemoption>
  select>
div>

Các phần tử này hoạt động giống như các phần tử HTML của

<article class="container">
  <span>Firstspan>
  <span>Secondspan>
  <span>Thirdspan>
article>

<article class="container">
  <span>Firstspan>
  <span>Secondspan>
  <span>Thirdspan>
article>

<div>
  <label for="display">Choose a display value:label>
  <select id="display">
    <option selected>blockoption>
    <option>inlineoption>
    <option>inline-blockoption>
    <option>noneoption>
    <option>flexoption>
    <option>inline-flexoption>
    <option>gridoption>
    <option>inline-gridoption>
    <option>tableoption>
    <option>list-itemoption>
  select>
div>

<article class="container">
  <span>Firstspan>
  <span>Secondspan>
  <span>Thirdspan>
article>

<article class="container">
  <span>Firstspan>
  <span>Secondspan>
  <span>Thirdspan>
article>

<div>
  <label for="display">Choose a display value:label>
  <select id="display">
    <option selected>blockoption>
    <option>inlineoption>
    <option>inline-blockoption>
    <option>noneoption>
    <option>flexoption>
    <option>inline-flexoption>
    <option>gridoption>
    <option>inline-gridoption>
    <option>tableoption>
    <option>list-itemoption>
  select>
div>

Các phần tử này hoạt động giống như các phần tử HTML của

<article class="container">
  <span>Firstspan>
  <span>Secondspan>
  <span>Thirdspan>
article>

<article class="container">
  <span>Firstspan>
  <span>Secondspan>
  <span>Thirdspan>
article>

<div>
  <label for="display">Choose a display value:label>
  <select id="display">
    <option selected>blockoption>
    <option>inlineoption>
    <option>inline-blockoption>
    <option>noneoption>
    <option>flexoption>
    <option>inline-flexoption>
    <option>gridoption>
    <option>inline-gridoption>
    <option>tableoption>
    <option>list-itemoption>
  select>
div>

<article class="container">
  <span>Firstspan>
  <span>Secondspan>
  <span>Thirdspan>
article>

<article class="container">
  <span>Firstspan>
  <span>Secondspan>
  <span>Thirdspan>
article>

<div>
  <label for="display">Choose a display value:label>
  <select id="display">
    <option selected>blockoption>
    <option>inlineoption>
    <option>inline-blockoption>
    <option>noneoption>
    <option>flexoption>
    <option>inline-flexoption>
    <option>gridoption>
    <option>inline-gridoption>
    <option>tableoption>
    <option>list-itemoption>
  select>
div>

Các phần tử này hoạt động giống như các phần tử HTML

html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
  padding-top: 10px;
}

article {
  background-color: red;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

article,
div {
  margin: 20px;
}

html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
  padding-top: 10px;
}

article {
  background-color: red;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

article,
div {
  margin: 20px;
}

Các phần tử này hoạt động giống như các phần tử HTML của

html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
  padding-top: 10px;
}

article {
  background-color: red;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

article,
div {
  margin: 20px;
}

html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
  padding-top: 10px;
}

article {
  background-color: red;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

article,
div {
  margin: 20px;
}

Các phần tử này hoạt động giống như các phần tử HTML

html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
  padding-top: 10px;
}

article {
  background-color: red;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

article,
div {
  margin: 20px;
}

html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
  padding-top: 10px;
}

article {
  background-color: red;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

article,
div {
  margin: 20px;
}

Các phần tử này hoạt động giống như các phần tử HTML của

html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
  padding-top: 10px;
}

article {
  background-color: red;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

article,
div {
  margin: 20px;
}

html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
  padding-top: 10px;
}

article {
  background-color: red;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

article,
div {
  margin: 20px;
}

Các phần tử này hoạt động giống như các phần tử HTML của

html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
  padding-top: 10px;
}

article {
  background-color: red;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

article,
div {
  margin: 20px;
}

html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
  padding-top: 10px;
}

article {
  background-color: red;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

article,
div {
  margin: 20px;
}

Các phần tử này hoạt động giống như các phần tử HTML

const articles = document.querySelectorAll('.container');
const select = document.querySelector('select');

function updateDisplay() {
  articles.forEach((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener('change', updateDisplay);

updateDisplay();

const articles = document.querySelectorAll('.container');
const select = document.querySelector('select');

function updateDisplay() {
  articles.forEach((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener('change', updateDisplay);

updateDisplay();

Các phần tử này được tạo dưới dạng hộp ẩn danh

const articles = document.querySelectorAll('.container');
const select = document.querySelector('select');

function updateDisplay() {
  articles.forEach((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener('change', updateDisplay);

updateDisplay();

Các phần tử này hoạt động giống như các phần tử HTML

const articles = document.querySelectorAll('.container');
const select = document.querySelector('select');

function updateDisplay() {
  articles.forEach((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener('change', updateDisplay);

updateDisplay();

const articles = document.querySelectorAll('.container');
const select = document.querySelector('select');

function updateDisplay() {
  articles.forEach((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener('change', updateDisplay);

updateDisplay();

Các giá trị này xác định liệu một phần tử có tạo hộp hiển thị hay không

const articles = document.querySelectorAll('.container');
const select = document.querySelector('select');

function updateDisplay() {
  articles.forEach((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener('change', updateDisplay);

updateDisplay();

Các yếu tố này không tự tạo ra một hộp cụ thể. Chúng được thay thế bằng hộp giả và hộp con của chúng. Xin lưu ý rằng thông số CSS Hiển thị Cấp 3 xác định cách giá trị

const articles = document.querySelectorAll('.container');
const select = document.querySelector('select');

function updateDisplay() {
  articles.forEach((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener('change', updateDisplay);

updateDisplay();

const articles = document.querySelectorAll('.container');
const select = document.querySelector('select');

function updateDisplay() {
  articles.forEach((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener('change', updateDisplay);

updateDisplay();

Tắt hiển thị một phần tử để 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 hiển thị. Để có một phần tử chiếm không gian mà nó thường chiếm, nhưng không thực sự hiển thị bất kỳ thứ gì, hãy sử dụng thuộc tính

const articles = document.querySelectorAll('.container');
const select = document.querySelector('select');

function updateDisplay() {
  articles.forEach((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener('change', updateDisplay);

updateDisplay();

const articles = document.querySelectorAll('.container');
const select = document.querySelector('select');

function updateDisplay() {
  articles.forEach((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener('change', updateDisplay);

updateDisplay();

CSS 2 đã sử dụng một từ khóa đơn, cú pháp soạn trước cho thuộc tính display, yêu cầu các từ khóa riêng biệt cho các biến thể cấp khối và cấp nội tuyến của cùng một chế độ bố cục

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

Nó tương đương với display2

Giá trị display3 không có ánh xạ trực tiếp trong HTML. Nó hoạt động giống như một phần tử HTML

.container {
  display: inline-flex;
}

Nó tương đương với display6

Phần tử hoạt động giống như một phần tử nội tuyến và sắp xếp nội dung của nó theo mô hình flexbox

Nó tương đương với display8

Phần tử này 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

Nó tương đương với display0

Thông số kỹ thuật Cấp 3 nêu chi tiết hai giá trị cho thuộc tính display — cho phép xác định rõ ràng thông số kỹ thuật của loại hiển thị bên ngoài và bên trong — nhưng điều này chưa được các trình duyệt hỗ trợ tốt

Các phương pháp

const articles = document.querySelectorAll('.container');
const select = document.querySelector('select');

function updateDisplay() {
  articles.forEach((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener('change', updateDisplay);

updateDisplay();

.container {
  display: inline flex;
}

Điều này hiện có thể được chỉ định bằng một giá trị duy nhất

.container {
  display: inline-flex;
}

Để biết thêm thông tin về những thay đổi này đối với thông số kỹ thuật, hãy xem bài viết Thích ứng với cú pháp hiển thị hai giá trị mới

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

Các trang riêng lẻ dành cho các loại giá trị khác nhau mà display có thể đặt trên đó có nhiều ví dụ về các giá trị đó đang hoạt động — xem phần. Ngoài ra, hãy xem tài liệu sau, bao gồm các giá trị khác nhau của màn hình theo chiều sâu

• Thích ứng với cú pháp hiển thị hai giá trị mới

• Bố cục khối và nội tuyến trong quy trình bình thường
• Bố cục luồng và tràn
• Bố cục luồng và chế độ viết
• Bối cảnh định dạng được giải thích
• Trong dòng chảy và ngoài dòng chảy

• Khái niệm cơ bản về flexbox
• Căn chỉnh các mục trong Flex Container
• Kiểm soát tỷ lệ của các mục linh hoạt dọc theo trục chính
• Làm chủ gói các mặt hàng linh hoạt
• Đặt hàng linh hoạt
• Mối quan hệ của flexbox với các phương pháp bố trí khác
• Các trường hợp sử dụng điển hình của Flexbox

• Các khái niệm cơ bản về bố cục lưới
• Mối quan hệ với các phương pháp bố trí khác
• Vị trí dựa trên dòng
• Khu vực mẫu lưới
• Bố cục sử dụng các đường lưới được đặt tên
• Tự động đặt trong bố cục lưới
• Căn chỉnh hộp trong bố cục lưới
• Lưới, giá trị logic và chế độ viết
• Bố cục lưới CSS và khả năng truy cập
• Bố cục lưới CSS và cải tiến lũy tiến
• Nhận ra các bố cục phổ biến bằng cách sử dụng lưới

Sử dụng giá trị display của

const articles = document.querySelectorAll('.container');
const select = document.querySelector('select');

function updateDisplay() {
  articles.forEach((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener('change', updateDisplay);

updateDisplay();

Nếu bạn muốn ẩn phần tử một cách trực quan, một giải pháp thay thế dễ tiếp cận hơn là sử dụng để xóa phần tử đó một cách trực quan khỏi màn hình nhưng giữ cho phần tử đó có thể phân tích cú pháp bằng công nghệ hỗ trợ, chẳng hạn như trình đọc màn hình

Việc triển khai hiện tại trong một số trình duyệt sẽ xóa khỏi bất kỳ phần tử nào có giá trị display là

const articles = document.querySelectorAll('.container');
const select = document.querySelector('select');

function updateDisplay() {
  articles.forEach((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener('change', updateDisplay);

updateDisplay();

• Đánh dấu dễ tiếp cận hơn với màn hình. nội dung. Hide de Vries
• Trưng bày. Nội dung không phải là thiết lập lại CSS. Adrian Roselli

Thay đổi giá trị display của phần tử

.container {
  display: inline-flex;
}

.container {
  display: inline flex;
}

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

.container {
  display: inline-flex;
}

• Ghi chú ngắn về tác dụng của các thuộc tính hiển thị CSS đối với ngữ nghĩa của bảng — The Paciello Group
• Nội dung ẩn cho a11y tốt hơn. đi làm mọi thứ
• Hiểu Tiêu chí Thành công 1. 3. 1. W3C Hiểu WCAG 2. 0

Giá trị ban đầu_______0_______5Áp dụng cho tất cả các phần tửInheritednoComputed valuelà giá trị đã chỉ định, ngoại trừ các phần tử được định vị và thả nổi cũng như phần tử gốc. Trong cả hai trường hợp, giá trị được tính toán có thể là một từ khóa khác với từ khóa đã chỉ định. Loại hoạt hìnhKhông thể hoạt hình

display = 
  [  ||  ]         |
                                  |
                                  |
                                       |
                                    |
   || [  | math ]  

 = 
  block   |
  inline  |
  run-in  

 = 
  flow       |
  flow-root  |
  table      |
  flex       |
  grid       |
  ruby       

 = 
  ?     &&
  [ flow | flow-root ]?  &&
  list-item              

 = 
  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  

 = 
  contents  |
  none      

 = 
  inline-block  |
  inline-table  |
  inline-flex   |
  inline-grid   

Trong ví dụ này, chúng ta có hai phần tử vùng chứa cấp khối, mỗi phần tử có ba phần tử con nội tuyến. Bên dưới đó, chúng tôi có một menu chọn cho phép bạn áp dụng các giá trị display khác nhau cho các vùng chứa, cho phép bạn so sánh và đối chiếu cách các giá trị khác nhau ảnh hưởng đến bố cục của phần tử và phần tử con của chúng.

Chúng tôi đã bao gồm

.container {
  display: inline flex;
}

.container {
  display: inline flex;
}

Ghi chú. Chúng tôi chưa bao gồm bất kỳ cú pháp hai giá trị hiện đại nào vì hỗ trợ cho cú pháp đó vẫn còn khá hạn chế

Các thẻ HTML dùng để hiển thị là gì?

Có thể hiển thị các thẻ HTML trong trang web không?

Làm cách nào để hiển thị các thẻ HTML dưới dạng văn bản thuần túy bằng PHP?

Làm cách nào để hiển thị các thẻ HTML trong JavaScript?