Chuyển đổi giữa Block và Inline: Display dẹp loạn sứ quân

Chuyển đổi giữa block và Inline: Display dẹp loạn sứ quân

Nội dung

Chúng ta biết phần tử Html và Css là hai người bạn không thể thiếu của Html. Phần tử tạo nên cấu trúc Html. Phần tử thì có hai dạng tính cách, phần tử Block, giỏi nhưng cao ngạo, phải chiếm trọn chiều ngang 1 dòng mới được. Còn thằng Inline hiền mà lại không giỏi.

Nếu Html chỉ dùng thằng Inline không lại không ổn. Vì nó không thể quy phục mấy phần tử khác vào 1 nơi. Còn nếu dùng thắng Block thì mỗi thằng lại đồi làm vua một cỗi sao chịu nổi.

Trong lúc rối trí HTLM mới hỏi cô bạn thân còn lại là Css. Và Css bảo Html đừng lo.

Chuyển đổi giữa block và Inline: Display dẹp loạn sứ quân
Chuyển đổi giữa block và Inline: Display dẹp loạn sứ quân

1. Thuộc tính Display dẹp loạn sứ quân

Thuộc tính Display trong Css như một thượng phương bảo kiếm. Bất kể phần tử bản chất góc là Block hay Inline. Gặp Display phải cuối đầu tuân lệnh.

  • Display chỉ vào bất cứ phần tử  Block và nói : “You là Inline ” thì nó inline

<li style=”display:inline> abc </li>

  • Display chỉ vào bất cứ phần tử  Inline  và nói : “You là Block” thì nó sẽ là Block.

<a style=”display:block> abc</a>

  •  Phần tử nào chóng hơi thì sẽ cho bay màu (biến mất) ngay lập tức

<div style=”display:none> abc </div>

2. Giải thích ý nghĩa và điều chú ý về thuộc tính Display

Display: là thuộc tính của Css

Inline, block, none là 3 trong số các giá trị của thuộc tính display

  • Display:inlne : chuyển phần tử về dạng Inline
  • Display:block: Chuyển phần tử về dạng block
  • Display:none: Ẩn phần tử
Xem thêm:  Những việc phải biết làm khi học HTML

Nếu như theo bài chia sẽ thuộc tính trong Html thì display cũng là thược tính nên viết như sau

<p display=”inline”> abc </p>

( Đúng theo cấu trúc viết thuộc tính trong HTML là : Tên thuộc tính=”giá trị thuộc tính” )

Nhưng đây là cách viết sai: Lý do cách viết đó chỉ dùng cho các thuộc tính do HTML trực tiếp quản lý, như href, src, alt

Nhưng Display là thuộc tính dưới trướng Css không phải là thuộc tính do Html trực tiếp quản lý. Nên Html muốn sử dụng display nói riêng hay các thuộc tính khác thuộc Css nói chung thì phải hỏi ý kiến Css. Nghĩa là phải thông qua các thuộc tính toàn cầu là Style, Class, hay Id, thì Html mới dùng được thuộc tính của Css.

Nên cách viết đúng là:

<p style=”display:inline”> abc </p>

Danh sách cá thuộc tính thuộc sự quản lý trực tiếp của Html:

https://www.w3schools.com/tags/ref_attributes.asp

Hi vọng bài viết hữu ích với bạn!