дисплей: встроенный vs дисплей: блок
Ответы:
display: block означает, что элемент отображается как блок, как всегда были абзацы и заголовки. Блок имеет несколько пробелов над и под ним и не допускает никаких элементов HTML рядом с ним, кроме случаев, когда заказывается иначе (например, путем добавления объявления float к другому элементу).
display: inline означает, что элемент отображается внутри текущего блока в той же строке. Только когда он находится между двумя блоками, элемент образует «анонимный блок», но имеет минимально возможную ширину.
Подробнее о параметрах отображения: http://www.quirksmode.org/css/display.html
блок
Занимает всю доступную ширину с новой строкой до и после (display: block;)
В линию
Занимает ровно столько ширины, сколько нужно, и не заставляет новые строки (display: inline;)
Вот сравнительная таблица:
Вы можете посмотреть примеры здесь.
display: block;создает элемент уровня блока , тогда как display: inline;создает элемент встроенного уровня . Немного сложно объяснить разницу, если вы не знакомы с блочной моделью css, но достаточно сказать, что элементы уровня блока разбивают поток документа, а встроенные элементы - нет.
Некоторые примеры элементов уровня блока включают в себя: div, h1, p, и hrHTML теги.
Некоторые примеры элементов инлайн уровня включают в себя: a, span, strong, em, b, и iHTML теги.
Лично мне нравится думать о встроенных элементах как о типографских элементах. Это не совсем или технически правильно, но по большей части встроенные элементы ведут себя очень похоже на текст.
Вы можете прочитать более подробную статью по этой теме здесь . Видя, как это цитировали несколько других людей в этой ветке, возможно, стоит прочитать.
Отображение: блок займет всю строку, т.е. без разрыва строки
Display: inline займет ровно столько места, сколько требуется.
#block
{
display : block;
background-color:red;
border:1px solid;
}
#inline
{
display : inline;
background-color:red;
border:1px solid;
}Вы можете сослаться на пример в этой скрипке http://jsfiddle.net/RJXZM/1/ .
блочные элементы расширяются, чтобы заполнить их родительский элемент.
встроенные элементы сокращаются, чтобы быть достаточно большими, чтобы вместить их дочерние элементы.
дисплей: блок
занимает всю строку (100%) экрана, это всегда 100% размера экрана
display: inline-block занимает столько ширины, сколько необходимо, она может составлять от 1% до 100% от размера экрана
отобразить пример встроенного блока
вот почему у нас есть div и span
Стиль Div по умолчанию - это блок отображения: он занимает всю ширину экрана.
стиль по умолчанию для span - display: inline block: span не начинается с новой строки и занимает столько ширины, сколько необходимо
Добавьте фоновый цвет к элементу, и вы увидите разницу между встроенным и блочным, как объясняют другие плакаты.
Display: block Он очень похож на теги 'p' и занимает всю строку, и рядом с ней не может быть никаких элементов, пока она не будет перемещена. Отображение: встроенный. Он просто использует столько места, сколько требуется, и позволяет выровнять другие элементы рядом с собой.
Используйте эти свойства в случае форм, и вы получите лучшее понимание.
блок или встроенный блок может иметь ширину (например, width: 400 пикселей), в то время как встроенный элемент не зависит от ширины. встроенный элемент может охватывать следующую строку текста (например, http://codepen.io/huijing/pen/PNMxXL измените размер окна браузера, чтобы увидеть это), а блочный элемент - нет.
.inline {
background: lemonchiffon;
div {
display: inline;
border: 1px dashed darkgreen;
}Блочные элементы : элементы вроде div, p, заголовки на уровне блока. Они начинаются с новой строки и занимают всю ширину родительского элемента. Встроенные элементы : такие элементы, как b, i, span, img, находятся на встроенном уровне. Они никогда не начинаются с новой строки и не занимают ширину содержимого.
По умолчанию встроенные элементы не заставляют начинать новую строку в потоке документов. С другой стороны, блочные элементы обычно вызывают разрыв строки, вы можете сослаться на эту ссылку