Свойства:
width
- определяет ширину элемента.
Значение указывается всеми величинами, принятыми в CSS.
Пример:
width: 200px; // Ширина элемента 200 пикселей
Значение по умолчанию - auto
height
- определяет высоту элемента.
Значение указывается всеми величинами, принятыми в CSS.
Пример:
height: 100px; // Высота элемента 100 пикселей
Значение по умолчанию - auto
max-width
- определяет максимальную ширину элемента.
Значение указывается всеми величинами, принятыми в CSS.
Пример:
max-width: 300px; // Максимальная ширина элемента 300 пикселей
max-height
- определяет максимальную высоту элемента.
Значение указывается всеми величинами, принятыми в CSS.
Пример:
max-height: 150px; // Максимальная высота элемента 150 пикселей
clear
- запрещает обтекание элемента другими с указанной стороны.
Примеры:
clear: both; // Запрещает обтекание слева и справа от элемента
clear: left; // Запрещает обтекание слева от элемента
clear: none; // Разрешает обтекание
Значение по умолчанию - none
clip
- определяет область обрезания элемента (в виде прямоугольника).
Части элемента, которые выступают за грани прямоугольника будут обрезаны.
Устанавливается координатами точек прямоугольника относительно левого верхнего угла браузера.
Координаты указываются в пикселях или процентах
Данный атрибут работает только когда в классе CSS используется
position: absolute;
Пример:
clip: rect (40px, 200px, 60px, 20px);
Пояснение:
40px - расстояние до верхней грани прямоугольника по оси X (по вертикали).
200px - расстояние до правой грани прямоугольника по оси Y (по горизонтали).
60px - расстояние до нижней грани прямоугольника по оси X (по вертикали).
80px - расстояние до левой грани прямоугольника по оси Y (по горизонтали).
В данном случае у нас получится прямоугольник размером 20Х120 пикселей, на расстоянии 40 пикселей от верха и 80 пикселей слева.
display
- определяет нужный вариант отображения элемента в странице.
Примеры:
display: block; // Элемент отображается как блочный
display: inline; // Элемент отображается на одной линии с предыдущим
display: list-item; // Элемент отображается как блочный список
display: none; // Элемент невиден, но продолжает занимать место
float
- определяет по какой стороне выравнивать элемент относительно подительского контейнера.
Примеры:
float: left; // Выравнивание по левой стороне
float: right; // Выравнивание по правой стороне
float: none; // Выравнивание не указывается
Значение по умолчанию - none
overflow
- определяет что делать, если содержание элемента выходит за его границы.
Примеры:
overflow: visible; // Элемент виден даже за пределами границ
overflow: hidden; // Выступающие части будут обрезаны
overflow: scroll; // Выступающие части будут видны с помощью прокрутки
overflow: auto; // Полосы прокрутки добавляются только при необходимости.
Значение по умолчанию - auto
visibility
- определяет видимость элемента.
Примеры:
visibility: visible; // Элемент видим
visibility: hidden; // Элемент невидим
Значение по умолчанию - visible