Расположение элементов в CSS
В этой главе мы рассмотрим стили расположения элементов, используемые в таблицах стилей CSS и их значения.
Стили расположения элементов позволяют располагать текст и изображения в определенное место на странице сайта. Это позволяет сделать страничку удобной для просмотра. В свойствах расположения элементов применяются следующие атрибуты:
margin-top: - задает верхнее поле между элементом страницы и его соседями сверху.
Координата может быть задана как абсолютной величиной X, так и процентом % от высоты родителя.
Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-bottom, значение верхнего поля устанавливается равным значению нижнего поля. Значение по умолчанию auto.
Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-bottom, значение верхнего поля устанавливается равным значению нижнего поля. Значение по умолчанию auto.
Пример:
margin-top: 20pt; <!--отступ сверху 20 пунктов-->margin-right: - задает правое поле между элементом страницы и его соседями справа.
Координата может быть задана как абсолютной величиной X, так и процентом % от ширины родителя.
Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-left, значение правого поля устанавливается равным значению левого поля. Значение по умолчанию auto.
Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-left, значение правого поля устанавливается равным значению левого поля. Значение по умолчанию auto.
Пример:
margin-right: 20pt; <!--отступ справа 20 пунктов-->margin-bottom: - задает нижнее поле между элементом страницы и его соседями снизу.
Координата может быть задана как абсолютной величиной X, так и процентом % от высоты родителя.
Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-top, значение нижнего поля устанавливается равным значению верхнего поля. Значение по умолчанию auto.
Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-top, значение нижнего поля устанавливается равным значению верхнего поля. Значение по умолчанию auto.
Пример:
margin-bottom: 20pt; <!--отступ снизу 20 пунктов-->margin-left: - задает левое поле между элементом страницы и его соседями слева.
Координата может быть задана как абсолютной величиной X, так и процентом % от ширины родителя.
Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-right, значение левого поля устанавливается равным значению правого поля. Значение по умолчанию auto.
Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-right, значение левого поля устанавливается равным значению правого поля. Значение по умолчанию auto.
Пример:
margin-left: 20pt; <!--отступ снизу 20 пунктов-->margin: - задает ширины полей между элементами страницы и его соседями. Заменяет атрибуты margin-top, margin-right, margin-bottom и margin-left.
Может быть задано от одного до четырех значений. Если задано одно значение, оно применяется ко всем четырем полям. Если задано два значения, первое относится к верхнему и нижнему полю, а второе - к левому и правому. Если задано три значения, то первое применяется к верхнему полю, второе - к левому и правому, третье - к нижнему.
Пример:
margin: 20pt; 15pt; 10pt; <!--отступ сверху 20 пунктов, слева-справа 15 пунктов, снизу 10 пунктов-->padding-top: - задает расстояние между элементом страницы и верхней границей.
Координата может быть задана как абсолютной величиной X, так и процентом % от высоты родителя.
Значение по умолчанию 0, для тега <TD> 1.
Значение по умолчанию 0, для тега <TD> 1.
Пример:
padding-top: 15pt; <!--отступ сверху 15 пунктов-->padding-right: - задает расстояние между элементом страницы и правой границей.
Координата может быть задана как абсолютной величиной X, так и процентом % от ширины родителя.
Значение по умолчанию 0, для тега <TD> 1.
Значение по умолчанию 0, для тега <TD> 1.
Пример:
padding-right: 15pt; <!--отступ справа 15 пунктов-->padding-bottom: - задает отступ между элементом страницы и нижней границей.
Координата может быть задана как абсолютной величиной X, так и процентом % от высоты родителя.
Значение по умолчанию 0, для тега <TD> 1.
Значение по умолчанию 0, для тега <TD> 1.
Пример:
padding-bottom: 15pt; <!--отступ снизу 15 пунктов-->padding-left: - задает расстояние между элементом страницы и левой границей.
Координата может быть задана как абсолютной величиной X, так и процентом % от ширины родителя.
Значение по умолчанию 0, для тега <TD> 1.
Значение по умолчанию 0, для тега <TD> 1.
Пример:
padding-left: 15pt; <!--отступ слева 15 пунктов-->padding: - задает отступ между элементом страницы и различными границами. Заменяет атрибуты padding-top.
Координата может быть задана как абсолютной величиной X, так и процентом % от ширины родителя.
Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-right, значение левого поля устанавливается равным значению правого поля. Значение по умолчанию auto.
Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-right, значение левого поля устанавливается равным значению правого поля. Значение по умолчанию auto.
Пример:
padding: auto; <!--отступ по умолчанию-->width: - задает ширину свободно позиционирования элемента.
Ширина может быть задана как абсолютной величиной X, так и процентом % от ширины родителя.
Предопределенное значение auto заставляет Web-обозреватель устанавливать ширину элемента самостоятельно.
Значение по умолчанию auto.
Предопределенное значение auto заставляет Web-обозреватель устанавливать ширину элемента самостоятельно.
Значение по умолчанию auto.
Пример:
width: 40%; <!--ширина 40 процентов-->height: - задает высоту свободно позиционированного элемента.
Высота может быть задана как абсолютной величиной X, так и процентом % от высоты родителя.
Предопределенное значение auto заставляет Web-обозреватель устанавливать высоту элемента самостоятельно.
Значение по умолчанию auto.
Предопределенное значение auto заставляет Web-обозреватель устанавливать высоту элемента самостоятельно.
Значение по умолчанию auto.
Пример:
height: 40%; <!--высота 40 процентов-->top: - задает вертикальную позицию верхней границы свободно позиционированного элемента относительно родителя.
Координата может быть задана как абсолютной величиной X, так и процентом % от высоты родителя.
Предопределенное значение auto заставляет Web-обозреватель устанавливать высоту элемента самостоятельно.
Значение по умолчанию auto.
Предопределенное значение auto заставляет Web-обозреватель устанавливать высоту элемента самостоятельно.
Значение по умолчанию auto.
Пример:
top: 20%; <!--отступ сверху 20 процентов-->bottom: - задает вертикальную позицию нижней границы свободно позиционированного элемента относительно родителя.
Координата может быть задана как абсолютной величиной X, так и процентом % от высоты родителя.
Предопределенное значение auto заставляет Web-обозреватель позиционировать элемент самостоятельно.
Значение по умолчанию auto.
Предопределенное значение auto заставляет Web-обозреватель позиционировать элемент самостоятельно.
Значение по умолчанию auto.
Пример:
bottom: 20%; <!--отступ снизу 20 процентов-->left: - задает горизонтальную позицию левой границы свободно позиционированного элемента относительно родителя.
Координата может быть задана как абсолютной величиной X, так и процентом % от высоты родителя.
Предопределенное значение auto заставляет Web-обозреватель позиционировать элемент самостоятельно.
Значение по умолчанию auto.
Предопределенное значение auto заставляет Web-обозреватель позиционировать элемент самостоятельно.
Значение по умолчанию auto.
Пример:
left: 20%; <!--отступ слева 20 процентов-->right: - задает горизонтальную позицию правой границы свободно позиционированного элемента относительно родителя.
Координата может быть задана как абсолютной величиной X, так и процентом % от высоты родителя.
Предопределенное значение auto заставляет Web-обозреватель позиционировать элемент самостоятельно.
Значение по умолчанию auto.
Предопределенное значение auto заставляет Web-обозреватель позиционировать элемент самостоятельно.
Значение по умолчанию auto.
Пример:
right: 20%; <!--отступ справа 20 процентов-->float: - определяет обтекание элемента другими слева или справа вместо помещения под ним.
float: none; - заставляет элемент страницы появляться там, где он задан (используется по умолчанию);
float: left; - принудительно выравнивает элемент страницы по левому краю;
float: right; - по правому краю.
float: left; - принудительно выравнивает элемент страницы по левому краю;
float: right; - по правому краю.
Пример:
float: left; <!--выравнивание по левому краю-->vertical-align: - задает вертикальное выравнивание элемента страницы внутри родителя.
vertical-align: auto; - выравнивает элемент страницы согласно значению атрибута layout-flow;
vertical-align: baseline; - задает выравнивание базовой линии элемента страницы по базовой линии родителя (используется по умолчанию);
vertical-align: sub; - превращает текст в нижний индекс;
vertical-align: super; - превращает текст в верхний индекс;
vertical-align: top; - выравнивает верх элемента страницы по самому верху родителя;
vertical-align: text-top; - выравнивает верх текста элемента страницы по верху текста родителя;
vertical-align: middle; - выравнивает центр элемента страницы по центру родителя;
vertical-align: bottom; - выравнивает низ элемента страницы по низу родителя;
vertical-align: text-bottom; - выравнивает низ текста элемента страницы по низу текста родителя.
vertical-align: baseline; - задает выравнивание базовой линии элемента страницы по базовой линии родителя (используется по умолчанию);
vertical-align: sub; - превращает текст в нижний индекс;
vertical-align: super; - превращает текст в верхний индекс;
vertical-align: top; - выравнивает верх элемента страницы по самому верху родителя;
vertical-align: text-top; - выравнивает верх текста элемента страницы по верху текста родителя;
vertical-align: middle; - выравнивает центр элемента страницы по центру родителя;
vertical-align: bottom; - выравнивает низ элемента страницы по низу родителя;
vertical-align: text-bottom; - выравнивает низ текста элемента страницы по низу текста родителя.
Пример:
vertical-align: text-top; <!--выравнивание текста по верху-->overflow: - задает поведение элемента страницы, если содержимое в нем не помещается.
overflow: visible; - заставляет элемент страницы расшириться так, чтобы все его содержимое было видно (значение по умолчанию);
overflow: scroll; - заставляет Web-обозреватель отобразить в элементе страницы полосы прокрутки, пользуясь которыми можно прокручивать его содержимое;
overflow: hidden; - скрывает все то, что выходит за пределы элемента страницы;
overflow: auto; - аналогично scroll за тем исключением, что полосы прокрутки отображаются только тогда, когда они реально необходимы (значение по умолчанию для <TEXTAREA>).
overflow: scroll; - заставляет Web-обозреватель отобразить в элементе страницы полосы прокрутки, пользуясь которыми можно прокручивать его содержимое;
overflow: hidden; - скрывает все то, что выходит за пределы элемента страницы;
overflow: auto; - аналогично scroll за тем исключением, что полосы прокрутки отображаются только тогда, когда они реально необходимы (значение по умолчанию для <TEXTAREA>).
Пример:
overflow: scroll; <!--отображение полос прокрутки-->overflow-x: - задает поведение элемента страницы, если его ширина меньше ширины содержимого.
overflow: visible; - заставляет элемент страницы расшириться по горизонтали так, чтобы все его содержимое было видно (значение по умолчанию);
overflow-x: scroll; - заставляет Web-обозреватель отобразить в элементе страницы полосы прокрутки, пользуясь которыми можно прокручивать его содержимое;
overflow-x: hidden; - скрывает все то, что выходит за пределы элемента страницы;
overflow-x: auto; - аналогично scroll за тем исключением, что полосы прокрутки отображаются только тогда, когда они реально необходимы (значение по умолчанию для <TEXTAREA>).
overflow-x: scroll; - заставляет Web-обозреватель отобразить в элементе страницы полосы прокрутки, пользуясь которыми можно прокручивать его содержимое;
overflow-x: hidden; - скрывает все то, что выходит за пределы элемента страницы;
overflow-x: auto; - аналогично scroll за тем исключением, что полосы прокрутки отображаются только тогда, когда они реально необходимы (значение по умолчанию для <TEXTAREA>).
Пример:
overflow-x: scroll; <!--отображение полос прокрутки-->overflow-y: - задает поведение элемента страницы, если его высота меньше высоты его содержимого.
overflow: visible; - заставляет элемент страницы расшириться по вертикали так, чтобы все его содержимое было видно (значение по умолчанию);
overflow-y: scroll; - заставляет Web-обозреватель отобразить в элементе страницы полосы прокрутки, пользуясь которыми можно прокручивать его содержимое;
overflow-y: hidden; - скрывает все то, что выходит за пределы элемента страницы;
overflow-y: auto; - аналогично scroll за тем исключением, что полосы прокрутки отображаются только тогда, когда они реально необходимы (значение по умолчанию для <TEXTAREA>).
overflow-y: scroll; - заставляет Web-обозреватель отобразить в элементе страницы полосы прокрутки, пользуясь которыми можно прокручивать его содержимое;
overflow-y: hidden; - скрывает все то, что выходит за пределы элемента страницы;
overflow-y: auto; - аналогично scroll за тем исключением, что полосы прокрутки отображаются только тогда, когда они реально необходимы (значение по умолчанию для <TEXTAREA>).
Пример:
overflow-y: scroll; <!--отображение полос прокрутки-->zoom: - задает масштаб отображения элемента страницы.
Масштаб может быть задан как числом с плавающей точкой, обозначающим степень увеличения или уменьшения, так и процентной величиной. Предопределенное значение normal задает масштаб 1.0 или 100%.
Значение по умолчанию normal.
Значение по умолчанию normal.
Пример:
zoom: normal; <!--масштаб 100%-->table-lowout: - позволяет "зафиксировать" значения ширины ячеек таблицы.
table-lawout: auto; - устанавливает ширину ячейки по ширине ее содержимого (значение по умолчанию);
table-lawout: fixed; - использует для установки ширин ячеек значения атрибутов WIDTH или, если они не заданы, просто дает ячейкам равную ширину.
Другими словами, задание значения auto позволит точно "подогнать" значения ширин ячеек, но таблица при этом будет выводиться очень долго. Значение fixed этого атрибута позволит Web-обозревателю вывести таблицу значительно быстрее, но Web-дизайнер должен будет сам задать значения ширин ячеек. Это может сильно ускорить вывод больших таблиц на экран.
Применяется только для тега <TABLE>.
table-lawout: fixed; - использует для установки ширин ячеек значения атрибутов WIDTH или, если они не заданы, просто дает ячейкам равную ширину.
Другими словами, задание значения auto позволит точно "подогнать" значения ширин ячеек, но таблица при этом будет выводиться очень долго. Значение fixed этого атрибута позволит Web-обозревателю вывести таблицу значительно быстрее, но Web-дизайнер должен будет сам задать значения ширин ячеек. Это может сильно ускорить вывод больших таблиц на экран.
Применяется только для тега <TABLE>.
Пример:
table-lowout: auto; <!--ширина ячейки по содержимому-->
Шадуро Николай 