- 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:
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ự
HTML viết:
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: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
displayThuộc tính display : Xác định sự hiển thị cho thành phần, chuyển đổi thành phần từ dạng dạng này sang dạng khác. Thuộc tính display có rất nhiều dạng, trong phạm vi bài học chỉ đề cập đến các dạng thường dùng sau:
Chuẩn bịTạo file HTML và CSS có cấu trúc thư mục và nội dung như sau: Cấu trúc thư mục
Click vào dấu [+] để xem cấu trúc. HTML viết
Thành phần A. Thành phần B. thẻ inline a thẻ inline span Do Thành phần A và Thành phần B sử dụng thẻ , nên nó thuộc dạng block. Do thẻ inline a sử dụng thẻ , thẻ inline span sử dụng thẻ nên nó thuộc dạng inline. Hiển thị trình duyệt khi chưa có CSSCSSĐể dễ hình dung thuộc tính display, ta sẽ cho các thành phần định dạng như sau: * { margin: 0; padding: 0; } p.first { background: #f3f3cf; } p.second { background: #e0e0fc; } p.third a { background: #befcc9; } p.third span { background: #fbdefd; } Hiển thị trình duyệt khi chưa sử dụng floatDownload phần chuẩn bị Tới đây ta đã xong bước chuẩn bị, bắt đầu thôi. display: blockThuộc tính display: block;: hiển thị thành phần thành dạng block. Ta thêm nội dung display: block; cho Thẻ inline a và thẻ inline span: * { margin: 0; padding: 0; } p.first { background: #f3f3cf; } p.second { background: #e0e0fc; } p.third a { background: #befcc9; display: block; } p.third span { background: #fbdefd; display: block; } Hiển thị trình duyệt khi sử dụng display: block;Ta thấy hai thành phần Thẻ inline a và thẻ inline span đã trở thành thành phần block. display: inlineThuộc tính display: inline;: hiển thị thành phần thành dạng inline. Ta thêm nội dung display: inline; cho Thành phần A và Thành phần B: * { margin: 0; padding: 0; } p.first { background: #f3f3cf; display: inline; } p.second { background: #e0e0fc; display: inline; } p.third a { background: #befcc9; } p.third span { background: #fbdefd; } Hiển thị trình duyệt khi sử dụng display: inline;Ta thấy Thành phần A và Thành phần B đã trở thành thành phần inline. display: noneThuộc tính display: none;: không hiển thị thành phần. Ta thêm nội dung display: none; cho Thành phần B: * { margin: 0; padding: 0; } p.first { background: #f3f3cf; } p.second { background: #e0e0fc; display: none; } p.third a { background: #befcc9; } p.third span { background: #fbdefd; } Hiển thị trình duyệt khi sử dụng display: none;Ta thấy Thành phần B đã không hiển thị. Chủ Đề |