Ngôn ngữ CSS - CSS Display
Bài trước
Bài sau

Thuộc tính CSS display

Có bao giờ bạn thắc mắc tại sao thẻ p lại có chiều rộng là 100%, hay thẻ div, thẻ header, footer đều có chiều rộng là 100%. Nhưng ngược lại với các thẻ span, a, strong...  thì nó có chiều rộng phụ thuộc vào nội dung bên trong của thẻ, không những vậy mà nó cũng không thể sử dụng được hai thuộc tính margin (top và bottom). Vậy thì trong bài này chúng ta tìm hiểu thuộc tính display và các giá trị của nó để các bạn trả lời các câu hỏi trên.

Các thuộc tính của display chính bao gồm:

  1. inline: hiển thị trên một hàng
  2. block: hiển thị dang khối
  3. inline-block: kết hợp cả 2 cách hiển thị trên
  4. none: không hiển thị

Cú pháp:

tagname {
    display: giá trị;
}

1. Thuộc tính  display:inline
Thuộc tính 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. Thuộc tính này không yêu cầu chiều rộng

Ví dụ:

<html>
<head>
<style type="text/css">
span {
    background: red;
    display: inline;
}
</style>
</head>

<body>
<p>Đây là ví dụ cho <span>display</span> sử dụng giá trị inline.</p>
</body>
</html>

Xem ví dụ

2. Thuộc tính  display:block
Thuộc tính 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ó.

Ví dụ:

<html>
<head>
<style type="text/css">
span {
    background: red;
    display: block;
}
</style>
</head>

<body>
<p>Đây là ví dụ cho <span>display</span> sử dụng giá trị block.</p>
</body>
</html>

Xem ví dụ

3. Thuộc tính display: inline-block;
Thuộc tí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.

Ví dụ:

<html>
<head>
<style type="text/css">
span {
    background: red;
    display: inline-block;
}
</style>
</head>

<body>
<p>Đây là ví dụ cho <span>display</span> sử dụng giá trị inline-block.</p>
</body>
</html>

Xem ví dụ

4. Thuộc tính display: none;
Thuộc tính display: none; : Thành phần không hiển thị.

<html>
<head>
<style type="text/css">
span {
    background: red;
    display: none;
}
</style>
</head>

<body>
<p>Đây là ví dụ cho <span>display</span> sử dụng giá trị none.</p>
</body>
</html>

Xem ví dụ

Các giá trị khác của của thuộc tính display

Thuộc tính giá trị Ví dụ Mô tả
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ự <table>, không ngắt dòng trước và sau thành phần.
list-item 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.
none display: none; Thành phần không hiển thị.
run-in 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.
table 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.
table-caption display: table-caption; Thành phần sẽ đối xử như một <caption> của table.
table-cell display: table-cell; Thành phần sẽ đối xử như một ô trong table.
table-column display: table-column; Thành phần sẽ đối xử như một cột trong table.
table-column-group display: table-column-group; Thành phần sẽ đối xử như một nhóm cột (<colgroup>) trong table.
table-footer-group display: table-footer-group; Thành phần sẽ đối xử như một nhóm footer (<tfoot>) trong table.
table-header-group display: table-header-group; Thành phần sẽ đối xử như một nhóm header (<thead>) trong table.
table-row display: table-row; Thành phần sẽ đối xử như một hàng trong table.
table-row-group display: table-row-group; Thành phần sẽ đối xử như một nhóm hàng trong table.
inherit 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).

5. display: inline-table

Thuộc tính display: inline-table; : Thành phần sẽ hiển thị như một khối nội tuyến,  tương tự <table>, không ngắt dòng trước và sau thành phần.

Ví dụ:

<html>
<head>
<style type="text/css">
span {
    background: red;
    display: inline-table;
}
</style>
</head>

<body>
<p>Đây là ví dụ cho <span>display</span> sử dụng giá trị inline-table.</p>
</body>
</html>

Xem ví dụ

6. display: list-item

Thuộc tính 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.

Ví dụ:

<html>
<head>
<style type="text/css">
span {
    background: red;
    display: list-item;
}
</style>
</head>

<body>
<p>Đây là ví dụ cho <span>display</span> sử dụng giá trị list-item.</p>
</body>
</html>

Xem ví dụ

7. display: table

Thuộc tính display: table; : Thành phần sẽ tương tự như một <table>, ngắt dòng trước và sau thành phần.

Ví dụ:

<html>
<head>
<style type="text/css">
span {
    background: red;
    display: table;
}
</style>
</head>

<body>
<p>Đây là ví dụ cho <span>display</span> sử dụng giá trị table.</p>
</body>
</html>

Xem ví dụ

8. Thuộc tính :
display: table;
display: table-caption;
display: table-cell;
display: table-column;
display: table-column-group;
display: table-footer-group;
display: table-header-group;
display: table-row;
display: table-row-group;

Ví dụ: Các thuộc tính display trên dùng để định nghĩa tương tự như các phần tử của table.

<html>
<head>
<style type="text/css">
div.table {
    border-collapse: collapse;
    display: table;
    width: 200px;
}

div.caption {
    display: table-caption;
}

div.tHead {
    display: table-header-group;
    font-weight: bold;
}

div.tCell {
    border: 1px solid #ccc;
    display: table-cell;
}

div.tRow {
    display: table-row;
}

div.tFoot {
    display: table-footer-group;
}
</style>
</head>

<body>
<div class="table">
<div class="caption">Caption của table</div>
<div class="tHead">
<div class="tCell">A1</div>
<div class="tCell">A2</div>
</div>

<div class="tRow">
<div class="tCell">B1</div>
<div class="tCell">B2</div>
</div>

<div class="tRow">
<div class="tCell">C1</div>
<div class="tCell">C2</div>
</div>

<div class="tFoot">
<div class="tCell">D1</div>
<div class="tCell">D2</div>
</div>
</div>
</body>
</html>

Xem ví dụ

Giá trị display ở trên tương tự table sau đây:

<html>
<head>
<style type="text/css">
table {
    border-collapse: collapse;
    width: 200px;
}

table caption {
    text-align: left;
}

table th {
    border: 1px solid #ccc;
    text-align: left;
}

table td {
    border: 1px solid #ccc;
}
</style>
</head>

<body>
<table>
<caption>Caption của table</caption>
<thead>
<tr>
<th>A1</th>
<th>A2</th>
</tr>
</thead>

<tr>
<td>B1</td>
<td>B2</td>
</tr>

<tr>
<td>C1</td>
<td>C2</td>
</tr>

<tfoot>
<tr>
<td>D1</td>
<td>D2</td>
</tr>
</tfoot>
</table>
</body>
</html>

Xem ví dụ



Bài trước
Bài sau

HiepsiitMe Facebook Twitter Pinterest LinkedIn

 

 

×