Как работает браузер ?
Спросят с вероятностью 7%
Работа браузера включает несколько этапов, чтобы отобразить веб-страницу. Давайте разберем их по порядку:
1️⃣Запрос ресурса:
✅Когда пользователь вводит URL в адресную строку и нажимает Enter, браузер начинает с определения адреса ресурса. Если это URL-адрес, начинающийся с
2️⃣DNS-разрешение:
✅Браузер преобразует доменное имя (например,
3️⃣Установка соединения:
✅Браузер устанавливает TCP-соединение с сервером, а если используется
4️⃣Отправка HTTP-запроса:
✅Браузер отправляет HTTP-запрос к серверу, чтобы получить содержимое веб-страницы.
5️⃣Получение HTTP-ответа:
✅Сервер отвечает с кодом состояния (например, 200 OK) и возвращает HTML-документ.
6️⃣Разбор (парсинг) HTML:
✅Браузер начинает разбор HTML-документа. Он создает DOM (Document Object Model) — иерархическую структуру узлов, представляющую содержимое страницы.
7️⃣Обработка CSS:
✅Браузер обрабатывает CSS-стили. Он загружает CSS-файлы и применяет стили к соответствующим элементам DOM, создавая CSSOM (CSS Object Model).
8️⃣Построение рендер-дерева:
✅DOM и CSSOM объединяются для создания рендер-дерева. Рендер-дерево представляет собой структуру, содержащую визуальные элементы, которые должны быть отображены на странице.
9️⃣Визуализация (рендеринг):
✅Браузер вычисляет положение каждого элемента на экране (расчет компоновки) и рисует их (отрисовка).
🔟Обработка JavaScript:
✅Браузер загружает и выполняет JavaScript-код. Если скрипт модифицирует DOM или CSSOM, процесс может повториться с повторным расчетом и перерисовкой.
1️⃣1️⃣Асинхронные операции:
✅Браузер обрабатывает асинхронные операции, такие как AJAX-запросы и таймеры, что может также вызвать повторное обновление страницы.
Весь этот процесс происходит быстро и незаметно для пользователя, предоставляя ему готовую к взаимодействию веб-страницу.
Браузер запрашивает у сервера веб-страницу, получает HTML, CSS и JavaScript, строит и отображает страницу на экране, обрабатывая взаимодействия пользователя и изменения в реальном времени.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
Работа браузера включает несколько этапов, чтобы отобразить веб-страницу. Давайте разберем их по порядку:
1️⃣Запрос ресурса:
✅Когда пользователь вводит URL в адресную строку и нажимает Enter, браузер начинает с определения адреса ресурса. Если это URL-адрес, начинающийся с
http:// или https://, браузер отправляет запрос на сервер.GET /index.html HTTP/1.1
Host: example.com
2️⃣DNS-разрешение:
✅Браузер преобразует доменное имя (например,
example.com) в IP-адрес с помощью DNS-сервера.3️⃣Установка соединения:
✅Браузер устанавливает TCP-соединение с сервером, а если используется
https, то устанавливает также SSL/TLS-соединение для безопасной передачи данных.4️⃣Отправка HTTP-запроса:
✅Браузер отправляет HTTP-запрос к серверу, чтобы получить содержимое веб-страницы.
GET /index.html HTTP/1.1
Host: example.com
5️⃣Получение HTTP-ответа:
✅Сервер отвечает с кодом состояния (например, 200 OK) и возвращает HTML-документ.
HTTP/1.1 200 OK
Content-Type: text/html
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
6️⃣Разбор (парсинг) HTML:
✅Браузер начинает разбор HTML-документа. Он создает DOM (Document Object Model) — иерархическую структуру узлов, представляющую содержимое страницы.
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
7️⃣Обработка CSS:
✅Браузер обрабатывает CSS-стили. Он загружает CSS-файлы и применяет стили к соответствующим элементам DOM, создавая CSSOM (CSS Object Model).
h1 {
color: blue;
}8️⃣Построение рендер-дерева:
✅DOM и CSSOM объединяются для создания рендер-дерева. Рендер-дерево представляет собой структуру, содержащую визуальные элементы, которые должны быть отображены на странице.
9️⃣Визуализация (рендеринг):
✅Браузер вычисляет положение каждого элемента на экране (расчет компоновки) и рисует их (отрисовка).
🔟Обработка JavaScript:
✅Браузер загружает и выполняет JavaScript-код. Если скрипт модифицирует DOM или CSSOM, процесс может повториться с повторным расчетом и перерисовкой.
document.querySelector('h1').textContent = 'Hello, JavaScript!';1️⃣1️⃣Асинхронные операции:
✅Браузер обрабатывает асинхронные операции, такие как AJAX-запросы и таймеры, что может также вызвать повторное обновление страницы.
Весь этот процесс происходит быстро и незаметно для пользователя, предоставляя ему готовую к взаимодействию веб-страницу.
Браузер запрашивает у сервера веб-страницу, получает HTML, CSS и JavaScript, строит и отображает страницу на экране, обрабатывая взаимодействия пользователя и изменения в реальном времени.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
❤49👍34🔥9🤯1
В чём разница между видами замыкания ?
Спросят с вероятностью 3%
Замыкание (closure) — это функция, которая имеет доступ к переменным из своей внешней области видимости даже после завершения выполнения этой внешней функции. Однако, замыкания могут принимать разные формы в зависимости от их использования и контекста. Рассмотрим различные виды замыканий и их особенности.
Виды
1️⃣ Простое замыкание
Возникает, когда внутренняя функция имеет доступ к переменным внешней функции.
Здесь
2️⃣Замыкание с доступом к аргументам внешней функции
Внутренняя функция может также замыкаться на аргументах внешней функции.
Здесь функция, возвращаемая
3️⃣Инкапсуляция данных
Часто используются для инкапсуляции данных, скрывая переменные и предоставляя доступ к ним только через функции.
В этом примере переменная
4️⃣Частично применённые функции
Можно использовать для создания частично применённых функций, которые фиксируют некоторые аргументы.
Здесь функция
5️⃣Фабрика функций
Позволяют создавать функции, которые генерируют другие функции с определённым поведением.
Здесь
6️⃣Асинхронные замыкания
Играют ключевую роль в асинхронном программировании, так как позволяют сохранять контекст между асинхронными вызовами.
В этом примере замыкание сохраняет переменную
7️⃣Рекурсивные замыкания
Могут быть использованы для создания рекурсивных функций, которые запоминают контекст и могут вызывать себя.
Здесь
Замыкания (closures) — это функции, которые "запоминают" контекст, в котором они были созданы. Они могут использоваться для сохранения состояния, инкапсуляции данных, создания частично применённых функций, фабрики функций, работы с асинхронным кодом и рекурсией. Эти особенности делают замыкания мощным инструментом для управления данными и логикой.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 3%
Замыкание (closure) — это функция, которая имеет доступ к переменным из своей внешней области видимости даже после завершения выполнения этой внешней функции. Однако, замыкания могут принимать разные формы в зависимости от их использования и контекста. Рассмотрим различные виды замыканий и их особенности.
Виды
Возникает, когда внутренняя функция имеет доступ к переменным внешней функции.
function outerFunction() {
let outerVariable = 'I am outside!';
function innerFunction() {
console.log(outerVariable);
}
return innerFunction;
}
const inner = outerFunction();
inner(); // 'I am outside!'Здесь
innerFunction замыкается на переменной outerVariable из внешней функции outerFunction.2️⃣Замыкание с доступом к аргументам внешней функции
Внутренняя функция может также замыкаться на аргументах внешней функции.
function greet(greeting) {
return function(name) {
console.log(`${greeting}, ${name}!`);
};
}
const sayHello = greet('Hello');
sayHello('Alice'); // 'Hello, Alice!'Здесь функция, возвращаемая
greet, замыкается на аргументе greeting.3️⃣Инкапсуляция данных
Часто используются для инкапсуляции данных, скрывая переменные и предоставляя доступ к ним только через функции.
function createCounter() {
let count = 0;
return {
increment: function() {
count++;
},
getCount: function() {
return count;
}
};
}
const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // 1В этом примере переменная
count инкапсулирована и доступна только через методы increment и getCount.4️⃣Частично применённые функции
Можно использовать для создания частично применённых функций, которые фиксируют некоторые аргументы.
function multiply(a) {
return function(b) {
return a * b;
};
}
const double = multiply(2);
console.log(double(5)); // 10Здесь функция
multiply создаёт частично применённую функцию, фиксируя аргумент a.5️⃣Фабрика функций
Позволяют создавать функции, которые генерируют другие функции с определённым поведением.
function createGreeter(greeting) {
return function(name) {
console.log(`${greeting}, ${name}!`);
};
}
const helloGreeter = createGreeter('Hello');
helloGreeter('Bob'); // 'Hello, Bob!'
const hiGreeter = createGreeter('Hi');
hiGreeter('Charlie'); // 'Hi, Charlie!'Здесь
createGreeter создаёт новые функции для различных приветствий.6️⃣Асинхронные замыкания
Играют ключевую роль в асинхронном программировании, так как позволяют сохранять контекст между асинхронными вызовами.
function fetchData(url) {
let data = null;
setTimeout(() => {
data = 'Data from ' + url;
console.log(data); // 'Data from example.com'
}, 1000);
return function() {
return data;
};
}
const getData = fetchData('example.com');
setTimeout(() => {
console.log(getData()); // 'Data from example.com'
}, 1500);В этом примере замыкание сохраняет переменную
data и позволяет к ней доступ после асинхронной операции.7️⃣Рекурсивные замыкания
Могут быть использованы для создания рекурсивных функций, которые запоминают контекст и могут вызывать себя.
function createFactorial() {
return function factorial(n) {
if (n <= 1) {
return 1;
}
return n * factorial(n - 1);
};
}
const factorial = createFactorial();
console.log(factorial(5)); // 120Здесь
factorial замыкается на самой себе, что позволяет реализовать рекурсивное вычисление факториала.Замыкания (closures) — это функции, которые "запоминают" контекст, в котором они были созданы. Они могут использоваться для сохранения состояния, инкапсуляции данных, создания частично применённых функций, фабрики функций, работы с асинхронным кодом и рекурсией. Эти особенности делают замыкания мощным инструментом для управления данными и логикой.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Please open Telegram to view this post
VIEW IN TELEGRAM
👍45❤12🔥3
Что такое селектор ?
Спросят с вероятностью 7%
Селектор — это шаблон, который используется для выбора элементов HTML на веб-странице, к которым будут применяться стили. Селекторы позволяют разработчикам точно указывать, какие элементы должны быть стилизованы, используя различные критерии.
Вот основные типы селекторов и их примеры:
1️⃣Селекторы по тегу:
✅Выбирает все элементы с определённым тегом.
2️⃣Селекторы по классу:
✅Выбирает элементы с определённым классом. Класс указывается с помощью точки
3️⃣Селекторы по идентификатору (ID):
✅Выбирает элемент с определённым идентификатором. Идентификатор указывается с помощью решётки
✅Выбирает элемент с определённым идентификатором. Идентификатор указывается с помощью решётки
4️⃣Комбинированные селекторы:
✅Позволяют выбирать элементы, используя комбинацию различных критериев.
✅Селекторы потомков: выбирают элементы, которые находятся внутри другого элемента.
✅Селекторы дочерних элементов: выбирают элементы, которые являются дочерними для другого элемента.
✅Смежные селекторы: выбирают элементы, которые следуют непосредственно за другим элементом.
✅Селекторы по атрибуту: выбирают элементы с определённым атрибутом.
5️⃣Псевдоклассы:
✅Позволяют выбирать элементы в определённом состоянии.
6️⃣Псевдоэлементы:
✅Позволяют стилизовать определённые части элементов.
Примеры:
Селектор — это шаблон, который выбирает элементы HTML для применения стилей. Существуют разные типы селекторов, такие как по тегу, классу, ID, а также комбинированные селекторы, псевдоклассы и псевдоэлементы.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
Селектор — это шаблон, который используется для выбора элементов HTML на веб-странице, к которым будут применяться стили. Селекторы позволяют разработчикам точно указывать, какие элементы должны быть стилизованы, используя различные критерии.
Вот основные типы селекторов и их примеры:
1️⃣Селекторы по тегу:
✅Выбирает все элементы с определённым тегом.
p {
color: blue;
}
2️⃣Селекторы по классу:
✅Выбирает элементы с определённым классом. Класс указывается с помощью точки
.. .example {
font-size: 16px;
}
3️⃣Селекторы по идентификатору (ID):
✅Выбирает элемент с определённым идентификатором. Идентификатор указывается с помощью решётки
#.✅Выбирает элемент с определённым идентификатором. Идентификатор указывается с помощью решётки
#. #uniqueElement {
background-color: yellow;
}
4️⃣Комбинированные селекторы:
✅Позволяют выбирать элементы, используя комбинацию различных критериев.
✅Селекторы потомков: выбирают элементы, которые находятся внутри другого элемента.
div p {
margin: 20px;
}✅Селекторы дочерних элементов: выбирают элементы, которые являются дочерними для другого элемента.
div > p {
margin: 20px;
}✅Смежные селекторы: выбирают элементы, которые следуют непосредственно за другим элементом.
h1 + p {
margin-top: 10px;
}✅Селекторы по атрибуту: выбирают элементы с определённым атрибутом.
a[href] {
color: red;
}5️⃣Псевдоклассы:
✅Позволяют выбирать элементы в определённом состоянии.
a:hover {
color: green;
}6️⃣Псевдоэлементы:
✅Позволяют стилизовать определённые части элементов.
p::first-line {
font-weight: bold;
}Примеры:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример селекторов</title>
<style>
/* Селектор по тегу */
h1 {
color: blue;
}
/* Селектор по классу */
.highlight {
background-color: yellow;
}
/* Селектор по ID */
#main {
font-size: 20px;
}
/* Селектор по атрибуту */
a[target="_blank"] {
color: red;
}
/* Псевдокласс */
a:hover {
text-decoration: underline;
}
/* Псевдоэлемент */
p::first-letter {
font-size: 200%;
color: green;
}
</style>
</head>
<body>
<h1>Заголовок</h1>
<p class="highlight">Это пример текста с подсветкой.</p>
<p id="main">Это основной текст.</p>
<a href="https://example.com" target="_blank">Ссылка</a>
</body>
</html>
Селектор — это шаблон, который выбирает элементы HTML для применения стилей. Существуют разные типы селекторов, такие как по тегу, классу, ID, а также комбинированные селекторы, псевдоклассы и псевдоэлементы.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
👍48❤4
Какое значение this будет в функции-стрелке, вложенной в метод объекта, вызванного через setTimeout?
Anonymous Quiz
26%
Ссылается на глобальный объект (window в браузерах).
32%
Ссылается на объект, к которому принадлежит метод.
12%
undefined из-за строгого режима.
29%
Значение this передаётся в функцию-стрелку из внешней функции.
👍18🔥6🤔3👀3👾3
Привет, ребят, хочу сделать так, чтобы для каждого вопроса было поясняющее видео в reels/shorts формате.
Ищу человека который с этим поможет, работу оплачу. Вопросы есть, нужен простой монтаж и озвучка. Все видосы делаются по шаблону.
Если интересует такая подработка напишите мне @kivaiko
Ищу человека который с этим поможет, работу оплачу. Вопросы есть, нужен простой монтаж и озвучка. Все видосы делаются по шаблону.
Если интересует такая подработка напишите мне @kivaiko
🔥57👍10❤2
Что такое адаптивная верстка ?
Спросят с вероятностью 7%
Адаптивная верстка — это метод создания веб-страниц, которые автоматически подстраиваются под различные размеры экранов и устройства, обеспечивая оптимальное отображение и удобство использования. Это означает, что один и тот же сайт будет хорошо выглядеть и функционировать как на настольных компьютерах с большими экранами, так и на планшетах и смартфонах с меньшими экранами.
Основные техники и принципы адаптивной верстки включают:
1️⃣Медиа-запросы (Media Queries):
✅Это CSS-инструмент, который позволяет применять разные стили в зависимости от характеристик устройства, таких как ширина и высота экрана, ориентация и разрешение.
2️⃣Гибкие макеты (Fluid Grids):
✅Использование процентных значений для размеров элементов вместо фиксированных пикселей. Это позволяет элементам изменять размер в зависимости от размера экрана.
3️⃣Гибкие изображения (Flexible Images):
✅Изображения, которые изменяют размер в зависимости от размеров родительского контейнера.
4️⃣Использование фреймворков:
✅Существуют популярные CSS-фреймворки, такие как Bootstrap и Foundation, которые предоставляют готовые решения для адаптивной верстки.
5️⃣Мобильный подход (Mobile-First):
✅Разработка сайта сначала для мобильных устройств, а затем добавление стилей для более крупных экранов. Это позволяет сосредоточиться на ключевом контенте и функциональности.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
Адаптивная верстка — это метод создания веб-страниц, которые автоматически подстраиваются под различные размеры экранов и устройства, обеспечивая оптимальное отображение и удобство использования. Это означает, что один и тот же сайт будет хорошо выглядеть и функционировать как на настольных компьютерах с большими экранами, так и на планшетах и смартфонах с меньшими экранами.
Основные техники и принципы адаптивной верстки включают:
1️⃣Медиа-запросы (Media Queries):
✅Это CSS-инструмент, который позволяет применять разные стили в зависимости от характеристик устройства, таких как ширина и высота экрана, ориентация и разрешение.
/* Стили по умолчанию для мобильных устройств */
body {
font-size: 16px;
}
/* Стили для планшетов */
@media (min-width: 768px) {
body {
font-size: 18px;
}
}
/* Стили для настольных компьютеров */
@media (min-width: 1024px) {
body {
font-size: 20px;
}
}
2️⃣Гибкие макеты (Fluid Grids):
✅Использование процентных значений для размеров элементов вместо фиксированных пикселей. Это позволяет элементам изменять размер в зависимости от размера экрана.
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.column {
float: left;
width: 50%;
}
3️⃣Гибкие изображения (Flexible Images):
✅Изображения, которые изменяют размер в зависимости от размеров родительского контейнера.
img {
max-width: 100%;
height: auto;
}4️⃣Использование фреймворков:
✅Существуют популярные CSS-фреймворки, такие как Bootstrap и Foundation, которые предоставляют готовые решения для адаптивной верстки.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md-6">Контент 1</div>
<div class="col-md-6">Контент 2</div>
</div>
</div>
5️⃣Мобильный подход (Mobile-First):
✅Разработка сайта сначала для мобильных устройств, а затем добавление стилей для более крупных экранов. Это позволяет сосредоточиться на ключевом контенте и функциональности.
/* Стили для мобильных устройств */
body {
font-size: 16px;
}
/* Стили для более крупных экранов */
@media (min-width: 768px) {
body {
font-size: 18px;
}
}
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
👍38❤6
Как JavaScript обрабатывает микрозадачи по сравнению с макрозадачами в цикле событий?
Anonymous Quiz
20%
Макрозадачи выполняются перед микрозадачами.
71%
Микрозадачи выполняются до начала следующей макрозадачи.
7%
Микрозадачи и макрозадачи выполняются параллельно.
2%
Макрозадачи и микрозадачи выполняются в случайном порядке.
👍23😁2👾1
Для чего служат vh, vw при указании размеров ?
Спросят с вероятностью 7%
vh (viewport height) и vw (viewport width) — это единицы измерения, которые используются для указания размеров элементов относительно размеров области просмотра (viewport). Эти единицы особенно полезны при создании адаптивных и отзывчивых дизайнов, так как они позволяют легко масштабировать элементы в зависимости от размеров окна браузера.
Определения:
✅`vh` (viewport height): 1
✅`vw` (viewport width): 1
Примеры:
1️⃣Указание высоты элемента в `vh`:
В этом примере элемент с классом
2️⃣Указание ширины элемента в
В этом примере элемент с классом
3️⃣Создание адаптивного текста:
В этом примере размер шрифта элемента с классом
Преимущества:
✅Адаптивность: Эти единицы позволяют легко адаптировать элементы к различным размерам экранов без необходимости использовать медиа-запросы.
✅Процентное соотношение: Основываются на процентах, что делает их удобными для создания элементов, занимающих определённую долю области просмотра.
✅Простота в использовании: Легко понять и применять, особенно для быстрого создания отзывчивых дизайнов.
Пример с vh и vw:
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
vh (viewport height) и vw (viewport width) — это единицы измерения, которые используются для указания размеров элементов относительно размеров области просмотра (viewport). Эти единицы особенно полезны при создании адаптивных и отзывчивых дизайнов, так как они позволяют легко масштабировать элементы в зависимости от размеров окна браузера.
Определения:
✅`vh` (viewport height): 1
vh равен 1% от высоты области просмотра.✅`vw` (viewport width): 1
vw равен 1% от ширины области просмотра.Примеры:
1️⃣Указание высоты элемента в `vh`:
.full-height {
height: 100vh; /* Элемент будет занимать 100% высоты области просмотра */
}В этом примере элемент с классом
full-height всегда будет занимать всю высоту области просмотра, независимо от высоты окна браузера.2️⃣Указание ширины элемента в
vw: .full-width {
width: 100vw; /* Элемент будет занимать 100% ширины области просмотра */
}В этом примере элемент с классом
full-width всегда будет занимать всю ширину области просмотра, независимо от ширины окна браузера.3️⃣Создание адаптивного текста:
.responsive-text {
font-size: 2vw; /* Размер шрифта будет 2% от ширины области просмотра */
}В этом примере размер шрифта элемента с классом
responsive-text будет изменяться в зависимости от ширины окна браузера, что может быть полезно для создания адаптивных заголовков.Преимущества:
✅Адаптивность: Эти единицы позволяют легко адаптировать элементы к различным размерам экранов без необходимости использовать медиа-запросы.
✅Процентное соотношение: Основываются на процентах, что делает их удобными для создания элементов, занимающих определённую долю области просмотра.
✅Простота в использовании: Легко понять и применять, особенно для быстрого создания отзывчивых дизайнов.
Пример с vh и vw:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример использования vh и vw</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.header {
height: 10vh; /* Высота заголовка - 10% от высоты области просмотра */
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.main {
height: 80vh; /* Высота основного контента - 80% от высоты области просмотра */
background-color: #f4f4f4;
display: flex;
align-items: center;
justify-content: center;
font-size: 3vw; /* Размер шрифта - 3% от ширины области просмотра */
}
.footer {
height: 10vh; /* Высота подвала - 10% от высоты области просмотра */
background-color: #333;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="header">
Заголовок
</div>
<div class="main">
Основной контент
</div>
<div class="footer">
Подвал
</div>
</body>
</html>
vh и vw в CSS используются для указания размеров элементов относительно высоты и ширины окна браузера. Это позволяет создавать адаптивные дизайны, которые автоматически подстраиваются под размеры экрана.👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
👍31❤8
Из чего строится размер элементы ?
Спросят с вероятностью 7%
Размер элемента определяется комбинацией нескольких свойств, которые задают его ширину, высоту, отступы, поля и рамки. Эти свойства можно сгруппировать в следующие категории:
1️⃣Content (Содержимое):
✅`width`: задает ширину содержимого элемента.
✅`height`: задает высоту содержимого элемента.
2️⃣Padding (Внутренние отступы):
✅`padding`: задает пространство между содержимым элемента и его границей (рамкой).
3️⃣Border (Рамка):
✅`border`: задает толщину и стиль рамки вокруг содержимого и внутреннего отступа.
4️⃣Margin (Внешние отступы):
✅`margin`: задает пространство между элементом и соседними элементами.
Совокупность всех этих свойств определяет общий размер элемента:
✅Размер содержимого (
✅Внутренние отступы (
✅Рамка (
✅Внешние отступы (
Полная модель:
✅Content: фактическое содержимое элемента.
✅Padding: пространство вокруг содержимого.
✅Border: рамка вокруг padding.
✅Margin: пространство вокруг border, отделяющее элемент от других элементов.
Box Model (Модель коробки):
Существует понятие "модель коробки" (box model), которая объединяет все вышеуказанные элементы для расчета общего размера и пространства, занимаемого элементом.
Пример
Рассчет общего размера элемента:
✅Content: 200px (width) x 100px (height)
✅Padding: 10px со всех сторон (добавляет 20px к ширине и 20px к высоте)
✅Border: 2px со всех сторон (добавляет 4px к ширине и 4px к высоте)
✅Margin: 20px со всех сторон (не влияет на размер самого элемента, но влияет на его позиционирование относительно других элементов)
Итоговый размер элемента, включая padding и border:
✅Ширина: 200px (width) + 20px (padding) + 4px (border) = 224px
✅Высота: 100px (height) + 20px (padding) + 4px (border) = 124px
Box-sizing:
Позволяет изменять расчет размеров элемента. Значение
В этом случае ширина и высота элемента будут равны 200px и 100px соответственно, и padding и border будут включены в эти размеры.
Размер элемента строится из содержимого (width, height), внутренних отступов (padding), рамки (border) и внешних отступов (margin). Эти свойства вместе формируют модель коробки (box model), которая определяет общий размер и расположение элемента на странице.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
Размер элемента определяется комбинацией нескольких свойств, которые задают его ширину, высоту, отступы, поля и рамки. Эти свойства можно сгруппировать в следующие категории:
1️⃣Content (Содержимое):
✅`width`: задает ширину содержимого элемента.
✅`height`: задает высоту содержимого элемента.
.element {
width: 200px;
height: 100px;
}2️⃣Padding (Внутренние отступы):
✅`padding`: задает пространство между содержимым элемента и его границей (рамкой).
.element {
padding: 10px; /* Внутренние отступы со всех сторон */
}
3️⃣Border (Рамка):
✅`border`: задает толщину и стиль рамки вокруг содержимого и внутреннего отступа.
.element {
border: 2px solid black; /* Толщина, стиль и цвет рамки */
}4️⃣Margin (Внешние отступы):
✅`margin`: задает пространство между элементом и соседними элементами.
.element {
margin: 20px; /* Внешние отступы со всех сторон */
}Совокупность всех этих свойств определяет общий размер элемента:
✅Размер содержимого (
width + height)✅Внутренние отступы (
padding)✅Рамка (
border)✅Внешние отступы (
margin)Полная модель:
✅Content: фактическое содержимое элемента.
✅Padding: пространство вокруг содержимого.
✅Border: рамка вокруг padding.
✅Margin: пространство вокруг border, отделяющее элемент от других элементов.
Box Model (Модель коробки):
Существует понятие "модель коробки" (box model), которая объединяет все вышеуказанные элементы для расчета общего размера и пространства, занимаемого элементом.
Пример
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример Box Model</title>
<style>
.element {
width: 200px; /* Ширина содержимого */
height: 100px; /* Высота содержимого */
padding: 10px; /* Внутренние отступы */
border: 2px solid black; /* Рамка */
margin: 20px; /* Внешние отступы */
}
</style>
</head>
<body>
<div class="element">Пример элемента</div>
</body>
</html>
Рассчет общего размера элемента:
✅Content: 200px (width) x 100px (height)
✅Padding: 10px со всех сторон (добавляет 20px к ширине и 20px к высоте)
✅Border: 2px со всех сторон (добавляет 4px к ширине и 4px к высоте)
✅Margin: 20px со всех сторон (не влияет на размер самого элемента, но влияет на его позиционирование относительно других элементов)
Итоговый размер элемента, включая padding и border:
✅Ширина: 200px (width) + 20px (padding) + 4px (border) = 224px
✅Высота: 100px (height) + 20px (padding) + 4px (border) = 124px
Box-sizing:
Позволяет изменять расчет размеров элемента. Значение
border-box включает padding и border в свойства width и height..element {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid black;
}В этом случае ширина и высота элемента будут равны 200px и 100px соответственно, и padding и border будут включены в эти размеры.
Размер элемента строится из содержимого (width, height), внутренних отступов (padding), рамки (border) и внешних отступов (margin). Эти свойства вместе формируют модель коробки (box model), которая определяет общий размер и расположение элемента на странице.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
👍35🔥7❤3
Какой смысл замыканий, если бы не было функций высшего порядка ?
Спросят с вероятностью 3%
Замыкания (closures) представляют собой мощную концепцию, которая позволяет функции "запоминать" и сохранять доступ к лексическому окружению, в котором она была создана, даже после завершения выполнения этой функции. Часто используются в комбинации с функциями высшего порядка, но они полезны и сами по себе, даже если бы функции высшего порядка не существовали. Рассмотрим, почему замыкания важны и какие задачи они решают.
Основные сценарии использования замыканий
1️⃣Сохранение состояния
✅Замыкания позволяют сохранить состояние между вызовами функции. Это полезно для создания функций с "памятью".
В этом примере функция
2️⃣Инкапсуляция данных
✅Замыкания позволяют скрывать данные и делать их недоступными снаружи функции, предоставляя только ограниченный интерфейс для взаимодействия с этими данными.
Здесь мы инкапсулируем переменную
Почему замыкания полезны даже без функций высшего порядка
1️⃣Лексическое окружение
✅Замыкания используют лексическое окружение, что позволяет функции доступ к переменным, определенным в области видимости, в которой она была создана.
Здесь функция
2️⃣Создание частных данных
✅Замыкания позволяют создавать частные данные и методы, что особенно важно для модульного и безопасного программирования.
В этом примере
Замыкания полезны не только в контексте функций высшего порядка, но и сами по себе. Они позволяют сохранять состояние, инкапсулировать данные и создавать функции с предустановленными параметрами. Замыкания используют лексическое окружение, что позволяет функции доступ к переменным из области видимости, в которой она была создана, даже после завершения выполнения этой области. Это делает замыкания мощным инструментом для структурирования и безопасности кода.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 3%
Замыкания (closures) представляют собой мощную концепцию, которая позволяет функции "запоминать" и сохранять доступ к лексическому окружению, в котором она была создана, даже после завершения выполнения этой функции. Часто используются в комбинации с функциями высшего порядка, но они полезны и сами по себе, даже если бы функции высшего порядка не существовали. Рассмотрим, почему замыкания важны и какие задачи они решают.
Основные сценарии использования замыканий
1️⃣Сохранение состояния
✅Замыкания позволяют сохранить состояние между вызовами функции. Это полезно для создания функций с "памятью".
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
В этом примере функция
createCounter создает счетчик, который сохраняет свое состояние между вызовами.2️⃣Инкапсуляция данных
✅Замыкания позволяют скрывать данные и делать их недоступными снаружи функции, предоставляя только ограниченный интерфейс для взаимодействия с этими данными.
function createPrivateCounter() {
let count = 0;
return {
increment: function() {
count++;
},
getValue: function() {
return count;
}
};
}
const privateCounter = createPrivateCounter();
privateCounter.increment();
console.log(privateCounter.getValue()); // 1
console.log(privateCounter.count); // undefined (count недоступен)
Здесь мы инкапсулируем переменную
count и предоставляем методы для ее изменения и получения значения.Почему замыкания полезны даже без функций высшего порядка
1️⃣Лексическое окружение
✅Замыкания используют лексическое окружение, что позволяет функции доступ к переменным, определенным в области видимости, в которой она была создана.
function outer() {
let outerVariable = 'I am outside!';
function inner() {
console.log(outerVariable);
}
inner();
}
outer(); // 'I am outside!'
Здесь функция
inner имеет доступ к переменной outerVariable, даже если она вызывается вне ее лексической области видимости.2️⃣Создание частных данных
✅Замыкания позволяют создавать частные данные и методы, что особенно важно для модульного и безопасного программирования.
function Person(name) {
let _name = name;
return {
getName: function() {
return _name;
},
setName: function(newName) {
_name = newName;
}
};
}
const person = Person('John');
console.log(person.getName()); // 'John'
person.setName('Doe');
console.log(person.getName()); // 'Doe'
console.log(person._name); // undefined (_name is not accessible)
В этом примере
_name является частной переменной и доступна только через методы getName и setName.Замыкания полезны не только в контексте функций высшего порядка, но и сами по себе. Они позволяют сохранять состояние, инкапсулировать данные и создавать функции с предустановленными параметрами. Замыкания используют лексическое окружение, что позволяет функции доступ к переменным из области видимости, в которой она была создана, даже после завершения выполнения этой области. Это делает замыкания мощным инструментом для структурирования и безопасности кода.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
👍38❤7
За что отвечает z-index ?
Спросят с вероятностью 7%
z-index — это CSS-свойство, которое определяет порядок расположения элементов по оси z (перпендикулярно экрану). Это свойство используется для управления тем, какие элементы будут отображаться поверх других, когда они перекрываются.
Как он работает?
✅Контекст наложения (stacking context): Чтобы
✅Числовое значение:
Пример
В этом примере у нас есть два элемента, которые перекрываются. Красный квадрат имеет
Почему это важно?
✅Управление перекрытиями: Важен для создания сложных интерфейсов, где элементы могут перекрываться. Это часто встречается в модальных окнах, всплывающих подсказках, выпадающих меню и т.д.
✅Визуальная иерархия: Он позволяет разработчикам управлять визуальной иерархией, гарантируя, что более важные элементы остаются видимыми и доступны пользователям.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
z-index — это CSS-свойство, которое определяет порядок расположения элементов по оси z (перпендикулярно экрану). Это свойство используется для управления тем, какие элементы будут отображаться поверх других, когда они перекрываются.
Как он работает?
✅Контекст наложения (stacking context): Чтобы
z-index работал, элемент должен иметь установленное значение position, отличное от static (например, relative, absolute, fixed или sticky). Без этого z-index не будет применяться.✅Числовое значение:
z-index принимает целые числа, включая отрицательные. Элементы с более высоким значением z-index будут отображаться поверх элементов с более низким значением.Пример
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример z-index</title>
<style>
.box {
position: absolute;
width: 100px;
height: 100px;
}
.box1 {
background-color: red;
z-index: 1;
top: 50px;
left: 50px;
}
.box2 {
background-color: blue;
z-index: 2;
top: 80px;
left: 80px;
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
</body>
</html>
В этом примере у нас есть два элемента, которые перекрываются. Красный квадрат имеет
z-index: 1, а синий квадрат — z-index: 2. Поскольку значение z-index у синего квадрата выше, он будет отображаться поверх красного.Почему это важно?
✅Управление перекрытиями: Важен для создания сложных интерфейсов, где элементы могут перекрываться. Это часто встречается в модальных окнах, всплывающих подсказках, выпадающих меню и т.д.
✅Визуальная иерархия: Он позволяет разработчикам управлять визуальной иерархией, гарантируя, что более важные элементы остаются видимыми и доступны пользователям.
z-index определяет, какой элемент будет находиться поверх другого при их перекрытии. Чем выше значение z-index, тем ближе к пользователю будет элемент.👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
👍19❤3🔥2
Какой хук в React используется для выполнения побочного эффекта после каждого рендеринга компонента?
Anonymous Quiz
5%
useReducer
86%
useEffect
6%
useState
3%
useContext
❤18👍9
Что знаешь о приоритете селекторов ?
Спросят с вероятностью 7%
Приоритет селекторов (также известный как специфичность селекторов) определяет, какие стили будут применяться к элементу, если на него действуют несколько правил с различными селекторами. Специфичность основана на типах селекторов и их количественном присутствии в одном CSS-правиле.
Как она вычисляется?
Специфичность выражается четырьмя уровнями: A, B, C, D. Чем выше значения, тем более специфичный селектор.
✅A: Инлайновые стили (например,
✅B: Количество ID-селекторов в селекторе (например,
✅C: Количество классов, атрибутов и псевдоклассов (например,
✅D: Количество тегов и псевдоэлементов (например,
Рассмотрим несколько примеров и определим их специфичность:
1️⃣
2️⃣
3️⃣
4️⃣
Чем выше значения специфичности, тем выше приоритет стиля. Если два селектора имеют одинаковую специфичность, то стиль, который объявлен позже, будет применён.
Пример
В этом примере на
1️⃣
2️⃣
3️⃣
4️⃣
Поскольку
Почему это важно?
✅Управление конфликтами стилей: Знание специфичности помогает правильно управлять стилями и избегать конфликтов.
✅Чтение и поддержка кода: Более специфичные селекторы позволяют писать CSS, который легко поддерживать и расширять.
✅Эффективность разработки: Понимание специфичности позволяет создавать более предсказуемый и стабильный код.
Специфичность селекторов определяет, какие CSS-стили будут применяться к элементу. Специфичность основывается на типах селекторов и их количестве. Чем более специфичный селектор, тем выше его приоритет.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
Приоритет селекторов (также известный как специфичность селекторов) определяет, какие стили будут применяться к элементу, если на него действуют несколько правил с различными селекторами. Специфичность основана на типах селекторов и их количественном присутствии в одном CSS-правиле.
Как она вычисляется?
Специфичность выражается четырьмя уровнями: A, B, C, D. Чем выше значения, тем более специфичный селектор.
✅A: Инлайновые стили (например,
style="color: red;") имеют самую высокую специфичность.✅B: Количество ID-селекторов в селекторе (например,
#header).✅C: Количество классов, атрибутов и псевдоклассов (например,
.class, [type="text"], :hover).✅D: Количество тегов и псевдоэлементов (например,
div, h1, ::before).Рассмотрим несколько примеров и определим их специфичность:
1️⃣
#main-content — (0, 1, 0, 0)2️⃣
.article p — (0, 0, 1, 1)3️⃣
header h1 span — (0, 0, 0, 3)4️⃣
div#main .content .text — (0, 1, 2, 1)Чем выше значения специфичности, тем выше приоритет стиля. Если два селектора имеют одинаковую специфичность, то стиль, который объявлен позже, будет применён.
Пример
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример специфичности</title>
<style>
p {
color: black; /* (0, 0, 0, 1) */
}
.text {
color: blue; /* (0, 0, 1, 0) */
}
#highlight {
color: red; /* (0, 1, 0, 0) */
}
p#highlight {
color: green; /* (0, 1, 0, 1) */
}
</style>
</head>
<body>
<p class="text" id="highlight">Этот текст будет зелёным.</p>
</body>
</html>
В этом примере на
<p> элемент действует несколько селекторов с разной специфичностью:1️⃣
p имеет специфичность (0, 0, 0, 1)2️⃣
.text имеет специфичность (0, 0, 1, 0)3️⃣
#highlight имеет специфичность (0, 1, 0, 0)4️⃣
p#highlight имеет специфичность (0, 1, 0, 1)Поскольку
p#highlight имеет наивысшую специфичность (0, 1, 0, 1), он применяет стиль цвета зелёный.Почему это важно?
✅Управление конфликтами стилей: Знание специфичности помогает правильно управлять стилями и избегать конфликтов.
✅Чтение и поддержка кода: Более специфичные селекторы позволяют писать CSS, который легко поддерживать и расширять.
✅Эффективность разработки: Понимание специфичности позволяет создавать более предсказуемый и стабильный код.
Специфичность селекторов определяет, какие CSS-стили будут применяться к элементу. Специфичность основывается на типах селекторов и их количестве. Чем более специфичный селектор, тем выше его приоритет.
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
👍29❤6
Какое из утверждений наиболее точно описывает принцип мемоизации в контексте фронтенд-разработки?
Anonymous Quiz
2%
Мемоизация используется для автоматического обновления пользовательского интерфейса.
17%
Мемоизация позволяет сохранять состояние компонентов при перерисовке страницы.
70%
Мемоизация - это сохранение результатов дорогих вычислений для повторного использования.
11%
Мемоизация помогает ускорять загрузку страниц за счёт кэширования стилей и скриптов.
❤20👍5
Какие псевдоэлементы знаешь и используешь ?
Спросят с вероятностью 7%
Псевдоэлементы позволяют добавлять специфические элементы и стили к определённым частям HTML-элементов, не изменяя саму HTML-разметку. Они часто используются для стилизации, добавления декоративных элементов или изменения содержимого.
Основные псевдоэлементы
1️⃣
2️⃣
3️⃣
4️⃣
5️⃣
Описание и примеры использования
1️⃣`::before` и `::after`:
Эти псевдоэлементы позволяют добавлять содержимое до и после содержимого выбранного элемента. Их часто используют для декоративных целей.
В этом примере
2️⃣`::first-line`:
Этот псевдоэлемент позволяет стилизовать первую строку текста внутри блока.
3️⃣`::first-letter`:
Этот псевдоэлемент позволяет стилизовать первую букву блока текста.
Почему это важно?
✅Стилизация без изменения HTML: Псевдоэлементы позволяют добавлять и стилизовать части содержимого без необходимости изменять HTML-разметку.
✅Декоративные эффекты: С их помощью можно создавать сложные визуальные эффекты и улучшать пользовательский интерфейс.
✅Удобство и гибкость: Псевдоэлементы облегчают реализацию многих задач, таких как добавление иконок, создания кастомных подчеркиваний и т.д.
Псевдоэлементы добавляют и стилизуют части содержимого элементов. Основные псевдоэлементы:
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
Псевдоэлементы позволяют добавлять специфические элементы и стили к определённым частям HTML-элементов, не изменяя саму HTML-разметку. Они часто используются для стилизации, добавления декоративных элементов или изменения содержимого.
Основные псевдоэлементы
1️⃣
::before2️⃣
::after3️⃣
::first-line4️⃣
::first-letter5️⃣
::selectionОписание и примеры использования
1️⃣`::before` и `::after`:
Эти псевдоэлементы позволяют добавлять содержимое до и после содержимого выбранного элемента. Их часто используют для декоративных целей.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример ::before и ::after</title>
<style>
.button {
position: relative;
display: inline-block;
padding: 10px 20px;
background-color: #3498db;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-family: Arial, sans-serif;
}
.button::before, .button::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #fff;
transition: all 0.3s;
}
.button::before {
top: 0;
left: 0;
}
.button::after {
bottom: 0;
right: 0;
}
.button:hover::before {
width: 0;
}
.button:hover::after {
width: 0;
}
</style>
</head>
<body>
<a href="#" class="button">Кнопка</a>
</body>
</html>
В этом примере
::before и ::after используются для добавления анимационных линий к кнопке.2️⃣`::first-line`:
Этот псевдоэлемент позволяет стилизовать первую строку текста внутри блока.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример ::first-line</title>
<style>
p::first-line {
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<p>Это пример параграфа. Первая строка этого текста будет стилизована жирным шрифтом и красным цветом.</p>
</body>
</html>
3️⃣`::first-letter`:
Этот псевдоэлемент позволяет стилизовать первую букву блока текста.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример ::first-letter</title>
<style>
p::first-letter {
font-size: 2em;
color: blue;
float: left;
margin-right: 5px;
}
</style>
</head>
<body>
<p>Это пример параграфа. Первая буква этого текста будет увеличена и окрашена в синий цвет.</p>
</body>
</html>
Почему это важно?
✅Стилизация без изменения HTML: Псевдоэлементы позволяют добавлять и стилизовать части содержимого без необходимости изменять HTML-разметку.
✅Декоративные эффекты: С их помощью можно создавать сложные визуальные эффекты и улучшать пользовательский интерфейс.
✅Удобство и гибкость: Псевдоэлементы облегчают реализацию многих задач, таких как добавление иконок, создания кастомных подчеркиваний и т.д.
Псевдоэлементы добавляют и стилизуют части содержимого элементов. Основные псевдоэлементы:
::before, ::after, ::first-line, ::first-letter и ::selection. Они позволяют улучшать дизайн и удобство интерфейсов без изменения HTML-кода.👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
👍28❤3👀2
Какое ключевое отличие хранения данных в Local Storage по сравнению с куки?
Anonymous Quiz
70%
Local Storage имеет больший объем хранения по сравнению с куки.
15%
Куки автоматически удаляются после закрытия браузера.
9%
Куки не поддерживают хранение данных в бинарном формате.
6%
Local Storage доступен только через HTTPS.
👍17
Flexbox свойство отвечающее за перенос элементов на новую строку ?
Спросят с вероятностью 7%
Свойство Flexbox, которое отвечает за перенос элементов на новую строку, называется
Значения свойства
✅`nowrap` (значение по умолчанию): Все элементы будут располагаться в одной строке, независимо от их количества и размера. Они могут выходить за пределы контейнера.
✅`wrap`: Элементы будут переноситься на новую строку, если они не помещаются в одну.
✅`wrap-reverse`: Элементы также будут переноситься на новую строку, но строки будут расположены в обратном порядке.
В этом примере контейнер
Почему это важно?
✅Адаптивный дизайн: Свойство
✅Управление пространством: Оно позволяет лучше управлять пространством внутри контейнера, предотвращая переполнение и выход элементов за его пределы.
✅Удобство использования: Использование
👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
Спросят с вероятностью 7%
Свойство Flexbox, которое отвечает за перенос элементов на новую строку, называется
flex-wrap. Оно позволяет управлять тем, как элементы в контейнере flex будут обрабатываться, если они не помещаются в одну строку.Значения свойства
✅`nowrap` (значение по умолчанию): Все элементы будут располагаться в одной строке, независимо от их количества и размера. Они могут выходить за пределы контейнера.
✅`wrap`: Элементы будут переноситься на новую строку, если они не помещаются в одну.
✅`wrap-reverse`: Элементы также будут переноситься на новую строку, но строки будут расположены в обратном порядке.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример flex-wrap</title>
<style>
.container {
display: flex;
flex-wrap: wrap; /* Применение flex-wrap */
width: 300px;
border: 2px solid black;
}
.item {
flex: 1 1 100px;
margin: 5px;
background-color: lightblue;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
В этом примере контейнер
.container имеет свойство flex-wrap: wrap, что позволяет элементам .item переноситься на новую строку, если они не помещаются в одну. Контейнер имеет фиксированную ширину 300px, поэтому элементы автоматически переносятся на следующую строку, когда их суммарная ширина превышает эту ширину.Почему это важно?
✅Адаптивный дизайн: Свойство
flex-wrap делает контейнер гибким, что особенно важно для адаптивного дизайна, когда элементы должны корректно отображаться на различных устройствах и экранах.✅Управление пространством: Оно позволяет лучше управлять пространством внутри контейнера, предотвращая переполнение и выход элементов за его пределы.
✅Удобство использования: Использование
flex-wrap упрощает разработку, так как автоматизирует перенос элементов и устраняет необходимость в сложных медиа-запросах.flex-wrap — это свойство Flexbox, которое управляет переносом элементов на новую строку. Значение wrap позволяет элементам переноситься на следующую строку, если они не помещаются в одну.👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент
🔐 База собесов | 🔐 База тестовых
👍24❤2🔥1
Какая основная разница между методами forEach и map в JavaScript?
Anonymous Quiz
9%
forEach возвращает новый массив, map нет.
60%
map создаёт новый массив, forEach возвращает undefined.
26%
forEach может изменять исходный массив, map не может.
6%
map более эффективен для больших массивов, чем forEach.
👍12🤔2