Блочная модель (БМ)

Commencez. C'est gratuit
ou s'inscrire avec votre adresse courriel
Rocket clouds
Блочная модель (БМ) par Mind Map: Блочная модель (БМ)

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 Тогда не будет проблем с несовпадающими или слишком большими размерами