display thuộc tính không thể thiếu đối với bố cục của một trang web. Thuộc tính hiển thị xác định cách một phần tử được hiển thị trong mối quan hệ với các phần tử xung quanh nó. Có một số giá trị cho thuộc tính CSS này; các giá trị được sử dụng nhiều nhất bao gồm inline , block và inline-block . Trong bài viết này, chúng tôi sẽ thảo luận về việc triển khai và sự khác biệt giữa ba giá trị hiển thị CSS này.
Cú pháp
Cú pháp để triển khai bất kỳ giá trị CSS nào của hiển thị, cú pháp như sau:
display:value;
Trong bài viết này, ba giá trị là inline, block và inline-block, vì vậy cú pháp sẽ là:
display:inline;
display:block;
display:inline-block;
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Sự khác biệt giữa màn hình trong dòng, khối và khối nội tuyến
Hãy bắt đầu bằng cách xem xét các phần tử nội tuyến và các phần tử khối, trước khi xem các phần tử khối nội tuyến so sánh như thế nào.
Nội tuyến
Các phần tử cấp nội tuyến được hiển thị trong dòng, có nghĩa là không có ngắt dòng hoặc phân tách giữa phần tử này và phần tử mẹ hoặc phần tử trước đó. Nó chỉ chiếm chiều rộng cần thiết; nếu bạn cố gắng thêm các thuộc tính chiều rộng và chiều cao tùy chỉnh vào phần tử, các thuộc tính sẽ bị bỏ qua.
Các phần tử HTML được hiển thị nội dòng theo mặc định bao gồm các phần sau:<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <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>
Chặn
Các phần tử cấp khối được hiển thị trên một dòng mới và chiếm hết chiều rộng có thể, trừ khi một thuộc tính chiều rộng được viết. Không giống như các phần tử nội tuyến, nếu bạn thêm các thuộc tính chiều rộng và chiều cao tùy chỉnh, các thuộc tính đó sẽ được tôn trọng.
Các phần tử HTML được hiển thị khối theo mặc định bao gồm các phần sau:<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>...<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video>
Khối nội tuyến
Với ý nghĩ đó, các phần tử khối nội tuyến kết hợp tốt nhất của cả phần tử nội tuyến và khối:khối nội tuyến được hiển thị trong dòng với khả năng thêm các thuộc tính chiều rộng và chiều cao tùy chỉnh. Điều này làm cho chúng trở nên lý tưởng khi bạn muốn tạo kiểu hiển thị của một trang web và muốn các phần tử nằm cạnh nhau.
Kết luận
Trong bài viết này, chúng tôi đã thảo luận về cách triển khai ba giá trị cho thuộc tính hiển thị CSS:nội tuyến, khối và khối nội tuyến cũng như những ưu và nhược điểm của việc sử dụng hiển thị cấp nội tuyến và cấp khối. Nếu bạn thấy bài viết này hữu ích, hãy xem các bài viết khác:Tìm hiểu CSS:Hướng dẫn học Trang tính kiểu xếp tầng hoặc Hướng dẫn học CSS cho người mới bắt đầu của chúng tôi.
Nếu bạn muốn tìm hiểu thêm về phát triển web front-end, hãy nói chuyện với một trong những huấn luyện viên của chúng tôi ngay hôm nay để tìm chương trình đào tạo tốt nhất.