Thuộc Tính Display | CSS | Học Web Chuẩn
Có thể bạn quan tâm
- Trang chủ
- Tham khảo
- CSS
- Thuộc tính display
Định nghĩa và sử dụng
Thuộc tính display xác định loại hiển thị của thành phần.
Cấu trúc
tag { display: giá trị; }Với giá trị như sau:
Thuộc tính | giá trị | Ví dụ | Mô tả |
---|---|---|---|
display | block | display: block; | Thành phần hiển thị như một khối, khi sử dụng giá trị block thành phần sẽ đứng một hàng độc lập so với thành phần trước và sau nó. |
inline | display: inline; | Thành phần sẽ hiển thị như một nội tuyến (inline, không ngắt dòng), đây là dạng mặc định. | |
inline-block | display: inline-block; | Thành phần sẽ hiển thị như một khối, nhưng là một khối nội tuyến. | |
inline-table | display: inline-table; | Thành phần sẽ hiển thị như một khối nội tuyến, đối xử tương tự <table>, không ngắt dòng trước và sau thành phần. | |
list-item | display: list-item; | Thành phần sẽ hiển thị như một khối và một nội tuyến cho các điểm đánh dấu danh sách. | |
none | display: none; | Thành phần không hiển thị. | |
run-in | display: run-in; | Thành phần sẽ hiển thị như một khối hoặc một nội tuyến, tùy thuộc vào bối cảnh. | |
table | display: table; | Thành phần sẽ đối xử như một table, ngắt dòng trước và sau thành phần. | |
table-caption | display: table-caption; | Thành phần sẽ đối xử như một <caption> của table. | |
table-cell | display: table-cell; | Thành phần sẽ đối xử như một ô trong table. | |
table-column | display: table-column; | Thành phần sẽ đối xử như một cột trong table. | |
table-column-group | display: table-column-group; | Thành phần sẽ đối xử như một nhóm cột (<colgroup>) trong table. | |
table-footer-group | display: table-footer-group; | Thành phần sẽ đối xử như một nhóm footer (<tfoot>) trong table. | |
table-header-group | display: table-header-group; | Thành phần sẽ đối xử như một nhóm header (<thead>) trong table. | |
table-row | display: table-row; | Thành phần sẽ đối xử như một hàng trong table. | |
table-row-group | display: table-row-group; | Thành phần sẽ đối xử như một nhóm hàng trong table. | |
inherit | display: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). |
Ví dụ
Xem thêm ví dụ
HTML viết:
<html> <head></head> <body> <p>HỌC WEB CHUẨN : </p> <p>Kiến thức nhỏ cho web hiện đại</p> </body> </html>Hiển thị trình duyệt khi chưa có CSS:
HỌC WEB CHUẨN :
Kiến thức nhỏ cho web hiện đại
CSS viết:
p { display: inline; }Hiển thị trình duyệt khi có CSS:
HỌC WEB CHUẨN :
Kiến thức nhỏ cho web hiện đại
Trình duyệt hỗ trợ
Thuộc tính display được hỗ trợ trong đa số các trình duyệt.
Giá trị "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group", "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype
Link liên quan
- HTML/XHTML
- CSS
- class
- <html></html>
- <head></head>
- <body></body>
- <colgroup></colgroup>
- <table></table>
- <tfoot></tfoot>
- <thead></thead>
- <caption></caption>
- <p></p>
direction
empty-cells
CSS
HƯỚNG DẪN HỌC
- Hướng dẫn học
- Hướng dẫn học XHTML & HTML5
- Hướng dẫn học CSS
- Hướng dẫn học CSS3
- Hướng dẫn học Responsive
- Hướng dẫn học ES6
- Hướng dẫn học React.js
- Hướng dẫn học jQuery
- Hướng dẫn học PHP
- Hướng dẫn học Laravel
- Hướng dẫn học Wordpress
- Hướng dẫn học Webpack
- Hướng dẫn học SCSS
THAM KHẢO
Thuộc tính CSS
- background
- border
- border-collapse
- border-spacing
- bottom
- caption-side
- clear
- clip
- color
- content
- counter-increment
- counter-reset
- cursor
- direction
- display
- empty-cells
- float
- font
- height
- left
- letter-spacing
- line-height
- list-style
- margin
- max-height
- max-width
- min-height
- min-width
- outline
- overflow
- padding
- page-break-after
- page-break-before
- page-break-inside
- position
- quotes
- right
- table-layout
- text-align
- text-decoration
- text-indent
- text-transform
- top
- vertical-align
- visibility
- white-space
- width
- word-spacing
- z-index
Tham khảo CSS
- CSS - Tham khảo
- CSS - Bộ chọn (selectors)
- CSS - Thuộc tính
- CSS3 - Tham khảo
- CSS3 - Bộ chọn (selectors)
- CSS3 - Thuộc tính
- Xem thêm ví dụ về CSS
Tham khảo HTML/XHTML
- Tham khảo HTML/XHTML
- Tag theo function
- Tag theo giá trị DTD
- Tham khảo HTML4/XHTML
- Tham khảo HTML5
- Xem thêm ví dụ về HTML
Tham khảo JQUERY
- jQuery - Tham khảo
- jQuery - Cài đặt và sử dụng
- jQuery - Bộ chọn (selectors)
- jQuery - Hàm (function)
- jQuery - Ajax
Tham khảo Thêm
- Lang codes
- Font chữ
- Mã ký tự
- MIME
- Đơn vị trong HTML & CSS
- Giá trị màu trong HTML & CSS
- Thuộc tính tổng quát
CHUYÊN ĐỀ
- Chuyên đề
- Chuyên đề HTML/CSS
- Chuyên đề HTML5/CSS3
- Chuyên đề jQuery/JS
- jQuery/JS plugin
Góp ý - Liên hệ
- CÔNG CỤ TẠO CSS3CSS3 GENERATOR
- BỘ CÔNG CỤGENERATOR TOOLS
- CÔNG CỤ HỖ TRỢWEB TOOLS
- CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
- CÔNG CỤ KIỂM TRA RESPONSIVE TEST
- CHIA SẺ HAYWEB & TOOLS
Từ khóa » Cách Dùng Display Trong Css
-
Thuộc Tính Display Trong CSS
-
Giới Thiệu Thuộc Tính Display Trong CSS - Viblo
-
Thuộc Tính Display Trong CSS
-
Thuộc Tính Display Trong CSS (inline - Block -none)
-
Hướng Dẫn Và Ví Dụ CSS Display - Openplanning
-
Display Trong CSS
-
Thuộc Tính Display (inline-block) Trong CSS
-
Thuộc Tính Display Trong CSS - Quản Trị Máy Tính
-
Display Là Gì? Display Có Nghĩa Gì Và Cách Dùng Trong CSS Là Gì?
-
Thiết Lập Kiểu Hiển Thị Của Phần Tử Bằng Thuộc Tính Display Trong CSS
-
Về Thuộc Tính Display Trong CSS - ge
-
Thuộc Tính Display Trong CSS (inline - Block) - Quách Quỳnh
-
Thuộc Tính Display Trong CSS - Hoclaptrinh
-
Học CSS - Tìm Hiểu Thuộc Tính "display" - Thạch Phạm