27 tháng 9, 2019

Thuộc tính Display trong CSS


Thuộc tính Display dùng để quy định chế độ hiển thị tài liệu html.

Cú pháp
tag {
    display: value;
}

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ự <table>, không ngắt dòng trước và sau thành phần
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 <caption> 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 (<colgroup>) trong table
display: table-footer-group;
Thành phần sẽ đối xử như một nhóm footer (<tfoot>) trong table
display: table-header-group;
Thành phần sẽ đối xử như một nhóm header (<thead>) 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)

Ví dụ thực hành

File html
<html>
<head>
    <meta charset="utf-8">
    <title> ví dụ </title>
    <link type="text/css" rel="stylesheet" href="./display.css" />
</head>

<body>
    <p>Quản trị máy tính </p>
    <p>Blog chia sẻ kiến thức công nghệ thông tin</p>
</body>
</html>

File CSS
p {
    display: inline;
}

Kết quả hiển thị:


Các bạn sẽ thấy 2 dòng ký tự của 2 thẻ <p> đượ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é.


SHARE THIS

Blogger Nguyễn Dương

Có một câu nói mà mình rất thích đó là "Thật sai lầm khi nghĩ rằng một khi rời khỏi trường học, bạn không cần học thêm điều mới nữa". Chính vì thế mà hãy luôn luôn học hỏi, con người chỉ ngừng phát triển khi ngừng học hỏi. Nếu như bạn chưa hiểu nội dung bài viết hoặc đang khúc mắc khi thao tác thì hãy bình luận phía dưới bài viết để mọi người cùng thảo luận nhé!