display:none — скрытый элемент не отображается и не занимает места на странице.
visibility:hidden — прячет элемент, но он занимает место на странице.
HTML\CSS → Свойство display:table
Табличные элементы похожи на блочные за исключением ширины по умолчанию (зависит от содержания). display:table задает элементу тип таблицы, особенности таких элементов:
- Можно задавать ширину, высоту, рамки, отступы;
- По умолчанию ширина зависит от содержания;
- Переносы строки до и после элемента.
display:table-row — элемент ведет себя как <tr>, является контейнером для ячеек и практически не имеет собственного отображения.
display:table-cell — элемент ведет себя как <td>,
можно задавать отступы между ячейками или режим схлопывания границ.
HTML\CSS → Свойство display:inline-block
Иногда возникает необходимость расположить в ряд несколько элементов с заданными размерами. Строчные элементы для этого не подходят, т.к. не воспринимают размеры. Блочные элементы тоже не подходят, т.к. до и после них существует перенос строки.
Особенности inline-blockов:
- Им можно задавать размеры, рамки и отступы, как и блочным элементам;
- Их ширина по умолчанию зависит от содержания, а не растягивается на всю ширину контейнера;
- Они не порождают принудительных переносов строк, поэтому могут располагаться на одной строке, пока помещаются в родительский контейнер;
- Элементы в одной строке выравниваются вертикально подобно строчным элементам (
vertical-align).
HTML\CSS → CSS3 свойство box-sizing
Свойство box-sizing:border-box изменяет режим расчета ширины элемента так, чтобы свойство width задавало не ширину содержания, а общую ширину. Значение свойства умолчаниюcontent-box. При резиновой верстке намного удобнее задать значение border-box.
Данное свойство лучше задавать с использованием префиксов:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
HTML\CSS → Ширина содержимого DIV: width:100% vs width:auto
width задает ширину содержания. Общая ширина блока затем складывается из трёх компонентов: ширины содержания, внутренних отступов и ширины рамок слева и справа.
По-умолчанию, при width:auto блок занимает всю ширину родительского блока. При увеличении внутренних отступов ширина содержимого автоматически уменьшается, а общая ширина остается равной ширине родителя.
При width:100% ширина содержимого блока равна ширине родительского блока. При увеличении внутренних отступов или рамки, общая ширина становится больше ширины родителя!
Для удобства ширину лучше задавать внешнему элементу (т.к. все вложенные будут той же ширины), а высоту самому глубокому, т.к. он растянет по высоте всех своих родителей.
<div class="block1">
<div class="block2"></div>
</div>
.block1 { width: 500px; }
.block2 { height: 300px; }