Press shift question mark to access a list of keyboard shortcuts
Этот скринкаст является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
расшифровка
Каждый элемент на веб-странице представляет собой поле.
Мы можем описать характеристики этих блоков с помощью CSS Box Model.
Понимание этой модели и того, как расположены различные типы блоков, является ключевым моментом при преобразовании дизайна в работающий веб-сайт.
пример
Если я добавлю 1px solid red рамку размером 1 1px solid red ко всему на моем веб-сайте с помощью селектора * , вы увидите, как каждый элемент или модуль состоит из множества вложенных блоков.
* { border: 1px solid red; }
Свойства блочной модели
Ключевые характеристики блока могут быть определены с помощью свойств: width , height , margin , padding и border . Их часто называют свойствами блочной модели.
.box { width: 400px; height: 200px; margin: 20px; padding: 20px; border: 10px solid #000; }
Иногда background включается в этот список, но так как background не меняет форму или компоновку блока, в этом случае я его исключил.
Мы можем смоделировать поведение этих свойств, нарисовав любой элемент на странице в виде диаграммы. Это позволяет нам увидеть, как эти свойства блочной модели объединяются, чтобы придать элементу форму, и, в свою очередь, сколько места он занимает на странице.
Расчет размеров
По умолчанию вычисляемая ширина поля вычисляется из суммы его ширины, горизонтального отступа и горизонтальной границы. Вычисленная высота является суммой высоты, вертикальных отступов и границ. Поле применяет интервал вокруг поля, но не добавляет к вычисленной ширине или высоте.
Таким образом, с учетом поля шириной 400px и высотой 200px, отступом 20px со всех сторон и границей 5px по всему периметру — ширина поля равна 400 + 5 + 20 + 20 + 5 = 450px и высота 250px, а не 200.
Это тривиальный расчет с хорошими круглыми числами, но он может стать намного более сложным при работе с несколькими единицами и разными значениями на каждой стороне.
Насколько широко эта коробка, например?
.box { width: 960px; margin: 20px auto; padding: 0 1em 2em 3em; border: 5px solid #000; }
Извините, я ленивый — это требует слишком много размышлений и занимает слишком много времени. К счастью, есть более простой способ …
Box-проклейки
Мы можем сделать значение width — свойство width — равным вычисленной ширине, используя другую модель размеров для наших блоков.
* { -moz-box-sizing: border-box; box-sizing: border-box; }
Использование свойства box-sizing со значением border-box дает нам гораздо более интуитивную модель box. Это свойство все еще имеет префикс в последних версиях Firefox, поэтому требуется префикс -moz vendor.
Теперь, когда мы создаем прямоугольник с определенной шириной, отступы и границы добавляются внутрь, а это значит, что больше не нужно никаких сложных вычислений.
До того, как свойство box-sizing было добавлено в CSS, эта модель определения размера фактически использовалась старыми версиями IE, когда входила в «режим причуд». Теперь мы можем намеренно использовать эту модель размеров во всех современных браузерах и IE8 и выше.
демонстрация
Для интерактивной демонстрации коробочной модели, посмотрите этот сайт, который я сделал.
Это позволяет увидеть эффект изменения свойств блочной модели, таких как width и height , margin , padding , border и т. Д., А также разницу в вычисленных размерах между content-box модели размеров по умолчанию и более интуитивной моделью border-box .
Он также генерирует код, необходимый для создания элемента с этими характеристиками, включая наиболее эффективные сокращения для полей и отступов.
Пойдите, посмотрите на: http://guyroutledge.github.io/box-model .
Следите за нашей статьей Quick Tip в ближайшее время!