tl; dr - это плохая практика - изменять свойство отображения по умолчанию в моем CSS?
Это хорошая практика, но тщательно выбирайте, когда ее использовать, потому что это может привести к критическим структурным ошибкам.
Почему это хорошая практика
Свойство display открыто для изменений. Это делает HTML простым и универсальным. Элементы HTML имеют значение по умолчанию display, которое соответствует общему поведению - то, что вы обычно хотели бы. Но их не нужно хранить и манипулировать ими, чтобы имитировать другое display свойство. Подумайте, например, о <div>. Очевидно, что в большинстве случаев вы хотите, чтобы у него было display: block;, но время от времени гораздо больше подходит display: flex;.
Давайте посмотрим на действительно распространенный пример списков. <li> имеет свойство display list-item, которое разбивает строки для каждого нового элемента.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Но горизонтальные списки тоже очень распространены. Так почему же нет специального элемента для элементов горизонтального списка? Написание специального элемента для каждого общего display поведения добавляет сложности. Вместо этого, соглашение, , также предложенное W3C, состоит в том, чтобы установить для свойства <li> display значение inline .
ul li {
display:inline;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
display: inline-block; как альтернатива float
float уже много лет широко используется при верстке страниц. Проблема в том, что он не был создан для этой задачи, а изначально был разработан для обтекать элементы текстом. Хорошо известная float проблема заключается в том, что не плавающие элементы не распознают плавающие дочерние элементы, потому что они удаляются из обычного потока документа. Вы также не можете перемещать элемент централизованно. вы ограничены только левым или правым поплавком.
display намного больше подходит для верстки во много раз. display: inline-block; указывает браузерам разместить этот элемент встроенным, но рассматривать его как элемент уровня блока. Это означает, что мы можем использовать inline-block вместо float, чтобы расположить ряд элементов рядом. Он более интуитивно понятен и исключает поплавки <div class="clearfix"></div>, что является дополнительным несемантический элемент в вашем HTML.
Поплавки полезны, когда необходимо переместить элемент, чтобы другой контент страницы обтекал его. Но нет необходимости постоянно загонять их на службу сложной планировке.
Чего следует избегать при изменении display
При изменении свойства display помните:
Установка свойства отображения элемента изменяет только способ отображения элемента, а НЕ его тип.
<span> тестовый пример:
В ранних версиях HTML <span> считается элементом встроенного уровня, а <div> - элементом уровня блока. Элементы встроенного уровня не могут иметь внутри элементов блочного уровня. Присвоение <span> display:block; не меняет его категории. Это по-прежнему элемент встроенного уровня, и по-прежнему не может быть <div> внутри.
HTML5 представил модели содержания. Каждый элемент HTML имеет модель содержимого: описание ожидаемого содержимого элемента. HTML-элемент должен иметь содержимое, которое соответствует требованиям, описанным в модели содержимого элемента. <span> может содержать только фразовое содержание. Это означает, что вы по-прежнему не можете вложить <div> (содержимое потока) в <span>. Присвоение <span> display:block; все равно не меняет этого.
Избегайте:
span {
display:block;
}
<span>
<div>
Still Illegal!
</div>
<span>
В заключение, изменение свойства display по умолчанию - это, безусловно, наш хлеб с маслом. Помните, что он изменяет только способ отображения элемента, а НЕ его тип, и используйте его правильно.
Теперь об исходной проблеме с двумя заголовками:
Что касается комментариев:
Предположим, что нам нужно иметь два заголовка. Или забудем на время о заголовках. - автором
А также к комментарию:
Этот вопрос не касается глобального сброса отображаемого значения. Подразумевается использование селекторов для нацеливания только на определенные элементы. Вопрос в том, что нам делать с этими выбранными элементами. - лицом, назначившим награду
Два заголовка рядом друг с другом не только для изменения мобильного макета, но и по-разному. Исходный пример простой и правильный, так что это действительно хороший способ.
h1, h2 {
display: inline;
}
<div class="container">
<h1>Header:</h1>
<h2>my header</h2>
</div>
Он следует правилам HTML и не требует дополнительных взломов.
person
Jaqen H'ghar
schedule
20.06.2016
