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

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
Xem thêm:  Tạo Form đăng ký: Phần tử input người tiếp nhận hồ sơ

<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ử

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!

 

Thuộc tính Type của phần tử Input trong Form
Tthuộc tính Type của phần từ Input trong Form Html cơ bản

Chúng ta đã nói về phần tử input, chúng ta cũng biết type là thuộc tính của phần từ input. Nó quy Chi tiết

Thuộc tính trong HTML là gì? Điều cần biết về thuộc tính trong Html
Thuộc tính trong HTML

Chúng ta biết cấu trúc Html được tạo thành bởi các phần tử Html. Mỗi phần tử Htlm lại có Chi tiết

Tạo menu Html và các bước cần quan tâm
Tạo menu Html và cá bước cần quan tâm

Chúng ta sẽ đi vào việc tạo menu Html cơ bản thông qua các phần tử html và các bước Chi tiết

Tạo Form đăng ký: Phần tử input người tiếp nhận hồ sơ
Phần tử Input trong Form Html cơ bản

Form nhập liệu thì ắt phải có dữ liệu được nhập vào. Vậy dữ liệu được nhập vào tại đâu? Chi tiết