1. CSS функция calc() Calc() наверное самая используемая из этого списка, но ее все равно стоит упомянуть. Если вы еще не использовали ее, чтобы понять назначение вы можете представить, что говорите: "Я хочу чтобы этот элемент был вот такой ширины минус столько-то пикселей". .box { width: calc( 100% - 20px ); } Похоже на что-то из препроцессоров типа SASS, но это чистый CSS, и здесь используется высчитанный браузером размер элемента для дальнейших математических операций. Элемент .box из примера будет таким, "каким он был бы при 100% ширине, минус 20 пикселей"...
IT- Программирование
IT - Программирование все о программировании | Уроки, готовые Решения, советы
Приветствую тебя друг, рад видеть тебя на нашем канале, у нас ты сможешь найти много полезного материала по программированию. Мы публикуем все самое полезное и интересное на тему программирования, лекции и книги, уроки и видео уроки, доклады с конференций...
Адаптивное меню на CSS | FlexBox
Создадим HTML разметку: <div class="nav"> <a href="#">Главная</a> <a href="#">О нас</a> <a href="#">Продукты</a> <a href="#">Контакты</a> </div> Пропишем к данной разметке CSS стили: <style> body{ font-family:arial; } .nav { display: flex; justify-content: flex-end; /* разместим справа */ background: #008aff; } .nav a { color:#fff; padding:15px 10px; text-decoration:none; text-align:center; } ...
Шпаргалка по FlexBox - просто и понятно | css | программирование
FlexBox состоит из Контейнера и его Дочерних элементов (items). Для включения flexbox, любому HTML элементу достаточно присвоить css свойство display:flex; <style> .flex{ display: flex; } </style> <div class="flex"> <div class="item">1</div> <div class="item">2</div> </div> CSS свойства Flexbox Flexbox содержит разные css правила для управления всей flex конструкцией. Одни нужно применять к основному контейнеру, а другие к элементам этого контейнера. Для контейнера: display: flex - элемент растягивается на всю ширину и имеет свое полное пространство среди окружающих блоков...
