Задача: прятать блок div на маленьких экранах (расширение ниже <768px). Например, нам нужно спрятать большую картинку в мобильной версии сайта.
В предыдущей версии Twitter Bootstrap 2 для этого использовались классы .hidden-phone, .hidden-tablet и т.д. Но они устарели и в новой версии бутстрапа не доступны.
Для скрытия элементов при различных расширениях нужно использовать следующие классы:
Читать далее...Атрибут role в HTML5 позволяет наиболее четко указать семантическое предназначение блока/элемента страницы при взаимодействии пользователя с сайтом.
<div class='navbar' role='banner'>...</div> <nav class='menu' role='navigation'> <ul> ... </ul> </nav>
Возможные значения атрибута role=»
Читать далее...Свойство position определяет порядок, в соответствии с которым элемент отображается на веб-странице. По умолчанию элементы отображаются последовательно один за другим в том порядке, в котором они определены в документе (static).
Блочные элементы (p, div, table, blockquote и др.) занимают 100% ширины родительского элемента. Поэтому последовательные блочные элементы отображаются один под другим.
Инлайновые элементы (em, strong, span, q, abbr и т.п.) занимают ширину которая соответствует ширине данных внутри него. Поэтому инлайновый элементы отображаются рядом друг с другом.
Свойство position вместе с top, right, bottom и left свойствами может отображать элемент с нарушением обычного порядка.
CSS свойство box-sizing — определяет алгоритм расчета ширины и высоты элемента.
Согласно спецификации CSS ширина блока складывается из: ширины контента (width) + полей (padding) + границ (border) + значений отступов (margin).
Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.
Значение по умолчанию: content-box.
В HTML5 введены несколько новых структурных тегов: <header>, <nav>, <article>, <aside>, <footer>, и т.д. Которые в основном предназначены для поисковых роботов, с целью указать им на четкое разделение блоков контента от вспомогательных элементов.
