Bố cục với CSS - Thuộc tính display

Thuộc tính display là trong CSS là thuộc tính quan trọng nhất để điều khiển bố cục (layout).

Thuộc tính display

Thuộc tính display chỉ định cách một phần tử sẽ được hiển thị.

Mọi phần tử HTML có một giá trị hiển thị mặc định tùy thuộc vào phần tử đó thuộc loại nào. Giá trị hiển thị mặc định cho hầu hết các phần tử là block hoặcinline.

Các phần tử mức-khối

Một phần tử mức-khối (block-level) luôn luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng hiện có (trải dài từ trái sang phải như nó có thể).

Phần tử <div> là một phần tử mức-khối.

Ví dụ về các phần tử mức-khối:

·         <div>

·         <h1> - <h6>

·         <p>

·         <form>

·         <header>

·         <footer>

·         <section>

Các phần tử nội tuyến

Một phần tử nội tuyến (inline) không bắt đầu trên một dòng mới và chỉ chiếm chiều rộng khi cần.

Đây là một phần tử nội tuyến <span> bên trong một đoạn văn bản.

Các ví dụ về các phần tử nội tuyến:

·         <span>

·         <a>

·         <img>

display: none;

display: none; thường được sử dụng với JavaScript để ẩn và hiển thị các phần tử mà không cần xoá và tái tạo lại chúng.

Phần tử <script> mặc định sử dụng display: none;.

Ghi đè giá trị hiển thị mặc định

Như đã đề cập, mỗi phần tử đều có một giá trị hiển thị mặc định. Tuy nhiên, bạn có thể ghi đè lên giá trị này.

Thay đổi một phần tử nội tuyến (inline) thành phần tử mức-khối, hoặc ngược lại, có thể là hữu ích để làm cho một trang nhìn với một cách riêng biệt, và vẫn tuân thủ các tiêu chuẩn web.

Một ví dụ phổ biến là làm cho phần tử <li> thành nội tuyến (inline) cho trình đơn ngang:

li {

display: inline;

}

Try it yourself »

Ví dụ sau hiển thị các phần tử <span> như các phần tử mức-khối:

span {

display: block;

}

Try it yourself »

Ẩn một phần tử - display:none hoặc visibility:hidden?

Ẩn một phần tử có thể được thực hiện bằng cách thiết lập thuộc

tính display thành none. Phần tử sẽ được ẩn, và trang sẽ được hiển thị như khi phần tử không ở đó:

h1.hidden {

display: none;

}

Try it yourself »

visibility:hidden; cũng ẩn một phần tử

Tuy nhiên, phần tử vẫn sẽ chiếm không gian như trước. Phần tử sẽ bị ẩn, nhưng vẫn còn ảnh hưởng đến bố cục:

h1.hidden {

visibility: hidden;

}

Try it yourself »

Ví dụ khác

display: none; versus visibility: hidden;

Ví dụ này cho thấy display: none; so với visibility: hidden;

Tự làm bài tập!

Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 »

Các thuộc tính CSS display/visibility

Thuộc tính	Mô tả
display	Chỉ định cách một phần tử sẽ được hiển thị
visibility	Chỉ định một phần tử được hay không được hiển thị.

CodeLean.vn

Facebook: CodeLean Community