Разместить в окне браузера 5 вложенных блоков прямоугольников
Обновлено: 02.07.2024
HTML фреймы используются для разбивки окна браузера на несколько областей, каждая из которых представляет собой отдельный HTML-документ (фрейм или кадр).
Технология использования фреймов является устаревшей и не используется при создании современных сайтов, тем не менее мы знакомимся с этой технологией, так как ее актуальность сохранилась для создания локальных продуктов, которые не будут размещены в Интернет, например, для локальных учебных пособий, которые будут использоваться на десктопных компьютерах с достаточно большой шириной экрана.
HTML5 окончательно удалил инструмент фреймов, но, при этом элемент <iframe>, который позволяет вставлять одну страницу в другую, остался в новом стандарте. Это ему удалось по той причине, что он используется на веб-страницах для выполнения ряда интеграционных задач, таких как вставка в страницы окон YouTube, рекламных блоков и поисковых полей Google.
Вернемя к нашим фреймам. Назначение HTML фреймов – это навигация (а не средство для разметки страницы). Идея фрейма заключается в том, чтобы разделить экран на несколько областей или окон. Это позволяет одновременно видеть больше одного документа и дает возможность на все время закрепить навигацию на экране.
При использовании простого дизайна с двумя HTML фреймами (рис.1) задействовано три документа:
- документ, описывающий фреймовую структуру,
- документ для левого фрейма,
- документ для правого фрейма.
Рис. 1. Простая фреймовая структура из двух фреймов
Фреймы содержатся в структуре <frameset> и </frameset> , замещающей в странице с фреймами структуру <body> и </body>, т.е. документ, описывающий фреймовую структур не имеет тегов <body> и </body>.
Допускается вложение фреймовых областей.
Атрибуты тега <FRAMESET>
Этот атрибут определяет количество и ширину столбцов фрейма. Ширину столбцов можно задать в пикселях или в процентах.
cols=n – определяет столбец шириной в n пикселей.
cols=n% – выделяет данному столбцу фрейма n%-долю ширины окна броузера.
Этот атрибут определяет количество и высоту строк фрейма. Высоту строк можно задать в пикселях или в процентах.
rows=n – определяет строку высотой в n пикселей.
rows=n% – выделяет данной строке фрейма n%-долю высоты окна броузера.
frameborder
Этот атрибут определяет отображение рамок фреймовой структуры.
frameborder=yes – отображается трехмерная рамка (значение по умолчанию).
frameborder=no – рамка невидима
Лучше определять строки и столбцы не в пикселах, а используя относительные значения. Символ звездочка (*) используется для указания того, что экран делится на пропорциональные части: COLS="*,*,*" – соответствует COLS="33%,33%,33%".
В значениях COLS (столбец), ROWS (строка) перечень должен быть заключен в кавычки. Если кавычки не используются, между значениями не должно быть пробелов.
Рассмотрим пример кода простой фреймовой структуры, изображенной на рис. 1.
Практическое задание 1
- Создайте папку frames. Скопируйте в нее файлы с изображениями фонов fon3.jpg,fon8.jpg,fon10.jpg из папки html_css_4
- Откройте файл shablon.html
- Измените код как в листинге на рисунке 2. Сохраните документ под именем frames_2.html
- Создайте файл, как на рисунке 3. Сохраните документ под именем doc1.html
- Создайте файл, как на рисунке 4. Сохраните документ под именем doc2.html
- Запустите файл frames_2.html двойным щелчком. В окне браузера Internet Explorer web-страница должна иметь вид, как на рис. 1
Рисунок 2. Фреймовая структура из двух столбцов
Рисунок 3. Документ doc1.html
Рисунок 4. Документ doc2.html
На рис. 1 представлен вид этой HTML-страницы в браузере. Экран по вертикали разбивается на 2 фрейма. Левый HTML фрейм занимает 25% экрана и содержит страницу с названием doc1.html. Правый HTML фрейм займет 75% экрана и содержит страницу doc2.html.
Тег <FRAME>
Тег <frame> определяет отдельный фрейм. Это непарный тег. Тегов <frame> должно быть ровно столько, на сколько областей делится экран. У тега <frame> имеются следующие атрибуты:
Этот атрибут указывает URL-адрес содержимого фрейма.
С помощью этого атрибута фрейму присваивается имя, которое можно использовать для ссылки на фрейм, обычно из других фреймов той же структуры. В гипертекстовой ссылке при этом используется атрибут target, который ссылается на имя фрейма. Имена фреймов могут состоять из букв и цифр. В качестве первого символа имени нельзя использовать символ подчеркивания ().
Этот атрибут используется для управления полосами прокрутки фрейма, когда это важно для определения внешнего вида страницы. Его значения:
scrolling=yes (установка полосы прокрутки)
scrolling=no (отсутствие полосы прокрутки)
scrolling=auto (значение по умолчанию)
Этот атрибут запрещает пользователю изменение размеров фреймов, чтобы предотвратить искажение дизайна страницы.
Практическое задание 2
- Откройте файл shablon.html.
- Измените текст, как в листинге на рисунке 5.
- Сохраните документ в папке frames под именем frames_3.html
- В новом документе наберите текст, изображенный в листинге 6. Сохраните документ под именем doc3.html
- Запустите файл frames_3.html двойным щелчком. В окне браузера Internet Explorer Web-страница должна иметь вид, как на рис. 7.
Обращаем Ваше внимание на то, что во фреймовой структуре количество открывающих <frameset> должно быть равно количеству закрывающих </frameset>
Рисунок 5. Фреймовая структура из трех фреймов
Рисунок 6. Документ doc3.html
Рисунок 7. Фреймовая структура из трех фреймов
Контрольное задание
2. Организация гиперссылок
Для организации гиперссылок используется тег <а>, у которого есть обязательные атрибуты, иначе гиперссылка работать не будет.
Рассмотрим пока только обязательный атрибут href.
Структура гиперссылки
Исходный якорь – это текст или изображение, по которому щелкает пользователь мышью, чтобы перейти к другому web-сайту или web-странице.
Конечный якорь – это адрес того сайта или страницы, который должен загрузиться после щелчка мышью по исходному якорю.
Гиперссылки можно встроить в любое место HTML – документа.
На рис. 9 приведен пример HTML-кода создания гиперссылки и вид в браузере страницы с этим кодом:
Подробную информацию об услугах нашего агентства Вы можете получить
<a href="inform.htm">здесь</a>
Рис. 9. Пример создания текстовой гиперссылки
В этом примере слово “здесь” является элементом привязки (или якорем – anchor), а часть href=”inform.htm” представляет ссылку на URL и означает, что при щелчке на элементе привязки должен быть загружен файл “inform.htm”, находящийся в том же адресе сети.
Элементы привязки (якорь – anchor)
Элемент привязки в ссылке может быть словом, группой слов или изображением. Существуют только два типа элементов привязки: текстовый и графический.
Текстовые ссылки браузер обычно выделяет цветом, отличным от цвета основного текста, подчеркиванием. Кроме того, курсор мыши на ссылке меняет свое изображение на указатель в виде руки.
Графические элементы привязки не подчеркиваются и не выделяются цветом, но могут быть обведены рамкой.
Рассмотрим пример организации графической гиперссылки (рис. 10):
У нас в агентстве приветливые и компетентные диспетчеры
Рис. 10. Пример создания графической гиперссылки
В этом примере рисунок "ris.jpg" является графическим элементом привязки. Браузер выделяет его синей рамкой.
Виды адресов
Абсолютный адрес – это полный адрес в Internet.
- <а href="http://www.rambler.ru"> – удаленный переход;
- <а href="c:\temp\myfile.html"> – использование в ссылке абсолютного адреса на своем сервере ( не используется ).
Относительный адрес. Правила относительной адресации мы рассмотрели в теме 1. При написании адресов гиперссылок используются те же правила. Рекомендуется применение относительных адресов, поскольку при каждом перемещении каталога не приходится менять все ссылки.
- <а href="../folder/my.htm"> – переход на другой документ на своем сайте
Гиперссылки можно разделить на 3 категории:
1. Внешняя – ссылка на web-страницу, которая находится по другому адресу Internet (за пределами сайта). Для ее организации используется абсолютный адрес.
Пример: <а href="http://www.rambler.ru">
2. Внутренняя – ссылка на другую web-страницу внутри сайта. Для ее организации необходимо использовать относительный адрес.
Пример: <a href="../../folder_1/folder_2/mysite.htm">Текст гиперссылки</a>
3. Внутристраничная – ссылка на другую позицию внутри той же web-страницы. Например, в верхней части web-страницы можно поместить оглавление, а затем связать его пункты с последующими разделами этой же web-страницы или с конкретными разделами другой web-страницы внутри сайта.
Практическое задание 3
- Откройте раздел «Организация гиперссылок» в файле справочника Sprav_html.doc. Ознакомьтесь с атрибутами тега <a>. Будьте готовы ответить на вопросы по правилам задания значений этих атрибутов.
- В файле menu.html для пункта «Проекты таунхаусов и блокированных домов», сделайте гиперссылку, целевым адресом которой является web-страница townhouse.html таким образом, чтобы web-страница townhouse.html грузилась в правый фрейм. Напомним, для того, чтобы ссылка грузила документ в нужный фрейм в теге <a> необходимо указать атрибут target, который содержит имя фрейма, куда должен быть загружен документ. Например, <a href="townhouse.html" target="main">. Результат на рис. 11.
Практическое задание 4
1. В папке public_html создайте папку project, а внутри нее папку img_d_152_1d.
2. Оформите web-страницу о проекте d-152-1d, используя материалы (тексты и фотографии) из папки projects/d-152-1d. Для оформления web-страницы должны быть использованы стили в таблице стилей и форматирование средствами атрибутов тегов.
3. Все материалы должны быть использованы. В результате на web-странице у Вас должны быть следующие блоки: Заголовок, Аннотация, Материалы, Цена за проект, Планы, Фасады
4. Сохраните web-страницу под именем projekt_d-152-1d.html в папке projects. Примерный результат на рис. 12.
Рис. 12. Web-страница projekt_d-152-1d.html.
5. На web-странице townhouse.html оформите изображение проекта D-152-1D и фразу «Проект D-152-1D» как гиперссылки на страницу projekt_d-152-1d.html, на которой содержится более полная информация об этом проекте (рис. 13).
6. Проверьте работоспособность гиперссылок.
Рис. 13. Изображение является гиперссылкой
Внутристраничные гиперссылки
Внутристраничная гиперссылка создается в два этапа.
Например, необходимо создать ссылку из оглавления на первую главу
1. В оглавлении рядом с названием главы 1 следует создать запись:
2. Внутри web-страницы рядом с заголовком главы 1 создать метку и с помощью атрибута name тега <a> присвоить ей имя. Браузер не выделяет содержимое этого тега как ссылку, так как оно используется в качестве метки. В пределах документа метка должна быть уникальной.
<a name="glava1">Глава 1</a>
Практическое задание 5
1. Откройте созданную Вами web-страницу projekt_d-152-1d.html.
2. Под заголовком «Проект дома № D-152-1D» добавьте пункты
- Аннотация
- Материалы
- Цена за проект
- Планы
- Фасады
3. Создайте внутристраничные гиперссылки из каждого только что созданного пункта на соответствующий раздел web-страницы (рис. 14, а)
4. Внизу страницы создайте гиперссылку Наверх, при нажатии на которую пользователь будет возвращаться в начало страницы (рис. 14, б).
Рис. 14. Внутристраничные гиперссылки
Задание цвета гиперссылок
Принятые в Web по умолчанию цвета для гиперссылок: синий – для еще не посещенных гиперссылок, красный – для активизированных гиперссылок (в момент щелчка), фиолетовый – для уже посещенных.
Если используемые по умолчанию значения этих атрибутов явно не согласуются с дизайном Вашей страницы, то значения можно поменять. Для этого у тега <BODY> есть соответствующие атрибуты.
Цвет гиперссылки (по умолчанию светло-голубой)
Цвет использованной гиперссылки (по умолчанию темно-фиолетовый)
Цвет активизированной гиперссылки (в момент щелчка)
Практическое задание 6
- Вверху левого фрейма сделайте логотип графической гиперссылкой таким образом, чтобы при ее активизации в правый фрейм загружалась страница о сайте (файл main.html).
- Убедитесь в работоспособности всех гиперссылок. Ваш сайт должен выглядеть примерно так, как показано на рис. 15, при переходе по ссылке «Проекты таунхаусов и блокированных домов» так, как на рис. 16, при щелчке на изображении проекта D-152-1D как на рис. 17.
Рис. 16. Вид web-сайта при активной ссылке «Проекты таунхаусов и блокированных домов»
Рис. 17. Вид web-сайта при активной ссылке «Проект D-152-1D»
Работа со специальными элементами
Работа со специальными элементами определяется с помощью псевдоклассов.
Псевдокласс – специальный селектор, определяющий, как выглядит HTML-элемент в определенный момент.
Например, CSS определяет псевдокласс, который устанавливает, как выглядят гиперссылки в определенные моменты времени:
a:link – не посещенные ссылки;
a:visited – посещенные ссылки;
a:active – активные ссылки;
a:hover – ссылка при наведении на нее фокуса.
Можно определить псевдокласс для первого символа элемента. Например, для абзаца:
p:first-letter . Это удобно для задания спецэффектов выделения заглавных букв.
Практическое задание 7
1. Для верхнего меню страницы проекта включите в файл внешнюю стилевую спецификацию, определяющую вид гиперссылки в определенные моменты. Для этого самостоятельно определите параметры стиля согласно рис. 18.
2. Проверьте работоспособность стиля.
а – не посещенные ссылки
б – ссылка при наведении на нее курсора
Рис. 18. Вид гиперссылки в определенный момент времени
Практическое задание 8
1. Для пункта «Проекты таунхаусов и блокированных домов» включите в файл внешнюю стилевую спецификацию, определяющую вид гиперссылки в определенные моменты. Для этого самостоятельно определите параметры стиля согласно рис. 19.
2. Проверьте работоспособность стиля. Обратите внимание на то, чтобы не изменился цвет фона и параметры других элементов меню. Измениться должен только вид гиперссылки.
а – не посещенная и посещенная ссылка
б – ссылка при наведении на нее курсора
Рис. 19. Вид гиперссылки «Проекты таунхаусов и блокированных домов»
3. Для пункта с названием проекта на странице proekt_townhouse.html включите в файл внешнюю стилевую спецификацию, определяющую вид гиперссылки в определенные моменты. Для этого самостоятельно определите параметры стиля согласно рис. 20.
4. Проверьте работоспособность стиля.
а – не посещенная ссылка
б – ссылка при наведении на нее курсора
Рис. 20. Вид гиперссылки для названия проектов
В результате выполнения этой темы, у Вас должны быть созданы следующие файлы:
Как создать структуру страницы с помощью блоков (блочная вёрстка)
1. Как разбить макет страницы на секции
Чтобы создать макет страницы, необходимо выделить основные разделы (секции) документа. Подробнее о секционных элементах вы можете прочитать в статье 1.11. HTML5 семантические элементы.
Стандартная веб-страница содержит следующие секции:
Рис. 1. Основные секции страницы
Мы не будем использовать элемент <main> , так как он поддерживается не всеми браузерами.
Рис. 2. Основные секции страницы с тегом-контейнером
и задать для него максимальную ширину, внутренние отступы, которые будут отделять контент от краёв экрана устройств с небольшим разрешением, а также внешние отступы, позволяющие выровнять контейнер по середине родительского блока:
Таким образом мы получили каркас для нашей страницы (высота секций в данном случае виртуальная, так как без содержимого секции имеют нулевую высоту).
2. Разметка шапки сайта и позиционирование её элементов
Приступим к разметке первой секции, так называемой шапки веб-страницы. Элемент <header> предназначен для группировки вводной информации и навигационных средств по странице/сайту. Добавим внутрь тега <header> логотип сайта и навигационные ссылки:
Рис. 3. Шапка сайта с добавленными логотипом и ссылками
Существует несколько способов разместить блочные элементы в строку. Все они приведены в уроке Горизонтальное меню для сайта.
Рис. 4. Эффект схлопывания блока-контейнера
Также добавим ему вертикальные отступы, отделяющие элементы внутри него от краёв шапки. В результате стили будут иметь следующие вид:
Рис. 5. Очистка потока
Рассмотрим ситуацию, когда в качестве логотипа выступает картинка. Она может быть добавлена непосредственно внутрь тега или же в качестве фонового изображения. Картинка будет иметь свою высоту, которая может сильно отличаться от высоты меню навигации, поэтому перед нами встанет проблема вертикального выравнивания элементов шапки.
Рис. 6. Логотип-картинка
В нашем примере высота логотипа равна 38px , поэтому чтобы выровнять ссылки меню по высоте по середине шапки, нужно задать для них соответствующую высоту строки:
Рис. 7. Выравнивание ссылок меню шапки
3. Создание сетки для основной части страницы
Основная часть страницы чаще всего представляет собой сетку из блоков разной ширины. Позиционирование таких блоков осуществляется также с помощью свойства float . Каждую строку блоков обернём дополнительным блоком с классом .row :
Рис. 7. Сетка основной части страницы
Для элемента с классом .row также применим очистку потока:
Чтобы отделить ряды друг от друга, можно добавить нижний внешний отступ:
Высота блоков сетки определяется высотой их содержимого, поэтому она может быть разная:
Рис. 8. Разная высота элементов сетки
Высоту блоков можно зафиксировать, указав её явно, например, .row div . Но в этом случае нужно быть уверенным, что при добавлении адаптивности макету содержимое блоков не будет выходить за край блока.
Если необходимо задать фоновый цвет для блоков ряда, то это можно сделать следующим образом: для элемента с классом .row добавим новый класс, который позволит стилизовать только этот ряд (получится .row row-one ), укажем для него фоновый цвет меньшего по высоте блока, а для высокого блока зададим его собственный цвет, то есть таким образом мы сделаем фоновую подложку.
Рис. 9. Фоновая подложка
Если основная секция страницы содержит только два блока, то дополнительный ряд-обёртку можно не добавлять:
4. Разметка подвала страницы
Подвал страницы, или нижний колонтитул, обычно содержит информацию о копирайте, дополнительные ссылки и т.п. Вся эта информация также размещается в столбцах, которые могут быть одинаковой или разной ширины.
Приветствую всех жителей хабравиля! Сегодня я подготовил для вас материал по основам по блочной модели CSS. Безусловно, многие из вас знают о чём идёт речь, но сегодня я постараюсь объяснить прописные истины более понятно и наглядно, что поможет вам создавать веб-сайты, с идеально подходящими друг другу элементами (с точностью до пикселя), и научит более точно использовать свойства размеров, полей, отступов и границ. Итак, всех приглашаю под кат и погнали!
Оглавление
Зачем изучать блочную модель CSS?
Блочная модель CSS состоит из свойств: box-sizing, padding и margin. Если их не использовать, то получим что-то похожее
Веб-сайт без полей и отступов
Но если вы будете правильно использовать свойства блочной модели, ваш сайт будет выглядеть так
Веб-сайт, использующий свойства блочной модели
Выглядит гораздо более привлекательно, не так ли? Если вы хотите создать свой сайт с точными расчетами, как тот, что указан выше, то вы попали по адресу. Изучение блочной модели CSS - один из многих способов, которые помогут вам сделать веб-сайты, идеальные до пикселя.
В этой статье мы поговорим о том, как использовать эти свойства:
Как использовать свойства блочной модели CSS
Давайте посмотрим на несколько примеров, где мы можем использовать свойства блочной модели CSS. Мы собираемся проанализировать сайт, показанный выше.
Давайте внимательнее посмотрим на навигационную панель (navbar). Вы можете заметить разницу между примером, в котором используется свойство padding, и примером, в котором его нет:
Элементы навигационной панели, использующие свойство padding
Теперь давайте подробнее рассмотрим раздел содержимого вместе с кнопками. Опять же, вы заметите разницу - на правой картинке также используется свойство padding.
Раздел содержимого, использующий свойство padding
Структура блочной модели CSS
Говоря о блочной модели, стоит воспринимать её как луковицу. И эта "луковица" имеет 4 слоя:
1 слой: Content
2 слой: Padding
3 слой: Border
4 слой: Margin
1 слой блочной модели: Content
В HTML все ведет себя как ящик с контентом. Давайте вставим контент с изображением котенка.
Первый слой
2 слой блочной модели: Padding
Следующий слой блочной модели CSS - это слой заполнения. Он обертывает наш контент следующим образом
Второй слой
3 слой блочной модели: Border
Следующий слой блочной модели CSS - это пограничный слой. Он обертывает наш контент + отступы следующим образом
Черная пунктирная линия - граница
4 слой блочной модели: Margin
Следующим и последним слоем блочной модели CSS является слой полей. Он обертывает наш контент + отступ + границу следующим образом
Четвёртый слой
Итак, давайте посмотрим, как эти свойства работают в проекте.
Как настроить проект
Это руководство подходит для всех, в том числе для новичков. Если вы хотите писать код, выполните следующие действия.
Откройте VS Code или Codepen.io и напишите этот код внутри тега body:
Очистите стили нашего браузера по умолчанию
Теперь давайте стилизуем наш блок
Все готово, приступим к программированию!
Свойство Padding
Но сначала давайте обсудим практическое использование свойства padding. Затем мы увидим, как использовать это свойство.
Обычно я использую отступы, чтобы оставить пространство между содержимым. Посмотрите на эту навигационную панель
Элементы навигационной панели, использующие свойство padding
Вот вам еще один пример - посмотрите на содержимое ниже с двумя кнопками
раздел содержимого с использованием свойства заполнения
Как использовать свойство padding в CSS
Ниже представлены названия четырех свойств заполнения:
И помните, что отступы - это пространство, которое вы добавляете поверх основного контента:
Второй слой
Давайте добавим отступы к нашему контенту. Область красного цвета - это отступ
Область красного цвета - это отступ
Чтобы воссоздать результаты, указанные выше, напишите этот код в свой CSS:
Откроем консоль разработчика и перейдем в вычисляемый раздел:
В самом центре - контент, который 300px в ширину. Посмотрите, вокруг контента мы добавили отступы по 100 пикселей.
Давайте попробуем добавить отступ только к одной стороне нашего контента (только с правой стороны):
свойство padding-right
Чтобы воссоздать результаты, указанные выше, напишите этот код в свой CSS:
Теперь откройте вычисляемый раздел в консоли разработчика
Посмотрите - отступ в 100 пикселей был добавлен только с правой стороны нашего контента, как мы указали.
Свойство Border
Обычно вы будете использовать свойство border при создании кнопок. Вот демонстрация GIF
Кнопки, использующие свойство Border
Обратите внимание, как появляется белая рамка вокруг кнопки, когда наводится указатель мыши на кнопку.
Как использовать свойство границы в CSS
И помните, граница - это пространство, добавленное поверх нашего контента + отступа:
Черная пунктирная линия - граница
Есть три важных параметра свойства границы:
border style: solid (сплошная линия) / dotted ("точечная" линия) / dashed (пунктир)
Как я перечислил выше, существует три стиля свойства границы. В этом примере мы будем использовать пунктирный стиль:
Чтобы воссоздать приведенные выше результаты, напишите этот код в своем CSS:
Откроем консоль и посмотрим расчеты блочной модели:
Теперь посмотрите на изображение выше - вокруг нашего контента + отступа добавлена граница 10 пикселей.
Свойство Margin
Обычно я использую свойство margin, чтобы добавить отступ между моим контентом и экраном на макете рабочего стола. Посмотрите на эту гифку:
Добавление отступов на сайт
Обратите внимание, что я добавил поля к левому и правому краям веб-сайта выше
Вот еще один пример использования свойства margin:
Добавление отступов на сайт
Как использовать свойство margin в CSS
Margin имеет всего четыре свойства поля:
И помните, margin - это пространство, добавленное поверх нашего контента + отступы (по padding) + границы:
Серая область - margin
Давайте добавим отступ к нашему контенту. Весь наш набор смещается из-за margin, как в этом GIF:
Чтобы воссоздать приведенные выше результаты, напишите этот код в своем CSS:
Можем еще раз проверить расчеты:
Посмотрите, вокруг нашего контента + отступов + границы было добавлено поле 50 пикселей .
Давайте попробуем добавить поле только к одной стороне нашего контента (только левой стороне):
Свойство margin-left
Чтобы воссоздать результаты выше, напишите этот код в своем CSS
На консоли мы видим, что поле в 50 пикселей применено только к левой стороне
Свойство box-sizing
Это свойство определяет, как будут рассчитываться поля, отступы и границы. Есть три типа вычислений (можно называть их свойствами):
Примечание:
Мы не будем обсуждать padding-box, поскольку его поддерживает только Firefox, и он используется не очень часто.
В чем разница между content-box и border-box в CSS?
И border-box, и content-box работают одинаково. Посмотрите на эти изображения:
Блоки, использующие свойство border-box Блоки, использующие свойство content-box
Итак, в чем здесь главное отличие? Разница заметна, когда мы добавляем поля, границу или отступы к нашим блокам.
Когда мы используем box-sizing: content-box, который является значением по умолчанию, он добавит поля, отступы и границы за пределами поля, например:
Заполнение применяется стандартно
Вы также можете увидеть расчеты здесь:
Расчеты с content-box
Это означает, что все может выйти из-под контроля, и вы можете получить неожиданный результат. Это означает, что при таком подходе, будет сложно создавать адаптивные веб-сайты. Вместо этого всегда используйте свойство box-sizing: border-box.
Но когда мы используем свойство box-sizing: border-box, оно добавит поля, отступы и границы вовнутрь блока, например:
Применение вовнутрь блока
В box-sizing: border-box абсолютно точные расчеты HTML - элементов, а это значит, что такой способ является идеальным для создания адаптивных веб-сайтов.
Вы также можете поэкспериментировать со значениями - просто используйте этот код:
Заключение
Вот собственно и всё. Для желающих оставлю ссылку на видео-инструкцию к данному уроку от автора (Джоя Шахеба):
HTML-документ состоит из большого количества элементов, вложенных друг в друга. Чтобы из этих элементов и CSS построить изображение страницы , их необходимо как-то в ней расположить. По умолчанию размещение всех элементов на странице осуществляется в нормальном или базовом потоке .
Что это значит? Во-первых, вывод элементов на страницу браузер осуществляет в том порядке, в котором они следуют в HTML коде .
Во-вторых, в коде элементы вложены друг в друга, и чтобы это учитывать при выводе используют так называемые воображаемые слои для отображения элементов . При этом слой элемента тем выше (ближе к нам), чем данный элемент является более вложенным в коде, т.е. глубже расположен в нём.
В-третьих, положение элемента в потоке зависит от значения свойства display .
Например, элементы, имеющее блочное отображение ( display: block ) отображаются в потоке как прямоугольные области, каждый из них на новой линии друг под другом сверху вниз.
Ширина элементов с блочным отображением по умолчанию равна доступной ширине родительского элемента, т.е. элемента, в который каждый из них непосредственно вложен. Высота их по умолчанию равна такой величине, которой будет достаточно, чтобы отобразить весь контент, который находится в каждом из них.
Элементы со строчным отображением ( display: inline ) выводятся иначе. Они в отличии от блочных элементов не размещаются каждый на новой строке, а следуют друг за другом слево направо. Если пространство справа закончилось, то они переносятся на следующую строку, а не на новую линию как элементы с блочным отображением.
Кроме block , inline есть и другие варианты отображения элементов, но все они располагаются в базовом потоке документа.
В CSS есть свойства, с помощью которых элементы можно «вырвать» из основного потока документа и задать им другое положение вне базового потока элементов.
К этим свойствам относятся position и float .
CSS-свойство position
CSS свойство position — это одно из свойств с помощью которого можно изменить базовое поведение элементов в потоке. Другими словами, данное свойство позволяет «выдернуть» любой элемент из потока документа и разместить его в другом месте относительно окна браузера или других элементов на веб-странице.
Свойство position имеет 5 значений:
- static (статичное позиционирование);
- relative (относительное);
- absolute (абсолютное);
- fixed (фиксированное);
- sticky (липкое).
static — это значение по умолчанию. Оно означает что элемент находится в базовом потоке.
Каждый элемент в потоке занимает определённую область. Но область элемента не всегда сохраняется за ним при его позиционировании.
Это, например, происходит при задании элементу position: absolute или position: fixed . В этом случае место не сохраняется за элементом. Другие элементы его «не видят» и располагаются, игнорируя его присутствие в коде.
Статичное позиционирование (static)
Свойство position со значением static элементам назначается по умолчанию . Это значение означает что элемент является не позиционированным , т.е. отображается как обычно (в потоке).
Явная установка элементу CSS-свойства position: static может понадобиться только в том случае, когда нужно переопределить другое значение position установленное элементу.
Установка CSS свойств для задания положения элемента left , top , right и bottom никакого влияния на него не оказывают, т.к. его местонахождение определяется потоком документа .
Пример выстраивания статично позиционированных элементов:
Относительное позиционирование (relative)
Установка относительного позиционирования элементу осуществляется посредством задания ему CSS свойства position: relative .
Относительно позиционированный элемент ведёт себя как элемент в потоке за исключением того, что его текущее положение можно при помощи определённых CSS свойств сместить. К этим CSS свойствам относятся left , top , right и bottom .
Например, для того чтобы элемент сдвинуть вверх или вниз относительного его исходного положения к нему нужно применить CSS свойство top или bottom :
Если одновременно установить top и bottom , то будет применено значение top , т.к. оно является более приоритетным, чем bottom :
Для сдвига элемента вправо или влево используется CSS свойство left или right :
Если одновременно установить left и right , то приоритетным будет значение, находящееся в left :
Для сдвига по двум осям нужно использовать top или bottom , и left или right :
Пример, в котором 2 элементу установим относительное позиционирование и сместим его на 20px вверх и влево относительно его исходного положения:
Если в некоторой области страницы оказываются несколько позиционированных элементов, то они перекрывают друг на друга в определённом порядке. При этом по умолчанию выше оказывается тот элемент, который ниже описан в коде. Но порядок перекрытия элементов (их положение перпендикулярное экрану, т.е. вдоль оси Z) можно изменить. Осуществляется в CSS это с помощью свойства z-index . z-index может принимать отрицательные и положительные целые число, auto и 0 . Но, хорошей практикой является использование в качестве z-index чисел из диапазона 0-9999 .
При этом чем больше у элемента значение z-index , тем ближе он располагается к нам, и, следовательно, перекрывает все элементы в данной области, у которых значение z-index меньше.
Абсолютное позиционирование (absolute)
Установка абсолютного позиционирования элементу осуществляется посредством задания ему position: absolute .
Этот тип позиционирования позволяет разместить элемент именно там, где вы хотите.
Позиционирование выполняется относительно ближайшего позиционированного предка.
Под позиционированным элементом понимается элемент с position , равным relative , absolute , fixed или sticky .
Если среди предков у элемента с position: absolute нет позиционированного элемента, то в этом случае он будет позиционироваться относительно HTML страницы, т.е. элемента body .
Когда элементу устанавливаем position: absolute без указания CSS-свойств ( top , left , right и bottom ), определяющих его положение , он будет находиться в том месте, в котором он был бы расположен, если бы находился в потоке (при этом при вычислении его положения учитываются только элементы, расположенные до него в коде и находящиеся в потоке).
При этом другие элементы его видеть не будут, и, следовательно, они будут расположены на странице, не обращая никакого внимание на него.
CSS-свойства для управления положением абсолютно позиционированного элемента работают по-другому чем с position: relative .
CSS-свойства top , bottom , left и right задают положение элемента относительно ближайшего позиционированного предка или body , если такого предка нет.
Установить ширину (высоту) абсолютно позиционированному можно с помощью установки ему двух координат top и bottom ( left и right ).
Если элементу одновременно установить top , bottom и height , то предпочтение будет отдано top и height .
Абсолютное позиционирование применяется очень часто совместно с относительным позиционированием в дизайнерских целях, когда необходимо разместить различные элементы относительного друг друга, так же может применяться для создания выпадающих меню, разметки сайта и т.д.
Фиксированное позиционирование (fixed)
Задание элементу фиксированного позиционирования осуществляется посредством установки ему position: fixed .
Фиксированное позиционирование похоже на абсолютное, но в отличии от него оно всегда привязывается к краям окна браузера (viewport), и остаётся в таком положении даже при скроллинге страницы.
Фиксированное позиционирование применяется для закрепления на странице навигационных меню, кнопки «вверх», панелей с социальными кнопками и многого другого.
Совместное использование относительного и абсолютного позиционирования
Относительное позиционирование очень часто используется вместе с абсолютным позиционированием.
- Если расположить блоки с абсолютным позиционированием в блок с относительным, то расстояния будут уже задаваться не от края окна браузера, а от границ относительного блока.
- Например: для создания фиксированных макетов состоящих из 3 блоков, выровненных по верхнему краю. Установим высоту "400px" относительному блоку для наглядности .
- Дополнительно к блокам можно применять свойство z-index , которое предназначено для позиционирования элементов по оси Z. Чем больше значение свойства z-index , тем ближе элемент расположен к нам, и наоборот, чем меньше значение, тем дальше расположен элемент от нас.
Часто на практике приходится решать задачу группирования и выравнивания контента средствами CSS. Сегодня мы рассмотрим основные способы размещения элементов в горизонтальный ряд.
Материал данной статьи призван помочь начинающим веб-дизайнерам в освоении приемов верстки web-страниц.
Из чего выбрать или методы
Существует несколько способов расположения структурных элементов в ряд в горизонтальной плоскости. Наиболее полезными, с точки зрения практического применения, являются:
- метод «Float»
- метод «Inline-block»
- метод «Table-cell»
Каждый из них имеет свои преимущества, области применения и недостатки. Рассмотрим их по порядку.
«Для рывка» или немного теории
Все структурные элементы HTML можно условно разделить на:
Инлайновые (встроенные) – типа img, span и им подобные. У нас нет возможности менять их фон и задавать им произвольные линейные размеры.
Блочные – занимающие всю ширину родительского блока, всегда начинаются с новой строки – p, h, div.
Наглядный пример встроенных и блочных структур приведен ниже:
Метод «Float»
Как уже известно (см. выше), блочный элемент размещается с новой строки вне зависимости от заданной ему ширины (width). По этому, уменьшая горизонтальный размер div-а, в рядок блочки не построить.
Наиболее популярный (особенно среди начинающих верстальщиков), метод решения это использование свойства float.
CSS свойство float обрело большую популярность и практическую ценность после перехода от табличного способа верстки к блочному.
Float: left (right) трансформирует блочный элемент в плавающий, выравнивает по левому (правому) краю родительского блока и устанавливает обтекание справа (слева) текстом и другими элементами.
Для примера, создадим четыре блока, которые нужно разместить в ряд:
И внешнюю таблицу стилей с следующим содержимым:
В результате получаем четыре блока, расположенные в горизонтальный ряд и выровненные по левому краю родительского блока:
Иногда на практике бывает необходимо выровнять блоки по правому краю родительского элемента. Изменим обтекание блоков в предыдущем примере:
Обратите внимание на надписи, расположенные в блоках. На первый взгляд может показаться, что пример отработал криво. Но на самом деле, браузер обработал код правильно: прочитал блоки сверху вниз, и сделал то, что мы от него просили - выровнял по правому краю. Учтите этот момент при использовании свойства float: right.
Для того, чтобы прервать обтекание элементов с какого-то конкретного места, используйте строчку:
В рассмотренном выше примере расстояния между блоками мы задавали при помощи отступа margin-right. Но что делать, если у вас при верстке страницы возникла задача: разместить блоки в ряд, центрировать их, да и еще чтобы отступы были только между ними, но никак не снаружи?
Алгоритм действий следующий.
В результате получаем такую картину:
Ну что же, всех практических ситуаций не рассмотришь, по этому перейдем к общим особенностям.
-
Ширина блоков должна быть фиксированной. Иначе получите что-то такое:
Метод «Inline-block»
Как строчные так и блочные элементы имеют свои преимущества и недостатки в контексте каждой конкретной решаемой задачи. А что если объединить их преимущества?
Встречайте, гвоздь программы – свойство display: inline-block.
display: inline-block генерирует блочно-строчный элемент, который по сути является строчным, но сохраняет блочные свойства – позволяет изменять линейные размеры, задавать поля, отступы и т.д.
Блочно-строчный элемент имеет следующие свойства:
- высота и ширина блока определяется автоматически по содержимому и значению отступов (padding)
- высота и ширина блока может быть задана фиксировано
- Отсутствует эффект схлопывания границ.
Рассмотрим пример создания простого навигационного меню, содержащего картинку и ссылку.
В результате получаем такую менюшку:
Как видим, получилось кривовато. Но расстраиваться мы не намерены, по-этому применяем к нашим дивам CSS свойство vertical-align (подробнее см. ниже):
Теперь наша навигационная панель выровнялась по верхней линии:
Конечно, приведенный пример является примитивным, но я уверен, что на его основе вы сможете создать настоящий шедевр.
- При уменьшении ширины окна обозревателя невмещающийся элемент перемещаеться вниз (как в случае float: left)
- Элемент, отображаемый как inline-block чувствителен к пробелам. Это приводит к тому, что даже при нулевых значениях margin между блоками будет зазор. Зазор этот зависит от применяемого шрифта. Для примера рассмотрим список:
HTML:
Результатом рендеринга такого кода будет следующая картина:
Есть несколько способов убрать зазоры:
-
подобрать отрицательные значения margin:
Результатом применения любого из выше перечисленных приемов будет следующая структура:
-
Для древних версий Firefox добавляем строчку:
Метод «Table»
Табличный подход долгое время был стандартом верстки, что в первую очередь объяснялось простотой и интуитивной понятностью разметки. Скорее всего, именно это и послужило причиной появления табличного форматирования в CSS.
Свойства display: table (table-cell, inline-table), позволяют выполнять табличное форматирование элементов без применения HTML таблиц.
Для горизонтального размещения блоков нам понадобится родительский элемент, имеющий свойство display: table, и дочерние элементы (ячейки), имеющие свойство display: table-cell:
Читайте также: