Sự khác biệt cơ bản giữa các CSS sau đây là gì:
display:inlinevà điều này:
display:blockSử dụng riêng biệt trên một yếu tố, tôi nhận được kết quả tương tự.
Câu trả lời:
display: block có nghĩa là phần tử được hiển thị dưới dạng một khối, như các đoạn và tiêu đề luôn luôn là. Một khối có một số khoảng trắng bên trên và bên dưới nó và không chấp nhận các phần tử HTML bên cạnh, ngoại trừ khi được yêu cầu khác (ví dụ bằng cách thêm một khai báo float vào một phần tử khác).
display: inline có nghĩa là phần tử được hiển thị nội tuyến, bên trong khối hiện tại trên cùng một dòng. Chỉ khi nằm giữa hai khối, phần tử mới tạo thành một 'khối ẩn danh', tuy nhiên nó có chiều rộng nhỏ nhất có thể.
Đọc thêm về các tùy chọn hiển thị: http://www.quirksmode.org/css/display.html
Dưới đây là bảng so sánh:
Bạn có thể xem các ví dụ ở đây.
display: block;tạo ra một yếu tố cấp khối , trong khi display: inline;tạo ra một yếu tố cấp độ nội tuyến . Thật khó để giải thích sự khác biệt nếu bạn không quen thuộc với mô hình hộp css, nhưng đủ để nói rằng các phần tử mức khối phá vỡ dòng chảy của tài liệu, trong khi các phần tử nội tuyến thì không.
Một số ví dụ về các yếu tố khối cấp bao gồm: div, h1, p, và hrthẻ HTML.
Một số ví dụ về các yếu tố cấp nội tuyến bao gồm: a, span, strong, em, b, và ithẻ HTML.
Cá nhân, tôi thích nghĩ về các yếu tố nội tuyến như các yếu tố chính tả . Điều này không hoàn toàn hoặc đúng về mặt kỹ thuật, nhưng đối với hầu hết các phần tử nội tuyến thì hoạt động rất giống văn bản.
Bạn có thể đọc thêm thông qua bài viết về chủ đề ở đây . Nhìn thấy như một số người khác trong chủ đề này đã trích dẫn nó, nó có thể đáng đọc.
Hiển thị: khối sẽ lấy toàn bộ dòng tức là không ngắt dòng
Hiển thị: nội tuyến sẽ chỉ chiếm không gian chính xác mà nó yêu cầu.
#block
{
display : block;
background-color:red;
border:1px solid;
}
#inline
{
display : inline;
background-color:red;
border:1px solid;
}
Bạn có thể tham khảo ví dụ trong fiddle này http://jsfiddle.net/RJXZM/1/ .
yếu tố khối mở rộng để điền vào cha mẹ của họ.
yếu tố nội tuyến hợp đồng chỉ đủ lớn để giữ con cái của họ.
hiển thị: khối
chiếm toàn bộ hàng (100%) của màn hình, nó luôn luôn là 100% kích thước màn hình
hiển thị: khối nội tuyến chiếm nhiều chiều rộng cần thiết, nó có thể là 1% - đến 100% kích thước màn hình
đó là lý do tại sao chúng ta có div và span
Kiểu mặc định của Div là khối hiển thị: nó chiếm toàn bộ chiều rộng của màn hình
kiểu dáng mặc định của span được hiển thị: khối nội tuyến: span không bắt đầu trên một dòng mới và chỉ chiếm nhiều chiều rộng khi cần thiết
Thêm màu nền cho thành phần và bạn sẽ thấy độc đáo sự khác biệt của nội tuyến so với khối, như được giải thích bởi các áp phích khác.
Hiển thị: chặn Nó hoạt động rất giống với các thẻ 'p' và nó chiếm toàn bộ hàng và không thể có bất kỳ yếu tố nào bên cạnh cho đến khi nó nổi lên. Hiển thị: nội tuyến Nó chỉ sử dụng nhiều không gian theo yêu cầu và cho phép các yếu tố khác được căn chỉnh cùng với chính nó.
Sử dụng các thuộc tính này trong trường hợp các hình thức và bạn sẽ hiểu rõ hơn.
một khối hoặc khối nội tuyến có thể có chiều rộng (ví dụ: width: 400px) trong khi phần tử nội tuyến không bị ảnh hưởng bởi chiều rộng. phần tử nội tuyến có thể kéo dài đến dòng văn bản tiếp theo (ví dụ http://codepen.io/huijing/pen/PNMxXL thay đổi kích thước cửa sổ trình duyệt của bạn để xem điều đó) trong khi phần tử khối không thể.
.inline {
background: lemonchiffon;
div {
display: inline;
border: 1px dashed darkgreen;
}Các yếu tố khối : Các yếu tố thích div, p, tiêu đề là cấp độ khối. Chúng bắt đầu từ dòng mới và chiếm toàn bộ chiều rộng của phần tử cha. Các phần tử nội tuyến : Các phần tử thích b, i, span, img là cấp độ nội tuyến. Họ không bao giờ bắt đầu từ dòng mới và chiếm chiều rộng của nội dung.
Theo mặc định, các phần tử nội tuyến không bắt buộc một dòng mới bắt đầu trong luồng tài liệu. Mặt khác, các phần tử chặn thường gây ra ngắt dòng xảy ra, bạn có thể tham khảo liên kết này