update typescript, update docs
This commit is contained in:
@@ -3,7 +3,6 @@ sidebar_position: 1
|
||||
---
|
||||
|
||||
# Position
|
||||
Источник: DeepSeek
|
||||
|
||||
Свойство position в CSS используется для определения способа позиционирования элемента на веб-странице. Оно позволяет управлять расположением элемента относительно его обычного положения в потоке документа или относительно других элементов.
|
||||
|
||||
@@ -48,4 +47,6 @@ sidebar_position: 1
|
||||
- `z-index` работает только для элементов с позиционированием, отличным от `static`.
|
||||
- `sticky` работает только если у родительского элемента есть высота, иначе поведение может быть непредсказуемым.
|
||||
|
||||
Использование свойства `position` позволяет гибко управлять расположением элементов на странице, создавая сложные макеты и интерактивные интерфейсы.
|
||||
Использование свойства `position` позволяет гибко управлять расположением элементов на странице, создавая сложные макеты и интерактивные интерфейсы.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,10 +3,11 @@ sidebar_position: 2
|
||||
---
|
||||
|
||||
# Сетка flexbox, grid
|
||||
Источник: DeepSeek
|
||||
|
||||
Предназначены для создания гибких и адаптивных макетов.
|
||||
|
||||
## Flexbox
|
||||
Flexbox (Flexible Box Layout) — это мощная модульная система CSS, предназначенная для создания гибких и адаптивных макетов. Она позволяет легко выравнивать элементы, распределять пространство и управлять их поведением в контейнере, даже если размеры элементов неизвестны или динамически изменяются.
|
||||
Flexbox — это одномерная система компоновки, предназначенная для выравнивания элементов по одной оси (горизонтально или вертикально).
|
||||
|
||||
#### Основные концепции Flexbox
|
||||
|
||||
@@ -25,7 +26,7 @@ Flexbox работает с двумя основными сущностями:
|
||||
- Для создания адаптивных интерфейсов.
|
||||
|
||||
## Grid
|
||||
**CSS Grid Layout** (или просто **Grid**) — это мощная система для создания двумерных макетов в CSS. В отличие от Flexbox, который работает с одномерными макетами (либо строка, либо столбец), Grid позволяет управлять как строками, так и столбцами одновременно. Это делает Grid идеальным инструментом для создания сложных, адаптивных сеток.
|
||||
Grid — это двумерная система компоновки, позволяющая работать и с колонками, и со строками одновременно.
|
||||
|
||||
#### Основные концепции Grid
|
||||
1. **Grid Container** (контейнер) — элемент, который содержит дочерние элементы (grid items). Чтобы сделать элемент grid-контейнером, нужно задать ему свойство `display: grid` или `display: inline-grid`.
|
||||
@@ -43,4 +44,6 @@ Flexbox работает с двумя основными сущностями:
|
||||
#### Когда использовать Grid:
|
||||
- Для создания двумерных макетов (например, страницы с боковой панелью, заголовком и футером).
|
||||
- Когда нужно точно контролировать расположение элементов.
|
||||
- Для создания адаптивных интерфейсов с минимальным количеством медиазапросов.
|
||||
- Для создания адаптивных интерфейсов с минимальным количеством медиазапросов.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -4,8 +4,6 @@ sidebar_position: 3
|
||||
|
||||
# Семантические тэги
|
||||
|
||||
Источник: DeepSeek
|
||||
|
||||
Семантические теги HTML — это теги, которые четко описывают их содержимое и предназначение, делая код более понятным как для разработчиков, так и для поисковых систем. Они помогают улучшить структуру документа, упростить его чтение и повысить доступность для людей с ограниченными возможностями.
|
||||
|
||||
Основные семантические теги
|
||||
@@ -64,3 +62,5 @@ sidebar_position: 3
|
||||
- Для создания структурированных и понятных веб-страниц.
|
||||
- Для улучшения доступности и SEO.
|
||||
- Для упрощения работы с кодом в команде.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 4
|
||||
---
|
||||
|
||||
# Блочная модель
|
||||
Источник: DeepSeek
|
||||
|
||||
**Блочная модель CSS** (или **Box Model**) — это фундаментальная концепция, которая описывает, как элементы HTML отображаются на веб-странице. Каждый элемент на странице рассматривается как прямоугольный блок, который состоит из нескольких частей: содержимого, отступов, границ и внешних отступов. Понимание блочной модели важно для управления размерами, расположением и отступами элементов.
|
||||
|
||||
@@ -58,3 +57,5 @@ sidebar_position: 4
|
||||
- Блочная модель CSS состоит из **содержимого**, **внутренних отступов**, **границ** и **внешних отступов**.
|
||||
- Свойство `box-sizing` позволяет управлять тем, как учитываются отступы и границы в размерах элемента.
|
||||
- Понимание блочной модели важно для создания точных и предсказуемых макетов.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 5
|
||||
---
|
||||
|
||||
# Селекторы, специфичность
|
||||
Источник: DeepSeek
|
||||
|
||||
**Специфичность селекторов** в CSS — это механизм, который определяет, какие стили будут применены к элементу, если на него влияют несколько конфликтующих правил. Специфичность рассчитывается на основе типа селекторов, и чем выше специфичность, тем выше приоритет стиля.
|
||||
|
||||
@@ -50,4 +49,6 @@ sidebar_position: 5
|
||||
## Вывод
|
||||
- Специфичность определяет приоритет CSS-правил.
|
||||
- Инлайновые стили и !important имеют наивысший приоритет.
|
||||
- Используйте классы и избегайте избыточной специфичности для поддержания чистоты кода.
|
||||
- Используйте классы и избегайте избыточной специфичности для поддержания чистоты кода.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 6
|
||||
---
|
||||
|
||||
# Препроцессоры
|
||||
Источник: DeepSeek
|
||||
|
||||
**Препроцессоры CSS** — это инструменты, которые расширяют возможности стандартного CSS, добавляя такие функции, как переменные, вложенность, миксины, функции и многое другое. Они позволяют писать более структурированный, поддерживаемый и удобный код, который затем компилируется в стандартный CSS. Если вы работаете над большим проектом, использование препроцессора может сэкономить время и усилия. Наиболее популярные препроцессоры: **Sass**, **Less** и **Stylus**.
|
||||
|
||||
@@ -72,4 +71,6 @@ sidebar_position: 6
|
||||
2. **Кривая обучения:**
|
||||
- Необходимо изучить новый синтаксис и возможности.
|
||||
3. **Сложность отладки:**
|
||||
- Скомпилированный CSS может быть сложнее отлаживать.
|
||||
- Скомпилированный CSS может быть сложнее отлаживать.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
@@ -3,7 +3,6 @@ sidebar_position: 7
|
||||
---
|
||||
|
||||
# Единицы измерения в CSS
|
||||
Источник: DeepSeek
|
||||
|
||||
В CSS существует множество единиц измерения, которые используются для задания размеров, отступов, шрифтов и других свойств элементов. Эти единицы можно разделить на несколько категорий: **абсолютные**, **относительные** и **специальные**.
|
||||
|
||||
@@ -112,3 +111,5 @@ sidebar_position: 7
|
||||
- `vw` и `vh`: Для создания полноэкранных блоков или адаптивных шрифтов.
|
||||
- `ch`: Для работы с текстом (например, ограничение ширины текстового поля).
|
||||
- `deg`, `rad`, `turn`: Для трансформаций и анимаций.
|
||||
|
||||
🚀 **_Источник: DeepSeek_**
|
||||
Reference in New Issue
Block a user