Dùng CSS dislay thiết lập cách hiện thị phần tử thành dạng inline, block, none ...
Mọi phần tử trên trang đều có dạng hộp chữ nhật. Thuộc tính display quy định ứng xử của box này trên trang. Một phần tử dạng khối block nó chiếm toàn bộ độ rộng, với ngắt dòng trước và sau phần tử. Ví dụ sau sẽ chuyển phần tử thành dạng block
.spantoblock span { display: block; border: 1px dotted gray; }Đoạn văn 1. Đoạn văn 2. Đoạn văn 3.
Đoạn văn 1. Đoạn văn 2. Đoạn văn 3.
Thiết lập display: inline
Phần tử có thuộc tính display: inline; sẽ chỉ có độ rộng phù hợp với nội dung phần từ và không có ngắt dòng trước và sau phần tử.
.ptoinline p { display: inline; border-bottom: 1px dotted gray; }Đoạn văn 1.
Đoạn văn 2.
Đoạn văn 3.
Đoạn văn 1.
Đoạn văn 2.
Đoạn văn 3.
Thiết lập thuộc tính display cho phần tử chỉ thay đổi cách phần tử đó hiện thị, bạn vẫn cần tuân thủ quy tắc HTML. Một phần tử gốc inline dù có thuộc tính display: block; vẫn không được phép chứa phần tử dạng gốc block : xem thêm HTML inline và block
display:none
display:none sẽ ẩn phần tử, nó không còn chiếm không gian nào trên trang. Ví dụ:
h1 { display: none; }Ngoài các giá trị block, inline, none ... thuộc tính display còn nhiều giá trị khác:
display: inline-block; bản thân phần tử hiện thị như inline nhưng bên trong phần tử lại ứng xử như block
display: list-item phần tử giống như
Display là gì? Display trong CSS là gì? Cùng chúng tôi tìm hiểu những thông tin này ngay trong bài viết dưới đây nhé.
Bạn đang xem: Display css là gì
Hiện nay, thuộc tính display trong CSS cho phép chúng ta xác định kiểu hiển thị của các thẻ HTML trên website. Vậy Display là gì? Display có thực sự quan trọng hay không? Hãy bắt đầu cùng chúng tôi tìm hiểu về Display và các giá trị Display CSS ngay trong bài viết này nhé.
Display là gì?
Bạn tham khảo Display mang các nghĩa sau:
Display có nghĩa để trưng bày: để sắp xếp một cái gì đó hoặc một bộ sưu tập những thứ sao cho nó có thể được nhìn thấy bởi công chúng. Để hiển thị một cái gì đó hoặc một bộ sưu tập những thứ có tổ chức cho mọi người xem, sắp xếp hàng hóa hoặc đồ vật để mọi người xem hoặc mua trong cửa hàng.Display – thể hiện: để bày tỏ một cảm giác, để cho một cái gì đó được biết đến qua những gì bạn nói hoặc làm, hoặc cách bạn nhìn.Display – hiển thị: để hiển thị các từ, hình ảnh, v.v. Trên màn hình.Ngoài ra, danh từ display có nghĩa là sự trưng bày: một tập hợp các đối tượng hoặc hình ảnh được sắp xếp cho tất cả mọi người xem, hoặc một buổi biểu diễn hoặc trình diễn cho tất cả mọi người xem; Sắp xếp hoặc tập hợp một hoặc nhiều thứ được trình bày một cách có tổ chức; Một bộ sưu tập các sản phẩm hoặc đồ vật được sắp xếp để mọi người xem hoặc mua trong một cửa hàng.Display trong CSS là gì?
Thuộc tính display trong CSS được sử dụng để chỉ định giá trị hiển thị mặc định cho tất cả các phần tử. Nó khá quan trọng trong việc tạo các trang web. Bạn tham khảo các ví dụ ngay dưới đây.
Trong CSS, display là gì?
Ví dụ:
Phần tử div được hiển thị dưới dạng một khối [block].
Trong khi phần tử span lại được hiển thị nội dòng [inline].
Lưu ý: Thuộc tính display trong CSS là một trong những thuộc tính hữu ích và mạnh mẽ nhất trong CSS. Display có thể rất hữu ích để tạo các trang web trông theo một cách khác, nhưng vẫn tuân theo các tiêu chuẩn web.
Giá trị Display CSS
Thuộc tính display bao gồm các giá trị được đính kèm với nó, dưới đây là một số giá trị nổi bật:
Giá trị block của thuộc tính display là gì?
Giá trị block của thuộc tính display sẽ buộc một phần tử hoạt động giống như một phần tử cấp khối, giống như một phần tử div hoặc p.
Cú pháp: selector {display: block;} span {display: block;} Xem kết quảVí dụ: Như các bạn đã biết, thẻ span trong HTML là thẻ dòng mới khi chiều dài của nó vượt quá chiều rộng cho phép, nếu không sẽ không nhập được dòng. Nhưng khi chúng ta sử dụng thuộc tính display: block cho thẻ span, nó sẽ ngắt dòng giống như thẻ div và thẻ p.
Lưu ý: Việc thay đổi khả năng hiển thị của một phần tử chỉ thay đổi hành vi hiển thị của một phần tử, không phải kiểu của phần tử. Ví dụ, một phần tử inline được đặt để hiển thị: block; vẫn không cho phép bạn đặt phần tử block bên trong nó.
Giá trị inline của thuộc tính display là gì?
Giá trị inline của thuộc tính display sẽ làm một phần tử hoạt động như thể nó là một phần tử inline.
Quy tắc: selector {display: inline;} Ví dụ: p {display: inline;} Xem Kết quảThông thường, các thẻ p sẽ được định dạng thành các khối trong một trang web. Nhưng chúng ta hoàn toàn có thể thay đổi nó thành một định dạng như thẻ span.
Giá trị inline-block của thuộc tính display là gì?
Giá trị inline-block của thuộc tính display khiến một block tạo khối lưu chuyển với nội dung xung quanh, tức là trong cùng một dòng với nội dung liền kề.
Cú pháp:Selector { display: inline-block;} Ví dụ: p {display: inline-block; background: orange;} Xem kết quảGiá trị none của thuộc tính display là gì?
Giá trị none của thuộc tính display chỉ đơn giản tạo ra một phần tử không có hộp nào cả. Các phần tử con cũng không tạo bất kỳ một hộp nào, ngay cả khi thuộc tính hiển thị của các phần tử con đó được đặt. Trang web sẽ hiển thị như thể phần tử không tồn tại trong cây tài liệu.
Xem thêm: Danh Hài Thu Trang Mang Bầu Lần Hai, Rộ Tin Diễn Viên Hài Thu Trang Mang Bầu Lần Hai
Cú pháp: selector {display: none;} Ví dụ: p {display: none;} Xem Kết quảCác giá trị khác
Ngoài các thuộc tính trên, display còn hỗ trợ chúng ta một số giá trị sau:
Kết luận
Như vậy là bài viết đã giải đáp được thắc mắc display là gì và cung cấp những kiến thức về thuộc tính display trong CSS. Nếu bạn có câu hỏi thắc mắc nào vui lòng để lại bình luận bên dưới.
CSS Lập trình Website
Thuộc tính Display dùng để quy định chế độ hiển thị tài liệu html.
Cú pháp
Các giá trị gồm:
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ó |
||||||||||||||||||||||||||
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 |
||||||||||||||||||||||||||
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 | ||||||||||||||||||||||||||
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ự
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
display: none;
Thành phần không hiển thị
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
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
display: table-caption;
Thành phần sẽ đối xử như một của table
display: table-cell;
Thành phần sẽ đối xử như một ô trong table
display: table-column;
Thành phần sẽ đối xử như một cột trong table
display: table-column-group;
Thành phần sẽ đối xử như một nhóm cột [] trong table
display: table-footer-group;
Thành phần sẽ đối xử như một nhóm footer [] trong table
display: table-header-group;
Thành phần sẽ đối xử như một nhóm header [] trong table
display: table-row;
Thành phần sẽ đối xử như một hàng trong table
display: table-row-group;
Thành phần sẽ đối xử như một nhóm hàng trong table
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] File CSS Kết quả hiển thị:
Các bạn sẽ thấy 2 dòng ký tự của 2 thẻ được xếp cùng một hàng. Nếu không có CSS thì nó sẽ hiển thị thành 2 đoạn văn.
Hãy thực hành với các giá trị khác để xem chúng hiển thị như thế nào nhé. Video liên quanChủ Đề |