1. Управляется с помощью CSS-свойств, относящихся к БМ
1.1. 1. Изменяет размер элемента и занимаемую им площадь
1.2. 2. Влияет на поведение элемента в потоке
2. Размеры элемента
2.1. 1. width
2.1.1. width: 500px;
2.1.2. width: 50%;
2.1.2.1. % от родителя
2.1.3. width: auto;
2.1.3.1. тянется на всю доступную ширину
2.1.4. width: 15em;
2.1.5. min-width
2.1.6. max-width
2.2. 2. height
2.2.1. height: 500px;
2.2.2. height: 50%;
2.2.2.1. задается как % от ширины (width) родительского
2.2.3. height: auto;
2.2.3.1. ужимается под свой контент
2.2.4. height: 15em;
2.2.5. min-height
2.2.5.1. лучше верствать высоту с помощью паддингов
2.2.6. max-height
2.3. 3. padding
2.3.1. padding: 10px;
2.3.2. padding: 5%;
2.3.3. padding: auto; /* = 0 */
2.3.4. padding: 2em;
2.3.5. padding: 10px;
2.3.5.1. /* одинаково со всех сторон */
2.3.6. padding: 10px 20px;
2.3.6.1. /* вертикальные, горизонтальные */
2.3.7. padding: 10px 20px 30px;
2.3.7.1. /* сверху, лево+право, снизу */
2.3.8. padding: 10px 20px 30px 40px;
2.3.8.1. /* сверху, справа, снизу, слева */
2.3.9. padding-top
2.3.10. padding-bottom
2.3.11. padding-left
2.3.12. padding-right
2.4. 4. margin
2.4.1. margin: 10px;
2.4.2. margin: 5%;
2.4.3. margin: auto; /* особый эффект, об этом позже */
2.4.4. margin: 2em;
2.4.5. margin: 10px;
2.4.5.1. /* одинаково со всех сторон */
2.4.6. margin: 10px 20px;
2.4.6.1. /* вертикальные, горизонтальные */
2.4.7. margin: 10px 20px 30px;
2.4.7.1. /* сверху, лево+право, снизу */
2.4.8. margin: 10px 20px 30px 40px;
2.4.8.1. /* сверху, справа, снизу, слева */
2.4.9. margin-top
2.4.10. margin-bottom
2.4.11. margin-left
2.4.12. margin-right
2.5. 5. border
2.5.1. border: 1px solid red;
2.5.2. border-width
2.5.3. border-style
2.5.4. border-color
2.5.5. border-right
2.5.6. border-left
2.5.7. border-top
2.5.8. border-bottom
2.6. Советы
2.6.1. Старайтесь не использовать одновременно width и height, если это не декоративный элемент с фиксированными размерами
2.6.1.1. может быть выпадание
2.6.2. Старайтесь не задавать фиксированную высоту. Если всё-таки нужна высота, то лучше использовать min-height
3. Расчет полного размера
3.1. 1. Если ширина не задана (width: auto)
3.1.1. Общая ширина равна доступному месту в родителе.
3.2. 2. Если ширина задана (не width: auto)
3.2.1. Общая ширина равна: ширина + паддинги + рамки width+ padding + border-width
3.3. 1. Если высота не задана (height: auto)
3.3.1. Общая высота равна: высота внутренностей + паддинги + рамки
3.4. 2. Если высота задана (не height: auto)
3.4.1. Общая высота равна: высота + паддинги + рамки height+ padding + border-width
4. Блочные
4.1. 1. Принудительный перенос строки до и после
4.2. 2. Воспринимают ширину, высоту, внутренние и внешние отступы
4.3. 3. Занимают всё доступное по ширине пространство
4.4. 4. По высоте подстраиваются под содержимое
5. Строчные
5.1. 1. Нет переносов строки до и после — можно располагать в одной строке
5.2. 2. Ширина и высота зависят только от содержания, задать размеры с помощью CSS нельзя
5.2.1. не реагируют на width и height
5.3. 3. Воспринимают только горизонтальные отступы margin и padding
5.3.1. вертикальный padding визуально увеличивает блок, но не отталкивают другие элементы
5.4. 4. рамки border отображаются со всех сторон, но увеличивают размер элемента только в горизонтальном направлении
5.4.1. т.е. рамки могут «залезть» на соседние строки
5.5. 5. Ведут себя как текст
6. Блочно-строчный
6.1. Снаружи как строчный
6.1.1. Ширина по умолчанию ужимается под содержание
6.1.2. Можно располагать на одной строке (отсутствуют принудительные переносы)
6.1.3. Воспринимают «текстовые свойства», например, vertical-align или text-align
6.2. Внутри как блочный
6.2.1. Воспринимают ширину, высоту, внутренние и внешние отступы и рамки во всех направлениях
6.3. Логичное поведение при переносе строк
6.3.1. При переносе высота строк рассчитывается по максимальному элементу с учётом отступов
6.4. Использование
6.4.1. 1. декоративных элементов
6.4.2. 2. кнопок
6.4.3. 3. меню
6.4.4. 4. многоколончатых списков (товары в каталоге, ачивки в академи и т.д.)
7. Тонкости
7.1. 1. Схлопывание маргинов
7.1.1. В вертикальном направлении маргины не складываются, а выбирается максимальный из них
7.1.2. В горизонтальном маргины складываются
7.2. 2. Выпадание маргинов
7.2.1. В вертикальном направлении маргин вложенного блока может выпадать из родительского и отталкивать оба блока
7.2.2. Нужно родительскому блоку задать одно из следующих свойств:
7.2.2.1. 1. overflow: hidden; /* использовать осторожно */
7.2.2.1.1. прячет то, что выпадает из блока
7.2.2.2. 2. padding-top: 1px; /* или */
7.2.2.3. padding-bottom: 1px;
7.2.2.4. 3. border-top: 1px solid transparent; /* или */
7.2.2.5. border-bottom: 1px solid transparent;
7.3. 3. Как отцентровать элемент
7.3.1. 1. Явно задана ширина, которая меньше родителя
7.3.2. 2. margin: 0 auto;
7.4. 4. Ширина по умолчанию и 100%
7.4.1. width: auto + padding
7.4.1.1. В блоке уменьшится место под содержание
7.4.2. width: 100% + padding
7.4.2.1. Блок вылезет за пределы родительского блока, т.к. ширина содержания будет равна ширине родителя, и ещё добавятся отступы
7.5. 5. box-sizing: border-box
7.5.1. Позволяет сделать так, чтобы свойства width и height задавали полную ширину и высоту, а не ширину и высоту содержимого
7.5.2. Использовать Аккуратно и точечно
7.5.2.1. Старайтесь не использовать его для разметки сеток, а применять точечно в узких местах, где его отказ не вызовет серьёзных проблем. Например, при оформлении полей форм. И не забывайте про префиксы.
7.5.3. ОЧЕНЬ помогает для работы с формами, когда нужно и ширину 100% задать и паддинг
8. Управление поведением в потоке
8.1. display
8.1.1. display: block;
8.1.2. display: inline;
8.1.3. display: inline-block;
8.1.4. display: none;
8.2. float
9. Построение сеток
9.1. 1. таблицы
9.1.1. древний, не использовать
9.2. 2. float
9.2.1. 1. Изначально задумывалось для эффекта обтекания картинки текстом
9.2.2. 2. Возможные значения: left, right, none
9.2.3. 3. Позволяет прижать элемент к левому или правому краю родителя
9.2.4. 4. Флоатный элемент ужимается под контент
9.2.5. 5. Флоатный элемент частично выпадает из потока
9.2.6. строчный становится блочным
9.2.7. блочные перестают замечать флоатный блок, а текст обтекает его
9.2.8. строчные обтекают
9.2.9. "прохождение сквозь блоки", "схлопывание родителя"
9.2.10. флоаты видят друг друга
9.2.11. clear
9.2.11.1. учит блочные "видеть" флоатные блоки
9.2.11.2. left — запрещено обтекание слева;
9.2.11.3. right — запрещено обтекание справа;
9.2.11.4. both — запрещено обтекание с обеих сторон;
9.2.11.5. none — обтекание разрешено.
9.2.11.6. псевдораспорка
9.2.11.6.1. .clearfix:after{ content:''; display:table; clear:both; }
9.3. 3. display: inline-block
9.3.1. для построения основной сетки используется реже
9.3.1.1. 1. не поддерживается в ИЕ7
9.3.1.2. 2. проблема с пробелами между соседними блоками
9.3.2. Используется для "подсеток"
9.4. 4. display: table
9.4.1. можно задавать ширину, высоту, рамки, отступы;
9.4.2. по умолчанию ширина зависит от содержания;
9.4.3. переносы строки до и после элемента.
9.5. 5. flexbox
9.5.1. пока полностью не поддерживается
9.6. Общая рекомендация к сеткам
9.6.1. Создайте чисто «сеточные» блоки, для которых используйте только width + margin Тогда не будет проблем с несовпадающими или слишком большими размерами