Chào các bạn!
Ngay khi đọc tiêu đề bài viết cũng đã nói rõ mục đích của bài viết hôm nay rồi. Khái niệm Block Elements và Inline Elements đối với nhiều bạn còn khá lạ tuy nhiên thực tế thì các bạn vẳn dụng nó hàng ngày, chỉ có điều các bạn không biết mà thôi.
Có rất nhiều bạn sẽ nhầm Block Elements và Inline Elements với display: block và display: inline. Thực tế, kết quả sau khi sử dụng Block Elements và Inline Elements hay display: block và display: inline không khác gì nhau về mặt hiển thị tuy nhiên bản chất của chúng lại khác nhau hoàn toàn, đừng nhầm lẫn nhé.
Block Elements và Inline Elements là chỉ những phần tử trong HTML còn display: block và display: inline thuộc về Css.
Đi vào thực tế, chúng ta có thể nói rằng: các phần tử trong HTML được phân chia làm 2 loại: Block elements (Các phần tử khối) và Inline elements (Các phần tử nội tuyến).
Vậy tại sao lại cần phân chia thành Block Elements và Inline Elements? Đơn giản là để các bạn tiết kiệm thời gian viết css, tiết kiệm tài nguyên mà thôi.
Và bây giờ chúng ta cùng đi sâu vào tìm hiểu 2 loại elements này nhé.
Block Elements
Các Block element (phần tử khối) khi hiển thị trên trình duyệt chúng sẽ tự động thêm các ngắt dòng (line break) vào phía trước và phía sau nó. Hiểu một cách đơn giản là khi gọi 2 block elements ra thì mỗi element sẽ chiếm 1 dòng và width của các element này sẽ full luôn dòng đó.
<div style="border: 1px solid blue">Xin chào Viblo</div>
<p style="border-bottom: 2px solid red">Cùng tìm hiểu về block element và inline element.</p>
Danh sách tất cả các Block element (theo mặc định) của HTML5:
| Col 1 | Col 2 | Col 3 |
|---|---|---|
| <address> | <figcaption> | <hgroup> |
| <article> | <figure> | hr |
| <aside> | <footer> | <li> |
| <blockquote> | <form> | <main> |
| <details> | <h1> – <h6> | <nav> |
| <dialog> | <ol> | p |
| <dd> | div | pre |
| <dl> | <section> | <table> |
| <dt> | <fieldset> | <header> |
| <ul> |
Vậy nếu muốn các block element này nằm song song nhau trên cùng 1 row thì làm thế nào? Câu trả lời vô cùng đơn giản. Bạn có thể sử dụng các properties display sau nhé:
- display: inline
- display: inine-block
- display: flex
- display: grid
- display: table
- display: table-cell
Hoặc có thể sử dụng float: left|right cũng được nhé.
Inline Elements
Trái ngược với Block Elements thì ta lại có Inline Elements.
Các Inline element (phần tử nội tuyến) thường xuất hiện trong một đoạn văn (sentence), khi hiển thị trên trình duyệt nó không tự động thêm các ngắt dòng (line break) vào phía trước và phía sau của nó.
<a href="#" style="border: 1px solid blue;">Xin chào Viblo</a>
<span style="border-bottom: 2px solid red;">Đây là inline element.</span>
Danh sách tất cả các Inline element
| Col 1 | Col 2 | Col 3 | Col 4 | Col 5 | Col 6 | Col 7 |
|---|---|---|---|---|---|---|
| <a> | <abbr> | <acronym> | <b> | <bdo> | <big> | <button> |
| <cite> | <code> | <dfn> | <em> | <i> | <img> | <input> |
| <kbd> | <label> | <map> | <object> | <output> | <q> | <samp> |
| <script> | <select> | <small> | <span> | <strong> | <sub> | <sup> |
| <textarea> | <time> | <tt> | <var> |
Cũng tương tự như block element, nếu như muốn các block inline này có bản chất giống như block element thì chỉ cần thêm 1 dòng css như dưới là xong.
display: block
Như vậy về cơ bản thì bài viết này giúp các bạn hiểu đúng được bản chất của các element mình đang dùng. Hiểu được bản chất của chúng, bạn sẽ dễ dàng sử dụng chúng đúng mục đích, tiết kiệm thời gian css, nâng cao performance cho web hoặc app của chính các bạn. Chúc các bạn thành công!
Bài viết liên quan
[CSF-2] Một số thiết lập CSF, LFD
Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf Nội dung chínhBlock ElementsInline Elements1. Bảo vệ khỏi tấn công DoS...
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
Nội dung chínhBlock ElementsInline Elements1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ ứng dụng hoạt động trên Linux như một firewall được phát hành miễn phí để tăng tính bảo mật cho...
Sử dụng SSH Key với Gitlab và Github
Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...
Directory traversal vulnerabilities (phần 4)
Nội dung chínhBlock ElementsInline ElementsV. Phân tích và khai thác các lỗ hổng Directory traversal (tiếp) 5. Bypass lỗ hổng khi trang web sử dụng đường dẫn đầy đủ Xét đoạn code php sau: <?php...
Directory traversal vulnerabilities (phần 3)
Nội dung chínhBlock ElementsInline ElementsV. Phân tích và khai thác các lỗ hổng Directory traversal 1. Lỗ hổng xảy ra khi sử dụng các hàm đọc file và tin tưởng đầu vào người dùng Xét...
Directory traversal vulnerabilities (phần 2)
Nội dung chínhBlock ElementsInline ElementsIII. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi ngôn ngữ lập trình khác nhau, điểm xuất hiện các lỗ hổng Directory traversal cũng khác nhau. Lỗ hổng thường...