Существует ли практическая разница между отображением элемента слева (например, изображения): inline-block; применяется к нему, а не к отображению по умолчанию: block; правило применяется?
Другими словами, какая разница между:
<div style="float: left; display: inline-block;">text</div>
и
<div style="float: left; display: block;">text</div>
?
Вам может помочь ответ @thirtydot... Ссылка на вопрос
Я только что узнал, что плавающий элемент также сделает его блоком, следовательно, указав свойство
floatиdisplay:blockявляется избыточным.
Да, display: block является избыточным, если вы указали float: left (или right).
(Что бы случилось, если бы вы попытались указать отображение: inline и float: left? )
display: inline не будет иметь никакого значения, потому что установка float: left заставляет display: block "несмотря ни на что":
http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo
В противном случае, если 'float' имеет значение кроме "нет", поле всплывает и "дисплей" устанавливается в соответствии с таблица ниже.
Подведем итог приведенной таблицы: float = display: block.
Однако ваш конкретный пример float: left; display: inline полезен с одной стороны - он исправляет ошибку IE6.
Есть ли другие примеры избыточные комбинации, чтобы остерегаться за? блок & ширина? и т.д.,
Некоторые примеры:
position: absolute, то float: none будет принудительным.top, right, bottom, left не будут иметь никакого эффекта, если для position не установлено значение, отличное от значения по умолчанию static.Есть ли инструмент, который может проверить такие вещи?
Я так не думаю. Это не то, что когда-либо нужно, поэтому я не понимаю, почему кто-то написал бы такой инструмент.
Вам не нужно указывать float: left и display: inline-block для одного и того же элемента, вы используете один или другой, а не оба. Float используется для размещения текста вокруг элементов, это не лучшее оружие для выбора при создании макета. Перейти с display: block и inline-block.
http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/
Блочные элементы - формируют блоки в соответствии с блочной моделью css. Они имеют ширину, высоту, отступы, границы и поля и располагаются вертикально друг над другом.
Встроенные элементы - не формируют ящики. Они сидят горизонтально рядом друг с другом.
Элементы встроенного блока - действуют как блочные элементы внутри, где они образуют блоки. Снаружи они действуют как встроенные элементы, сидящие горизонтально рядом друг с другом, а не укладываются друг на друга.
Хороший ресурс: http://learnlayout.com/inline-block.html
По данным SitePoint:
Если вы новичок в макетах CSS, вы будете прощены за то, что творческое использование CSS с плавающей точкой - это верх навыка. если ты вы использовали столько учебников по макету CSS, сколько сможете Предположим, что освоение поплавков - это обряд. Вы будете ослеплены изобретательность, поражен сложностью, и вы получите чувство достижения, когда вы, наконец, поняли, как работают поплавки.
Не обманывайтесь. Тебе промывают мозги.
http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/
При использовании float: left; почти любые элементы ведут себя как элемент block. Таким образом, в этом конкретном случае нет никакой разницы.
Из двух предыдущих комментариев должно быть ясно, что плавающий элемент дает ему блок (при перемещении влево или вправо) и в то же время встроенный элемент (поскольку другие элементы обтекают его). Следовательно, он может быть похож на встроенный блок. Поэтому добавление свойства отображения может быть необязательным. Свойство float имеет более высокую специфичность, чем отображение в контексте вопроса.