CSS 08 – Thuộc tính display của các phần tử

0
25

Thuộc tính display là một thuộc tính CSS dùng để  quy định chế độ hiển thị của một phần tử HTML trong website. Mỗi phần tử HTML đều có một giá trị display mặc định. Thuộc tính display có nhiều giá trị như : inline, block, in-block, table, flex, none,….. Tuy nhiên trong bài này chúng ta chỉ tìm hiểu về các 4 thuộc tính đơn giản và hay được áp dụng đó là block, inline, inline-block và none.

1. Inline

Các phần tử inline có độ rộng chỉ đủ để chứa phần tử đó. Chúng ta không thể đặt các thuộc tính kích thước(width và height) cho các phần tử này. Các phần tử inline khi được đặt cạnh nhau trong văn bản HTML sẽ được xếp cạnh nhau và dàn tới khi hết một hàng.
Một số thẻ có giá trị hiển thi inline mặc định như : <a></a> , <span></span>,  <strong></strong>, <em></em>
Ví dụ:

See the Pen vp_css_inline_tags_examp by Thien (@anhtomks) on CodePen.0

Ở ví dụ trên tôi đã cố tình thiết lập các thuộc tính kích thước width=”300px” và height=”100px” cho các phần tử mặc định nhưng không được. Đó chính là bản chất của các phần tử inline.

2. Block

Các phần tử block có độ rộng chiếm hết một dòng, kể cả khi nội dung bên trong phần tử không rộng hết dòng. Chúng ta có thể đặt kích thước cho các phần tử này. Khi chúng được đặt cạnh nhau trong văn bản HTML thì khi hiển thị ra trình duyệt, mỗi phần tử sẽ chiếm một dòng, không có khoảng trống nào cho các phần tử khác đứng cùng dòng. Các thẻ có giá trị hiển thị block mặc định là : <div></div> , <p></p> , các thẻ heading , …

Ví dụ:

See the Pen vp_css_block_element_examp by Thien (@anhtomks) on CodePen.0

Như các bạn thấy, ở ví dụ này tôi tạo ra 5 khối div và thiết lập kích thước cho chúng với width=”auto” và height=”300px”. Hai khối div đầu tôi để thuộc tính display có giá trị mặc định block và chúng chiếm full độ rộng của một dòng. Ba khối div tiếp theo tôi thiết lập giá trị display cho chúng là inline và thử đặt các thuộc tính kích thước cho chúng nhưng không có ảnh hưởng gì, ba thẻ div sau vẫn nằm cùng một hàng và chỉ chiếm độ rộng vừa đủ chứa phần nội dung bên trong.

3. Inline-block

Inline-block element cũng tương tự như inline-element, các phần tử đặt cạnh nhau sẽ xếp trên cùng một hàng nếu còn đủ rộng. Điểm khác biệt ở đây là chúng ta hoàn toàn có thể thiết lập các thuộc tính width, height cho phần tử.

Ví dụ:

See the Pen vp_css_inline-block_element_examp by Thien (@anhtomks) on CodePen.0

Ở ví dụ này, tôi tại ra 2 thẻ span, một thẻ liên kết và một thẻ em , các thẻ này ban đầu có giá trị hiển thị mặc định là inline, 4 thẻ div ở dưới có giá trị hiển thị mặc định ban đầu là block và mỗi khối div nằm trên một dòng. Trước tiên tôi thay đổi giá trị hiển thị cho các thẻ div chuyển từ block thành inline-block, ngay lập tức các khối div của tôi liền xếp cùng nhau trên một hàng. Tiếp theo tôi đặt các giá trị kích thước, màu nền và màu chữ cho cặp thẻ span, tuy nhiên thì chỉ màu nền và màu chữ là ảnh hưởng, còn kích thước thì không; tôi đặt id=”span_inline_block” cho cặp thẻ span đầu tiên và đặt giá trị hiển thị cho nó là inline-block, ngay lập tức các thuộc tính kích thước được thiết lập cho thẻ span chung đã được ảnh hưởng. Cuối cùng cặp thẻ em, tôi cũng chuyển giá trị hiển thị thành inline-block và đương nhiên tôi có thể đặt kích thước cho phần tử này. Bạn vui lòng chọn vào nút Edit on Codepen để xem được ví dụ một cách rõ ràng hơn.

4. None

Phần tử có giá trị thuộc tính display là none sẽ được loại ra hoàn toàn khỏi cấu trúc HTML , nội dung hiển thị của phần tử sẽ bị mất đi khi xem trên trình duyệt.
Ví dụ:

See the Pen vp_css_display_none_examp by Thien (@anhtomks) on CodePen.0

 

 

Tác giả: Thiện Nguyễn

[Total: 0    Average: 0/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here