Место, отводимое под ВЕСЬ элемент рассчитывается следующим образом:
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;}
Синтаксис:
значение | проценты | auto | inherit
Не рекомендуется напрямую задавать элементам высоту, поскольку содержимое, как правило, динамическое. Целесообразно задавать высоту только тем элементам, которые содержат статический контент
Дополнительные свойства для работы с шириной и высотой:
min-width минимальная ширина
max-width максимальная ширина
min-height минимальная высота
max-height максимальная высота
Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента
Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое
Как запомнить порядок сторон: TRouBLe
p { margin: top right bottom left; }
p { padding: top right bottom left; }
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:
При значении border-box ширина начинает включать
поля и границы, но не отступы. Таким образом,
подключая box-sizing со значением border-box к
своему стилю, мы можем задавать ширину в
процентах и спокойно указывать border и padding, не
боясь, что изменится ширина блока
определяет, как элемент должен быть показан в документе
Важно! Display не переопределяет блочность/строчность элемента, а всего лишь управляет его свойствами при отображении
Значения:
none - элемент не отображается
block - элемент показывается как блочный
inline - элемент показывается как строчный
inline-block - внутренняя часть форматируется как блочный элемент, а сам элемент - как встроенный
"Табличные" значения (основные):
table
table-row
table-cell
table-column
Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним
{ visibility: hidden; } { visibility: visible; } { visibility: collapse; }
Управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
браузеры поддерживают и свойства overflow-x, overflow-y, которые определяют поведение при переполнении по каждой из осей: x и y.
Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон.
Синтаксис:
float:
left
right
none
<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 устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.
Синтаксис:
clear:
none
left
right
both
<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
}
Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
static | Элементы отображаются как обычно. Использование атрибутов left, top, right и bottom не приводит к каким-либо результатам. значение по умолчанию |
fixed | Привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы |
relative | Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. Также устанавливает новую точку привязки для абсолютно позиционированных элементов |
absolute | Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. |
Если у родительского элемента
position static
Если у родительского элемента
position relative/absolute/fixed
Элемент позиционируется относительно <body>
Элемент позиционируется относительно родителя
Единицы изменения для координат: пиксели, проценты, em и т.д. В том чисте отрицательные значения
позволяет менять способ перекрытия элементов друг другом. Чем значение z-index больше, тем ближе к читателю находится элемент
Работает только если задано position absolute, relative или fixed
Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index