ПОЗИЦИОНИРОВАНИЕ HTML-элементов Web-страницы С ИСПОЛЬЗОВАНИЕМ CSS-СТИЛЕЙ

Сентябрь 2, 2022

Главная
Алгебра
ПОЗИЦИОНИРОВАНИЕ HTML-элементов Web-страницы С ИСПОЛЬЗОВАНИЕМ CSS-СТИЛЕЙ

Содержание

2. Блочная модель Web-страницы Все HTML-элементы формируют блок, у которого есть поля margin, границы border и отступы
3. Позиционирование на Web-странице Позиционирование – ядро языка CSS, предоставляет неограниченные возможности по управлению внешним видом Web-страницы.
4. Типы позиционирования Абсолютное absolute – относительно корневого элемента или относительно блока-контейнера : {position: absolute; left: 10px;
6. Скачать презентацию

Слайд 2

Блочная модель Web-страницы
Все HTML-элементы формируют блок, у которого есть поля margin,

границы border и отступы padding.
Такие блоки могут быть отдельными блоками – блочного уровня (,

,

, …) и строчными блоками – внутри строки текста (, , , …).
Блочная модель позволяет позиционировать размещение HTML-элементов на странице произвольным образом.
Поля блока могут быть заданы с использованием как положительных так и отрицательных значений.
Границы блока могут стилизовать рамки вокруг блока сложным образом.
Отступы позволяют добавить в блок необходимые сдвиги относительно других элементов страницы

Позиционирование на Web-странице
Позиционирование – ядро языка CSS, предоставляет неограниченные возможности по

управлению внешним видом Web-страницы.
Для позиционирования используются CSS-стили для блоков информации и перемещение этих блоков относительно документа или окна браузера (для создания позиционируемого блока обычно используется дескриптор

).
В CSS выделяются понятия:
Нормальный поток – нестилизованное позиционирование содержимого страницы в браузере
Блок-контейнер – родительский блок для элемента, который необходимо позиционировать
Окно просмотра браузера – окно браузера, в котором отображается содержимое документа

Типы позиционирования
Абсолютное absolute – относительно корневого элемента или относительно блока-контейнера

:
{position: absolute; left: 10px; top: 50px; border: 2px solid red;}
Относительное relative – относительно нормального потока, когда нет другого позиционирования.
Статическое static – позиционирование в нормальном потоке (аналогично относительному).
Фиксированное fixed – позволяет закрепить блок в любом месте страницы, фиксируется относительно окна просмотра при прокрутке:
{position: fixed; left: 0px; top: 0px; background: red;}