Inherit наследует значение родителя.
Пример: border: 4px double black;
border-radius: 5px; - устанавливает радиус округления
Ориентация элементов в пространстве
Управление блоками, строками, элементами
header, section, footer – большие блоки сайта: хедер, блок, футер
.container – div. container – это элемент, ограничивающий контент по ширине, вставляется внутрь каждого header, section, footer. В css ему задается ширина, которая ограничивает контент.
div, p, input, button {box-sizing: border-box;} - применяется чтобы комманды паддинг и маргин не расширяли элемент настолько, насколько должны забрать пикселей.
Например я указываю высоту и ширину в 500 пикселей, если я делаю паддинг или марджин на 10 пикселей, то блок автоматически увеличится, игнорируя заданную высоту и длину на 10 пикселей, если не применить это свойство.
padding: 20px 20px 20px 20px; - правило часовой стрелки – отступ сверху, справа, снизу, слева. То же самое для марджин. Это то же самое, что записать padding: 20px;
сверху padding-top
справа padding-right
снизу padding-bottom
слева padding-left
У нектороых элементов по-умолчанию заданы паддинги и марджины, которые стоит обнулить, это: body,
Теги <img>, <span>, <a>, <q>, <code> и некоторые другие – строчные (они имеют ширину равную их содержимому/контенту, можно разместить несколько таких элементов в одну строку)
Теги div, p, h, section, article – блочные элементы (их ширина по-умолчанию равна 100% т.е. они занимают всю строку целиком и справа и слева от себя ничего не потерпят). Их ширину ограничивают только материнские элементы, например контейнер с заданной шириной, или можно превратить их в строчные.
Чтобы превратить блочный элемент в строчный применяется float. Например floaf: left;
Затем те элементы, где использовался float, группируются по расположению в один div и ему приписывается класс clearfix, чтобы избежать проблеммы, когда между интервалами элементов внутри этого div появляется содержимое из последующих div.
Чтобы превратить строчный элемент в блочный применяется display: block;
Запрещено добавлять внутрь строчных элементов блочные, а наоборот можно.
без указания ширины никакие margin: 0 auto не работают
clearfix – задать этот класс всем элементам, где было использовано float, можно сгруппировать их в один блок и указать только ему класс, если эти элементы расположены внутри него, рядом. Это решит проблему с неправильным обтеканием текста, а так же неправильным вычеслением высоты блока/строки.
При margin у блочных элементов расположенных рядом друг с другом по вертикали наблюдается эффект схлопывания, когда отступы не суммируются, а объединяются между собой. Само схлопывание действует на два и более блока (один может быть вложен внутрь другого) с отступами сверху или снизу, при этом примыкающие отступы комбинируются в один. Для отступов слева и справа схлопывание никогда не применяется.
Схлопывание не срабатывает:
для элементов, у которых на стороне схлопывания задано свойство padding.
для элементов, у которых на стороне схлопывания задана граница;
на элементах с абсолютным позиционированием, т.е. таких, у которых position установлено как absolute;
на плавающих элементах (для них свойство float задано как left или right);
для строчных элементов;
для <html>.
Для того, чтобы задать положение картинки адаптивно, например по центру, применяются проценты.
position: absolute;
left: 50%;
margin-left: 100px; - берется ширина картинки / 2
top: 50%;
margin-top: 100px; - берется высота картинки / 2
Нужно задать высоту 100vh и для header и для article, если в артикл не задать, ничего не получится (можно задать такую высоту для артикла только внутри хедера)
Пункты-иконки лучше всего сделать не через img, а через бекграунд, для этого:
background: url(../img/название иконки) no-repeat center top;
padding-top: 170px; - здесь пишется высота картинки / 2
width: 200px; - ширина элемента с учетом подписи (самое широкое значение контента элемента)
text-align: center; - задается выравнивание подписи
position: absolute;
left: 0%; - задается отступ слева, или справа в процентах, в случае центрирования, используется margin-left, как в примере выше
top: 50%;
margin-top: 100px; - берется высота картинки / 2
Аналогично случаям выше можно задавать отступ снизу через bottom
position: absolute | fixed | relative | static | inherit ;
absolute
Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
fixed
По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.
relative
Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
static
Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
inherit
Наследует значение родителя.
top
Для позиционированного элемента определяет расстояние от верхнего края родительского элемента до верхнего края дочернего элемента. Отсчет координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края (рис. 1). В случае значения relative, top отсчитывается от верхнего края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от верхнего края родителя (рис. 2).
То же самое, только для левого, нижнего, правого края: left, bottom, right
Синтаксис:
top: значение | проценты | auto | inherit ;
auto Не изменяет положение элемента.