CodeBase | Frontend

👩‍💻 Как работает свойство box-sizing в CSS? Свойство box-sizing в CSS определяет, как вычисляются размеры элемента, включая его отступы и границы. Оно позволяет контролировать, включаются ли padding и border в общую ширину и высоту элемента. ➡️ Пример:

<style>
  .box {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
  }
  .content-box {
    box-sizing: content-box; /* значение по умолчанию */
  }
  .border-box {
    box-sizing: border-box;
  }
</style>

<div class="box content-box">
  Content-box: ширина 200px + padding 20px + border 5px
</div>

<div class="box border-box">
  Border-box: общая ширина 200px, включая padding и border
</div>

🗣️ В первом случае (content-box) ширина элемента составляет 200px, но с учетом padding и border общая ширина увеличивается до 250px. Во втором случае (border-box) общая ширина элемента остается 200px, так как padding и border включены в эту ширину.

Использование box-sizing: border-box; упрощает расчет размеров элементов и предотвращает неожиданные изменения макета при добавлении отступов и границ.

CodeBase | Frontend | #css

🦥Ленивый программист ©

Ауф CodeBase | Frontend | #meme

Ты будешь жалеть, что не узнал это о девушках раньше. На канале Творчество чувств автор с многолетним опытом всех форматов отношений рассказывает о тонкостях женской психологии, которые ВАЖНО узнать перед тем, как подкатывать к той самой: — Почему 95% девушек непригодны для построения отношений? — 3 признака, кричащие о том, что девушка точно изменит в будущем — Как за несколько сообщений влюбить в себя любую девушку Подпишись и узнай секрет женской симпатии: t.me/+UPFimzMU2TxkZTgy

👩‍💻 Псевдокласс :focus Сайтом можно пользоваться не только с использованием мышки, но и при помощи клавиатуры. При переключении клавишей Tab элементу добавляется псевдокласс :focus, и мы можем задать для него красивые стили. ⚠️ Важно! В браузерах Safari и Firefox на Mac при клике мышкой на кнопку фокус не устанавливается. ➡️ После любого селектора ставим двоеточие и пишем ключевое слово focus.

a:focus {
  outline: 2px solid hotpink;
}

➡️ Фишки: ⏺ Смену стилей между состояниями можно анимировать при помощи transition ⏺ В браузер встроены дефолтные стили для фокуса. ⏺ Нельзя полностью удалять стили для фокуса, заменяйте их на свои, если дефолтные не нравятся. ⏺ Стили для фокуса можно увидеть, открыв сайт и несколько раз нажав клавишу Tab. Или нажмите на кнопку, поставьте курсор в поле ввода. CodeBase | Frontend | #css

🦥Ленивый программист ©

🦥Ленивый программист ©

🦥Ленивый программист ©

Любимый мультик фронтенд-разработчиков CodeBase | Frontend | #meme

😮 Добавлена новая база слитых курсов на 800ГБ: Python: https://t.me/+MFiP32gTwH0zMTRi Программирование: https://t.me/+4p0V_XlwLD9kNzU6 Графика и дизайн: https://t.me/+43tAWN4HkPViN2Vi Frontend и Web: https://t.me/+eonLXw0F6AA5NjMy

🐧 Linux Club ©

🖥 Неизвестно полезный CSS. Часть 8 Собрал CSS-хаки, про которые мало кто знает, но они реально выручают. Всё современно, без учёта IE11. Будет и про гриды, и про transform, и даже пара древностей 🔗 Ссылка CodeBase | Frontend | #article

🤩Нашли для вас топовые каналы, которые реально научат вас программировать! Free Znanija — огромная база курсов по ИТ, которые можно скачать совершенно бесплатно; IT библиотека — самая огромная библиотека книг по IT во всём телеграмме Hacking & InfoSec Base — канал действующего белого хакера. Подробные уроки по безопасности, эксплуатации уязвимостей, социальной инженерии. 🫵Подпишись, чтобы не потерять самые полезные материалы!

🖥 Как сделать ужасный для пользователя интерфейс. Коллекция HTML/CSS лайфхаков В статье собрал злые HTML и CSS-приёмы — всё, чтобы сделать интерфейс максимально неудобным. Не то чтобы я рекомендую, но знать такое полезно… на всякий случай. 🔗 Ссылка CodeBase | Frontend | #article

🦥Ленивый программист ©

👩‍💻 Что такое метод map() в JavaScript и как он используется? map() — это метод массивов в JavaScript, который создаёт новый массив, применяя функцию к каждому элементу исходного. Он не изменяет оригинальный массив. ➡️ Пример:

const numbers = [1, 2, 3, 4];

// Умножаем каждый элемент на 2
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8]

🗣️ В этом примере: • map() применяет функцию ко всем элементам массива • Возвращается новый массив с результатами • Часто используется для форматирования данных перед выводом. ➡️ map() — основа функционального подхода в работе с массивами CodeBase | Frontend | #JS

🦥Ленивый программист ©