diff --git a/docs/html-css/01-position.md b/docs/html-css/01-position.md index c7b7525..7f9c62f 100644 --- a/docs/html-css/01-position.md +++ b/docs/html-css/01-position.md @@ -2,4 +2,50 @@ sidebar_position: 1 --- -# Position \ No newline at end of file +# Position +Источник: DeepSeek + +Свойство position в CSS используется для определения способа позиционирования элемента на веб-странице. Оно позволяет управлять расположением элемента относительно его обычного положения в потоке документа или относительно других элементов. + +Основные значения свойства position: + +## Static +- Элемент позиционируется в соответствии с нормальным потоком документа. +- Свойства `top`, `right`, `bottom`, `left` и `z-index` не применяются. +- Это значение используется по умолчанию для всех элементов. + +## Relative +- Свойство - по умолчанию +- Элемент позиционируется относительно своего нормального положения. +- Можно использовать свойства `top`, `right`, `bottom`, `left` для смещения элемента относительно его исходного положения. +- Остальные элементы на странице не изменяют своего положения, как если бы элемент оставался на своем месте. + +## Absolute +- Элемент удаляется из нормального потока документа и позиционируется относительно ближайшего предка с позиционированием, отличным от `static` (например, `relative`, `absolute`, `fixed` или `sticky`). +- Если такого предка нет, элемент позиционируется относительно ``. +- Можно использовать `top`, `right`, `bottom`, `left` для точного позиционирования. + +## Fixed +- Элемент фиксируется относительно окна браузера и не перемещается при прокрутке страницы. +- Позиционируется относительно *viewport* (области просмотра). +- Часто используется для создания фиксированных навигационных панелей или кнопок. + +## Sticky +- Элемент ведет себя как `relative`, пока не достигнет определенной точки прокрутки, после чего фиксируется на месте, как `fixed`. +- Полезно для создания "липких" заголовков или меню, которые остаются видимыми при прокрутке. + +## Дополнительные свойства для позиционирования: +- `top`, `right`, `bottom`, `left`: + - Эти свойства используются для точного позиционирования элемента относительно его контейнера или *viewport*. + - Работают только с элементами, у которых `position` установлен в `relative`, `absolute`, `fixed` или `sticky`. +- `z-index`: + - Управляет порядком наложения элементов друг на друга (глубиной). + - Работает только с элементами, у которых `position` не `static`. + - Чем выше значение `z-index`, тем выше элемент находится в стеке. + +## Важные моменты: +- Элементы с `position: absolute` или `fixed` не влияют на расположение других элементов в потоке документа. +- `z-index` работает только для элементов с позиционированием, отличным от `static`. +- `sticky` работает только если у родительского элемента есть высота, иначе поведение может быть непредсказуемым. + +Использование свойства `position` позволяет гибко управлять расположением элементов на странице, создавая сложные макеты и интерактивные интерфейсы. \ No newline at end of file diff --git a/docs/html-css/02-flex-grid.md b/docs/html-css/02-flex-grid.md index c7a6b9b..d11f0d8 100644 --- a/docs/html-css/02-flex-grid.md +++ b/docs/html-css/02-flex-grid.md @@ -2,4 +2,45 @@ sidebar_position: 2 --- -# Сетка flexbox, grid \ No newline at end of file +# Сетка flexbox, grid +Источник: DeepSeek + +## Flexbox +Flexbox (Flexible Box Layout) — это мощная модульная система CSS, предназначенная для создания гибких и адаптивных макетов. Она позволяет легко выравнивать элементы, распределять пространство и управлять их поведением в контейнере, даже если размеры элементов неизвестны или динамически изменяются. + +#### Основные концепции Flexbox + +Flexbox работает с двумя основными сущностями: +1. **Flex Container** (контейнер) — элемент, который содержит дочерние элементы (flex items). Чтобы сделать элемент flex-контейнером, нужно задать ему свойство `display: flex` или `display: inline-flex`. +2. **Flex Items** (элементы) — дочерние элементы внутри flex-контейнера. + +#### Преимущества Flexbox: +- Простое создание адаптивных макетов. +- Легкое выравнивание элементов по горизонтали и вертикали. +- Гибкость в управлении размерами и порядком элементов. + +#### Когда использовать Flexbox: +- Для создания одномерных макетов (например, навигационные панели, карточки, списки). +- Когда нужно выравнивать элементы внутри контейнера. +- Для создания адаптивных интерфейсов. + +## Grid +**CSS Grid Layout** (или просто **Grid**) — это мощная система для создания двумерных макетов в CSS. В отличие от Flexbox, который работает с одномерными макетами (либо строка, либо столбец), Grid позволяет управлять как строками, так и столбцами одновременно. Это делает Grid идеальным инструментом для создания сложных, адаптивных сеток. + +#### Основные концепции Grid +1. **Grid Container** (контейнер) — элемент, который содержит дочерние элементы (grid items). Чтобы сделать элемент grid-контейнером, нужно задать ему свойство `display: grid` или `display: inline-grid`. +2. **Grid Items** (элементы) — дочерние элементы внутри grid-контейнера. +3. **Grid Lines** (линии) — линии, которые разделяют строки и столбцы. Они могут быть пронумерованы или названы. +4. **Grid Tracks** (дорожки) — пространство между двумя соседними линиями (строки или столбцы). +5. **Grid Cells** (ячейки) — пересечение строки и столбца (минимальная единица сетки). +6. **Grid Areas** (области) — прямоугольные области, состоящие из одной или нескольких ячеек. + +#### Преимущества Grid: +- Полный контроль над строками и столбцами. +- Простое создание сложных макетов. +- Гибкость в управлении размерами и расположением элементов. + +#### Когда использовать Grid: +- Для создания двумерных макетов (например, страницы с боковой панелью, заголовком и футером). +- Когда нужно точно контролировать расположение элементов. +- Для создания адаптивных интерфейсов с минимальным количеством медиазапросов. \ No newline at end of file diff --git a/docs/html-css/03-semantic-tags.md b/docs/html-css/03-semantic-tags.md index 5d50abb..0f79d16 100644 --- a/docs/html-css/03-semantic-tags.md +++ b/docs/html-css/03-semantic-tags.md @@ -2,4 +2,65 @@ sidebar_position: 3 --- -# Семантические тэги \ No newline at end of file +# Семантические тэги + +Источник: DeepSeek + +Семантические теги HTML — это теги, которые четко описывают их содержимое и предназначение, делая код более понятным как для разработчиков, так и для поисковых систем. Они помогают улучшить структуру документа, упростить его чтение и повысить доступность для людей с ограниченными возможностями. + +Основные семантические теги + +1. `
` + - Используется для шапки сайта или раздела. + - Обычно содержит логотип, навигацию или заголовок. +2. `