5
Sự khác nhau giữa thiết lập kiểu điều khiển display: none và display: block là gì?Sự khác biệt giữa không hiển thị và khối hiển thị
A
Trả lời
10
Thuộc tính hiển thị xác định cách hiển thị phần tử HTML nhất định. Hiển thị block và none được sử dụng để hiển thị hoặc ẩn các phần tử html. Bạn có thể đọc thêm về thuộc tính hiển thị và các tùy chọn có sẵn here.
không: Phần tử sẽ không được hiển thị chút nào.
khối: Các yếu tố hiển thị như một yếu tố ngăn chặn cấp cao (như các đoạn và tiêu đề)
0
Bạn đang hỏi về một thuộc tính CSS tôi nghĩ. Này được sử dụng để hiển thị/ẩn các yếu tố DOM
thuộc tính CSS là hiển thị và giá trị là 'không', 'khối', vv
Nhắc từ: CSS Display theo đề nghị của http://w3fools.com/
khối
Đối tượng được hiển thị dưới dạng phần tử khối.
none
phần tử không được trả lại. Phần tử (nó không ảnh hưởng đến bố cục); tất cả các phần tử con cũng bị tắt màn hình. Tài liệu được hiển thị như thể phần tử không tồn tại.
inline
mặc định. Đối tượng được hiển thị dưới dạng phần tử nội tuyến có kích thước theo kích thước của nội dung.
danh mục
Internet Explorer 6 và sau đó. Đối tượng được hiển thị dưới dạng phần tử khối và một điểm đánh dấu danh mục được thêm vào.
bảng-header-nhóm
Object được render như thead. Tiêu đề bảng luôn được hiển thị trước tất cả các hàng và nhóm hàng khác và sau bất kỳ phụ đề hàng đầu nào. Tiêu đề được hiển thị trên mỗi tài liệu được mở rộng bởi một bảng.
bảng-footer-nhóm
Object được render như tFoot. Chân trang của bảng luôn được hiển thị sau tất cả các hàng và nhóm hàng khác và trước bất kỳ chú thích cuối nào. Chân trang được hiển thị trên mỗi tài liệu được mở rộng bởi một bảng.
inline-block
Object được render nội tuyến, nhưng nội dung của đối tượng được trả lại như một yếu tố ngăn chặn. Các yếu tố nội tuyến liền kề được hiển thị trên cùng một dòng, không gian cho phép.
7
Hiển thị: không có; - Phần tử nằm trong số DOM nhưng KHÔNG hiển thị và không chiếm bất kỳ space không giống như visibility:hidden.
Hiển thị: chặn; - Phần tử khối chiếm full width có sẵn và không cho phép các phần tử khác được đặt bên cạnh chúng. Ví dụ: div
0
Không hiển thị: nó ẩn kiểm soát. bằng cách thiết lập thuộc tính của phong cách element = "display: none" phần tử sẽ không trả lại trong trang web và không diễn ra
khối hiển thị: Các yếu tố trên trang web ở mức khối
0
Display none sẽ ẩn chứa, ở đây nếu bạn áp dụng nó trên div thì chiều rộng và chiều cao của div cũng sẽ ẩn. Khối hiển thị sẽ hiển thị vùng chứa.
0
Display:none; có nghĩa là phần tử sẽ không được hiển thị và Display:block; có nghĩa là phần tử được hiển thị dưới dạng phần tử cấp khối (như đoạn văn và tiêu đề).
1
Hai thuộc tính kiểu này thực hiện hai việc khác nhau.
display: none xóa phần tử hoàn toàn khỏi tài liệu. Nó không chiếm bất kỳ không gian nào, mặc dù HTML cho nó vẫn nằm trong mã nguồn. (Phần tử sẽ không tạo hộp nào cả)
hiển thị: khối phần tử sẽ trải rộng toàn bộ không gian có sẵn cho nó. (ngắt dòng trước và sau phần tử)
1
Có một sắc thái khác để hiển thị: none; nếu bạn chèn động div như một phần tử con vào div mẹ - và bạn đặt rõ ràng thuộc tính hiển thị của trẻ thành "hiển thị", thuộc tính hiển thị của phụ huynh sẽ chỉ hiển thị/ẩn hình gốc; đứa trẻ sẽ vẫn hiển thị, bất kể cài đặt hiển thị của cha mẹ.
Trong trường hợp này (nơi tầm nhìn cha/con được thiết lập bởi các quy tắc phong cách khác nhau), các display: none thiết lập trên phụ huynh sẽ ẩn tất cả các trẻ em - ngay cả khi phụ huynh/trẻ em theo kiểu cách độc lập. văn bản được nhấn mạnh
1
hiển thị: không có nghĩa là phần tử không được hiển thị chút nào (vì vậy bạn sẽ không thấy phần tử đó trong ví dụ này).
display: block có nghĩa là phần tử được hiển thị dưới dạng một khối, vì các đoạn văn và tiêu đề luôn là. Một khối có một số khoảng trắng ở trên và dưới nó và không chấp nhận các phần tử HTML bên cạnh nó, trừ khi được đặt hàng khác
điều này đã xảy ra trong dự án cuối cùng của tôi. sử dụng .css (không hiển thị) sau đó.css (khối hiển thị) được hợp nhất thành tiêu đề trong bảng, sau đó sử dụng .css (ẩn hiển thị) rồi .css (hiển thị độ hiển thị) –