Computer >> Máy Tính >  >> Lập trình >> HTML

HTML Block-Level so với Inline-Block Elements (Tổng quan)

Tìm hiểu về sự khác biệt giữa cấp khối & khối nội tuyến các phần tử trong HTML.

Trong HTML, tất cả các phần tử đều có hiển thị mặc định giá trị được kế thừa bởi Biểu định kiểu tác nhân người dùng (UAS) được tích hợp sẵn cho tất cả các trình duyệt.

Có hai tùy chọn giá trị hiển thị, khối và nội dòng:

  • khối trong CSS: display:block;
  • inline trong CSS: display:inline-block;

Hành vi hoặc kiểu của bất kỳ phần tử HTML nào nhận được từ Biểu định kiểu tác nhân người dùng (UAS) của trình duyệt - mà bạn có thể dễ dàng ghi đè. Vì vậy, bất kỳ phần tử mức khối nào cũng có thể được chuyển đổi thành phần tử nội tuyến, với một khai báo đơn giản: display:inline-block; - và ngược lại.

Phần tử cấp độ khối là gì?

Trong HTML, phần tử cấp khối là một phần tử luôn bắt đầu trên một dòng mới (như ngắt dòng) và chiếm toàn bộ chiều rộng của vùng chứa của nó (phần tử mẹ).

Vì vậy, nếu tôi thêm một

phần tử ngay bên dưới đoạn văn này, nó chiếm toàn bộ chiều rộng của vùng chứa phần tử mẹ từ cạnh trái sang cạnh phải.

Ví dụ về mã:

<div>I’m a block-level element.</div>

Kết quả:

Tôi là một phần tử cấp khối.

Ok, điều đó khó thấy rằng nó chiếm toàn bộ chiều rộng. Để dễ nhìn hơn, hãy thêm đường viền vào đó:

<div style="border:1px solid #dd4c4f">I’m a block-level element.</div>

Kết quả:

Tôi là một phần tử cấp khối.

Bây giờ bạn có thể thấy

phần tử chiếm toàn bộ chiều rộng của vùng chứa, phần tử này trên trang web bạn đang truy cập là một
phần tử.

Như tôi đã đề cập, các phần tử cấp khối bắt đầu một dòng mới và đây là cách nó trông như thế nào ở cấp mã và cách nó hiển thị trong trình duyệt từ góc độ người dùng:

<div style="border:1px solid #dd4c4f">I’m a block-level element.</div>
<div style="border:1px solid #dd4c4f">I’m another block-level element.</div>

Nó trông như thế nào:

Tôi là một phần tử cấp khối. Tôi là một phần tử cấp khối khác.

Nếu hai

các phần tử ở trên là inline họ sẽ ngồi ngay cạnh nhau trên cùng một hàng (như bạn sẽ thấy trong phần tiếp theo). Nhưng bởi vì chúng là các phần tử cấp khối, chúng nằm trên một dòng riêng của chúng trong bố cục và mỗi dòng chiếm toàn bộ chiều rộng của vùng chứa mẹ

Tất cả các phần tử cấp khối HTML

Danh sách đầy đủ các phần tử cấp khối trong HTML:

Thông tin liên hệ.
Nội dung bài viết.
Bên cạnh nội dung.
Dấu ngoặc kép dài ("khối").
Tiện ích tiết lộ.
Hộp thoại.
Mô tả một thuật ngữ trong danh sách mô tả.
Phân chia tài liệu.
Danh sách mô tả.
Thuật ngữ danh sách mô tả.
Nhãn tập hợp trường.
Chú thích hình.
Nhóm nội dung đa phương tiện với chú thích
).
Phần hoặc chân trang.
Biểu mẫu đầu vào.

,

,

,

,
,

Mức tiêu đề 1-6.
Phần hoặc tiêu đề trang.
Thông tin tiêu đề nhóm.
Quy tắc ngang (đường phân chia).


    • Mục danh sách.
    Vùng chứa nội dung chính.
    Chứa các liên kết điều hướng.
    Danh sách có thứ tự.

    Đoạn văn. 
    <div style="display:inline-block;border:1px solid #dd4c4f;">
  I’m a inline-block element
</div>

    Nó trông như thế nào:

    Tôi là một phần tử khối nội tuyến.

    Các phần tử Khối nội tuyến không bắt đầu trên một dòng mới (ngắt dòng).

    Vì vậy, nếu bạn có hai phần tử khối nội tuyến cạnh nhau ở cấp mã:

    <div style="display:inline-block;border:1px solid #dd4c4f">
  I’m a inline block element.
</div>
<div style="display:inline-block;border:1px solid #dd4c4f">
  I’m a another inline block element.
</div>

    Sau đó, chúng hiển thị trong trình duyệt như thế này:

    Tôi là một phần tử khối nội dòng Tôi là một phần tử khối nội tuyến khác.

    Và chỉ để xác định điểm khác biệt giữa khối và khối nội tuyến với nhau như thế nào, hãy so sánh chúng “cạnh nhau”:

    I’m a inline block-element Tôi là một phần tử khối.

    Tất cả các phần tử khối nội tuyến HTML

    Danh sách tất cả các phần tử nội tuyến trong HTML:

    (chỉ khi nó có các điều khiển hiển thị)