CSS: блочная модель, управление отображением элементов, позиционирование

Боксовая модель (box model)

https://css-tricks.com/the-css-box-model/

Расчет ширины

Место, отводимое под ВЕСЬ элемент рассчитывается следующим образом:

15px + 1px + 10px + 100px + 10px + 1px + 15px

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

Фактическая ширина элемента:
1px + 10px + 100px + 10px + 1px (чтобы визуально получить 100рх по ширине, в стилях следует указать ширину с вычетом border-ов и padding-ов: width: 78px)

border-left + padding-left + width + padding-right + border-right

.element {
  width: 100px;
  padding: 20px 10px;
  margin: 5px 15px;
  border: 1px solid #000;}

Width & Height

Синтаксис:

значение | проценты | auto | inherit

Не рекомендуется напрямую задавать элементам высоту, поскольку содержимое, как правило, динамическое. Целесообразно задавать высоту только тем элементам, которые содержат статический контент

Дополнительные свойства для работы с шириной и высотой:

min-width минимальная ширина

max-width максимальная ширина

min-height минимальная высота

max-height максимальная высота

Margin

Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента

Padding

Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое

Как запомнить порядок сторон: TRouBLe

p { margin: top right bottom left; }

p { padding: top right bottom left; }

Border

div {
       border-width:1px;
       border-color: #000;
       border-style: solid
}

Краткая запись:

div { border: 1px solid #000;}

Для одной стороны -
border-top, border-bottom, border-left, border-right

Варианты border-style:

Box- sizing

При значении border-box ширина начинает включать
поля и границы, но не отступы. Таким образом,
подключая box-sizing со значением border-box к
своему стилю, мы можем задавать ширину в
процентах и спокойно указывать border и padding, не
боясь, что изменится ширина блока

Display

О свойстве display

определяет, как элемент должен быть показан в документе

Важно! Display не переопределяет блочность/строчность элемента, а всего лишь управляет его свойствами при отображении

Значения:

none - элемент не отображается

block - элемент показывается как блочный

inline - элемент показывается как строчный

inline-block - внутренняя часть форматируется как блочный элемент, а сам элемент - как встроенный

"Табличные" значения (основные):

table

table-row

table-cell

table-column

https://css-tricks.com/almanac/properties/d/display/

Visibility

Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним

{  visibility: hidden; }


{  visibility: visible; }


{  visibility: collapse; }

Overflow

Управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.

браузеры поддерживают и свойства overflow-x, overflow-y, которые определяют поведение при переполнении по каждой из осей: x и y.

Float

Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.

Синтаксис:

float:  
     left 
     right 
     none

https://css-tricks.com/all-about-floats/

http://alistapart.com/article/css-floats-101

https://css-tricks.com/almanac/properties/f/float/

Что нужно знать о Float

У плавающего объекта обязательно должна быть задана ширина
Если плавающих элементов будет больше, чем ширина окна, следующий из них, который не вмещается, будет перемещен на следующую строку
Плавающий элемент ведет себя как блочный
Плавающий элемент выпадает из нормального потока
"float first" - располагайте плавающий элемент в коде первым

Запрет обтекания. Clear

<div id="container">
	<img src="image.gif" />
	<img src="image.gif" />
	<img src="image.gif" />
</div>

#container {
	width: 260px;
	margin: 0 auto;
	padding: 10px 0 10px 10px;
	background: #aaa;
	border: 1px solid #999;
}
img {
	float: left;
	margin: 0 5px 0 0;
}

Проблема, возникающая при float

Необходимо очистить поток

Clear

Свойство clear устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.

Синтаксис:

    clear:
      none
      left 
      right 
      both

Способы очистки

дополнительный элемент, помещенный в конце блока родителя со свойством clear
используя псевдоэлемент :after
добавить правило overflow: hidden родителю,
который содержит плавающие элементы:

<div class="parent">
   <div class="floatBlock">Этот блок с float: left;</div>
   текст, который задаст высоту родителю
   <div class="clear"></div>
</div>
<div class="nextStaticBlock">Это следующий блок в общем потоке</div>

<div class="parent">
   <div class="floatBlock">Этот блок с float: left;</div>
   текст, который задаст высоту родителю
</div>
<div class="nextStaticBlock">Это следующий блок в общем потоке</div>

.parent:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.parent {
	overflow: hidden;
	zoom: 1; /* for IE */
}

.parent {
zoom: 1; /* set hasLayout */
display: block; /* resets display for IE/Win */
}

Для IE:

.clear {
    clear:both
}

Position

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

static	Элементы отображаются как обычно. Использование атрибутов left, top, right и bottom не приводит к каким-либо результатам. значение по умолчанию
fixed	Привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы
relative	Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. Также устанавливает новую точку привязки для абсолютно позиционированных элементов
absolute	Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента.

Position:absolute

Если у родительского элемента

position static

Если у родительского элемента

position relative/absolute/fixed

Элемент позиционируется относительно <body>

Элемент позиционируется относительно родителя

Единицы изменения для координат: пиксели, проценты, em и т.д. В том чисте отрицательные значения

Что нужно знать

нельзя применять position (кроме static) к элементам с float (не сработает)
при сдвиге элемента с помощью position:relative остается "дыра" на месте, где элемент должен был находиться в потоке (в отличие от отрицательного margin, который не оставляет пустого места)
если не задать вертикальную или горизонтальную позицию, элемент останется в месте ДО позиционирования (по соответствующей оси). Absolute без координат не даст эффекта, рекомендуется задать хотя бы по одной координате для каждой оси
очень желательно указывать ширину элемента для position:absolute