Thuộc tính display
là thuộc tính CSS quan trọng nhất để kiểm soát bố cục.
Thuộc tính hiển thị
Thuộc tính display
chỉ định nếu/làm thế nào một phần tử được hiển thị.
Mỗi phần tử HTML có giá trị hiển thị mặc định tùy thuộc vào loại phần tử. Giá trị hiển thị mặc định cho hầu hết các yếu tố là block
hoặc inline
.
Bấm để hiển thị bảng điều khiển
Bảng điều khiển này chứa một phần tử, được ẩn theo mặc định [display: none
].
Nó được tạo kiểu với CSS và chúng tôi sử dụng JavaScript để hiển thị nó [thay đổi nó thành [display: block
].
Các yếu tố cấp khối
Một phần tử cấp khối luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn [trải dài sang trái và phải càng xa càng tốt].
Phần tử là một phần tử cấp khối.
Ví dụ về các yếu tố cấp khối:
- -
-
Các yếu tố nội tuyến
Một phần tử nội tuyến không bắt đầu trên một dòng mới và chỉ chiếm nhiều chiều rộng khi cần thiết.an inline element inside a paragraph.
Đây là một yếu tố nội tuyến bên trong một đoạn văn.
4[hidden] { display: none; }
Thay đổi một phần tử nội tuyến thành một phần tử khối hoặc ngược lại, có thể hữu ích để làm cho trang nhìn theo một cách cụ thể và vẫn tuân theo các tiêu chuẩn web.
Một ví dụ phổ biến là tạo ra các yếu tố
1 cho các menu ngang:[hidden] { display: none; }
Lưu ý: Đặt thuộc tính hiển thị của một phần tử chỉ thay đổi cách hiển thị phần tử, không phải là loại phần tử nào. Vì vậy, một phần tử nội tuyến với
2 không được phép có các phần tử khối khác bên trong nó.[hidden] { display: none; }
Ví dụ sau hiển thị các phần tử dưới dạng các phần tử khối:
Ẩn một phần tử - Hiển thị: Không có hoặc khả năng hiển thị: Hidden?
Cài lại
This example demonstrates display: none; versus visibility: hidden;Việc ẩn một phần tử có thể được thực hiện bằng cách đặt thuộc tính
display
thành
6. Phần tử sẽ bị ẩn và trang sẽ được hiển thị như thể phần tử không có ở đó:[hidden] { display: none; }
This example demonstrates how to use CSS and JavaScript to show an element on click.
7 cũng che giấu một yếu tố.[hidden] { display: none; }
Tuy nhiên, phần tử vẫn sẽ chiếm cùng một không gian như trước đây. Phần tử sẽ bị ẩn, nhưng vẫn ảnh hưởng đến bố cục:Nhiều ví dụ hơn Sự khác biệt giữa hiển thị: Không có; và khả năng hiển thị: ẩn; Ví dụ này thể hiện hiển thị: Không có; so với khả năng hiển thị: ẩn; Sử dụng CSS cùng với JavaScript để hiển thị nội dung Ví dụ này cho thấy cách sử dụng CSS và JavaScript để hiển thị một phần tử trên nhấp chuột. Thuộc tính hiển thị/hiển thị CSS Tài sản
Có nhiều cách để ẩn một yếu tố trong CSS, nhưng chúng khác nhau về cách chúng ảnh hưởng đến khả năng tiếp cận, bố cục, hoạt hình, hiệu suất và xử lý sự kiện.
Hoạt hình
Một số tùy chọn ẩn CSS là tất cả hoặc không có gì. Phần tử này có thể nhìn thấy đầy đủ hoặc vô hình và không có trạng thái ở giữa. Những người khác, chẳng hạn như tính minh bạch, có thể có một loạt các giá trị, do đó các hình ảnh động CSS được nội suy trở nên có thể.
Khả năng tiếp cận
Mỗi phương thức được mô tả dưới đây sẽ ẩn trực quan một phần tử, nhưng nó có thể hoặc không thể ẩn nội dung khỏi các công nghệ hỗ trợ. Ví dụ, một đầu đọc màn hình vẫn có thể thông báo văn bản trong suốt nhỏ. Các thuộc tính CSS hoặc các thuộc tính ARIA như
8 có thể là cần thiết để mô tả hành động thích hợp.[hidden] { display: none; }
Hãy cảnh giác rằng hoạt hình cũng có thể gây ra sự mất phương hướng, đau nửa đầu, co giật hoặc khó chịu về thể chất khác cho một số người. Xem xét sử dụng truy vấn phương tiện
9 để tắt hình ảnh động khi được chỉ định trong tùy chọn người dùng.[hidden] { display: none; }
Xử lý sự kiện
Hiding sẽ dừng các sự kiện được kích hoạt trên phần tử đó hoặc không có hiệu lực - nghĩa là, phần tử không hiển thị nhưng vẫn có thể được nhấp hoặc nhận các tương tác người dùng khác.
Màn biểu diễn
Sau khi trình duyệt tải và phân tích mô hình đối tượng HTML DOM và CSS, trang được hiển thị trong ba giai đoạn:
- Bố cục: Tạo hình học và vị trí của từng phần tử generate the geometry and position of each element
- Sơn: Vẽ ra các pixel cho mỗi phần tử draw out the pixels for each element
- Thành phần: Các lớp phần tử vị trí theo thứ tự thích hợp: position element layers in the appropriate order
Một hiệu ứng chỉ gây ra sự thay đổi thành phần là mượt mà hơn đáng kể so với những ảnh hưởng đến bố cục. Trong một số trường hợp, trình duyệt cũng có thể sử dụng gia tốc phần cứng.
1.
display
0 vàdisplay
1Các thuộc tính
display
2 vàdisplay
3 có thể được truyền một số từ 0 đến 1, hoặc tỷ lệ phần trăm từ 0% đến 100% biểu thị hoàn toàn trong suốt và hoàn toàn mờ đục.Xem Bút ẩn với Opacity: 0 bởi SitePoint [@SitePoint] trên CodePen.
hide with opacity: 0 by SitePoint [@SitePoint]
on CodePen.Có rất ít sự khác biệt thực tế giữa hai trong các trình duyệt hiện đại, mặc dù
display
4 nên được sử dụng nếu nhiều hiệu ứng được áp dụng cùng một lúc [mờ, tương phản, thang độ xám, v.v.]Opacity có thể được hoạt hình và cung cấp hiệu suất tuyệt vời, nhưng hãy cảnh giác rằng một yếu tố hoàn toàn trong suốt vẫn còn trên trang và có thể kích hoạt các sự kiện.
Hệ méthiệu ứng Hỗ trợ trình duyệt Tốt, nhưng IE chỉ hỗ trợ display
0 0 đến 1khả năng tiếp cận Nội dung không đọc nếu 0 hoặc 0% được đặt Bố cục bị ảnh hưởng? không yêu cầu kết xuất thành phần màn biểu diễn Tốt nhất, có thể sử dụng tăng tốc phần cứng Khung hoạt hình có thể? Vâng Các sự kiện được kích hoạt khi ẩn? Vâng Các sự kiện được kích hoạt khi ẩn?
2.
display
6 Tính minh bạch Alphadisplay
0 ảnh hưởng đến toàn bộ phần tử, nhưng nó cũng có thể đặt các thuộc tínhdisplay
6,display
9 vàdisplay
0 riêng biệt. Áp dụng kênh alpha bằng không bằng cách sử dụngdisplay
1 hoặc tương tự hiển thị một mục hoàn toàn trong suốt:
hide with color alpha by SitePoint [@SitePoint]
on CodePen.Xem Bút ẩn với Color Alpha bởi SitePoint [@SitePoint] trên CodePen.
Mỗi thuộc tính có thể được hoạt hình riêng biệt để tạo hiệu ứng thú vị. Lưu ý rằng tính minh bạch có thể được áp dụng cho các phần tử với nền hình ảnh trừ khi chúng được tạo bằng cách sử dụng
display
2 hoặc tương tự.- Kênh Alpha có thể được đặt bằng:
display
3: Không thể minh bạch hoàn toàn [không thể giữa các hình ảnh động]]display
4: Đỏ, xanh lá cây, xanh dương và alphadisplay
5: Huế, bão hòa, nhẹ và alpha
Hệ méthiệu ứng Hỗ trợ trình duyệt Tốt, nhưng IE chỉ hỗ trợ display
0 0 đến 1khả năng tiếp cận Nội dung không đọc nếu 0 hoặc 0% được đặt Bố cục bị ảnh hưởng? không yêu cầu kết xuất thành phần màn biểu diễn Tốt nhất, có thể sử dụng tăng tốc phần cứng Khung hoạt hình có thể? Vâng Các sự kiện được kích hoạt khi ẩn? Vâng Các sự kiện được kích hoạt khi ẩn?
2.
display
6 Tính minh bạch Alphadisplay
0 ảnh hưởng đến toàn bộ phần tử, nhưng nó cũng có thể đặt các thuộc tínhdisplay
6,display
9 vàdisplay
0 riêng biệt. Áp dụng kênh alpha bằng không bằng cách sử dụngdisplay
1 hoặc tương tự hiển thị một mục hoàn toàn trong suốt:
hide with transform: scale[0]; by SitePoint [@SitePoint]
on CodePen.Xem Bút ẩn với Color Alpha bởi SitePoint [@SitePoint] trên CodePen.
Hệ méthiệu ứng Hỗ trợ trình duyệt tốt khả năng tiếp cận Nội dung vẫn đọc Bố cục bị ảnh hưởng? Không - Kích thước ban đầu vẫn còn yêu cầu kết xuất thành phần màn biểu diễn Tốt nhất, có thể sử dụng tăng tốc phần cứng Khung hoạt hình có thể? Vâng Các sự kiện được kích hoạt khi ẩn? không 4.
block
6Thuộc tính
block
6 tạo ra một vùng cắt xác định phần nào của phần tử có thể nhìn thấy. Sử dụng một giá trị nhưblock
8 sẽ ẩn hoàn toàn phần tử.Xem Bút ẩn với clip-path của SitePoint [@SitePoint] trên CodePen.
hide with clip-path by SitePoint [@SitePoint]
on CodePen.block
6 cung cấp phạm vi cho các hoạt hình thú vị, mặc dù nó chỉ nên dựa vào các trình duyệt hiện đại.Hệ méthiệu ứng Hỗ trợ trình duyệt tốt khả năng tiếp cận Nội dung vẫn đọc Bố cục bị ảnh hưởng? Không - Kích thước ban đầu vẫn còn yêu cầu kết xuất thành phần màn biểu diễn Tốt nhất, có thể sử dụng tăng tốc phần cứng Khung hoạt hình có thể? Vâng Các sự kiện được kích hoạt khi ẩn? không 4.
block
6Thuộc tính
block
6 tạo ra một vùng cắt xác định phần nào của phần tử có thể nhìn thấy. Sử dụng một giá trị nhưblock
8 sẽ ẩn hoàn toàn phần tử.Xem Bút ẩn với clip-path của SitePoint [@SitePoint] trên CodePen.
hide with visibility: hidden by SitePoint [@SitePoint]
on CodePen.block
6 cung cấp phạm vi cho các hoạt hình thú vị, mặc dù nó chỉ nên dựa vào các trình duyệt hiện đại.Hệ méthiệu ứng Hỗ trợ trình duyệt Chỉ dành cho các trình duyệt hiện đại khả năng tiếp cận Nội dung vẫn đọc Bố cục bị ảnh hưởng? Không - Kích thước ban đầu vẫn còn yêu cầu kết xuất thành phần màn biểu diễn tốt Khung hoạt hình có thể? không Các sự kiện được kích hoạt khi ẩn? không 4.
block
6Thuộc tính
block
6 tạo ra một vùng cắt xác định phần nào của phần tử có thể nhìn thấy. Sử dụng một giá trị nhưblock
8 sẽ ẩn hoàn toàn phần tử.Xem Bút ẩn với clip-path của SitePoint [@SitePoint] trên CodePen.
hide with display: none by SitePoint [@SitePoint]
on CodePen.block
6 cung cấp phạm vi cho các hoạt hình thú vị, mặc dù nó chỉ nên dựa vào các trình duyệt hiện đại.Chỉ dành cho các trình duyệt hiện đại
Hệ méthiệu ứng Hỗ trợ trình duyệt Chỉ dành cho các trình duyệt hiện đại khả năng tiếp cận Nội dung vẫn đọc Bố cục bị ảnh hưởng? Vâng yêu cầu kết xuất thành phần màn biểu diễn Tốt nhất, có thể sử dụng tăng tốc phần cứng Khung hoạt hình có thể? không Các sự kiện được kích hoạt khi ẩn? không 4.
block
6Hidden content
Thuộc tính
block
6 tạo ra một vùng cắt xác định phần nào của phần tử có thể nhìn thấy. Sử dụng một giá trị nhưblock
8 sẽ ẩn hoàn toàn phần tử.[hidden] { display: none; }
Xem Bút ẩn với clip-path của SitePoint [@SitePoint] trên CodePen.
block
6 cung cấp phạm vi cho các hoạt hình thú vị, mặc dù nó chỉ nên dựa vào các trình duyệt hiện đại.Chỉ dành cho các trình duyệt hiện đại
Nội dung vẫn được đọc bởi một số ứng dụng
hide with position: absolute by SitePoint [@SitePoint]
on CodePen.Hệ méthiệu ứng Hỗ trợ trình duyệt sơn khả năng tiếp cận Nội dung vẫn đọc Bố cục bị ảnh hưởng? Không - Kích thước ban đầu vẫn còn yêu cầu kết xuất thành phần màn biểu diễn Tốt nhất, có thể sử dụng tăng tốc phần cứng Khung hoạt hình có thể? Vâng Các sự kiện được kích hoạt khi ẩn? không 4.
block
6Thuộc tính
block
6 tạo ra một vùng cắt xác định phần nào của phần tử có thể nhìn thấy. Sử dụng một giá trị nhưblock
8 sẽ ẩn hoàn toàn phần tử.Xem Bút ẩn với clip-path của SitePoint [@SitePoint] trên CodePen.
hide with an overlay by SitePoint [@SitePoint]
on CodePen.block
6 cung cấp phạm vi cho các hoạt hình thú vị, mặc dù nó chỉ nên dựa vào các trình duyệt hiện đại.Hệ méthiệu ứng Hỗ trợ trình duyệt Chỉ dành cho các trình duyệt hiện đại khả năng tiếp cận Nội dung vẫn đọc Bố cục bị ảnh hưởng? Không - Kích thước ban đầu vẫn còn yêu cầu kết xuất thành phần màn biểu diễn Tốt nhất, có thể sử dụng tăng tốc phần cứng Khung hoạt hình có thể? Vâng Các sự kiện được kích hoạt khi ẩn? không 4.
block
6Thuộc tính
block
6 tạo ra một vùng cắt xác định phần nào của phần tử có thể nhìn thấy. Sử dụng một giá trị nhưblock
8 sẽ ẩn hoàn toàn phần tử.Xem Bút ẩn với clip-path của SitePoint [@SitePoint] trên CodePen.
hide with width or height by SitePoint [@SitePoint]
on CodePen.block
6 cung cấp phạm vi cho các hoạt hình thú vị, mặc dù nó chỉ nên dựa vào các trình duyệt hiện đại.Hệ méthiệu ứng Hỗ trợ trình duyệt Chỉ dành cho các trình duyệt hiện đại khả năng tiếp cận Nội dung vẫn đọc Bố cục bị ảnh hưởng? Vâng yêu cầu kết xuất cách trình bày màn biểu diễn nghèo Khung hoạt hình có thể? Vâng Các sự kiện được kích hoạt khi ẩn? không display: none
là giải pháp yêu thích để ẩn các yếu tố trong nhiều năm, nhưng nó đã được thay thế bởi các tùy chọn linh hoạt hơn, khả thi hơn. Nó vẫn còn hợp lệ, nhưng có lẽ chỉ khi bạn muốn ẩn nội dung vĩnh viễn từ tất cả người dùng.block
1 hoặcdisplay
0 là những lựa chọn tốt hơn khi xem xét hiệu suất.Đưa kỹ năng CSS của bạn lên một tầm cao mới với CSS Master. Tìm hiểu kiến trúc CSS, gỡ lỗi, thuộc tính tùy chỉnh, kỹ thuật bố cục và hoạt hình nâng cao, cách sử dụng CSS với SVG, v.v.
Làm thế nào để bạn ẩn một kiểu nguyên tố?
Để ẩn một phần tử, hãy đặt thuộc tính Hiển thị kiểu thành không có.tài liệu.getEuityById ["phần tử"].Phong cách.set the style display property to “none”. document. getElementById["element"]. style.Làm cách nào để ẩn một phần tử div?
Vì vậy, những gì bạn làm là đặt một nơi các chi tiết nên đi.Làm cách nào để ẩn một phần tử mà không hiển thị không?
Làm thế nào tôi có thể ẩn div mà không cần sử dụng hiển thị: Không có hoặc JavaScript ?..Sử dụng chỉ số Z để đặt nó phía sau một số yếu tố khác ..Di chuyển nó ra khỏi màn hình bằng cách định vị tuyệt đối ..Khả năng có khả năng: ẩn ..Làm cho nội dung "vô hình" bằng cách đặt nền thành màu nền trước [chỉ hoạt động cho văn bản].Độ mờ: 0 ..Làm thế nào để bạn ẩn một phần tử trong trang web?
CSS hiển thị thuộc tính.Mỗi phần tử có một giá trị hiển thị mặc định như khối nội tuyến, khối, bảng ..ETC.Để ẩn một phần tử với thuộc tính hiển thị, chúng ta nên sử dụng hiển thị: Không có.Khi một phần tử được ẩn với màn hình: Không có, tất cả các hậu duệ của nó sẽ bị xóa cùng với nó.display: none . When an element is hidden with display: none , all of its descendants will be removed along with it.
Chủ Đề