IT- Программирование

1. CSS функция calc() Calc() наверное самая используемая из этого списка, но ее все равно стоит упомянуть. Если вы еще не использовали ее, чтобы понять назначение вы можете представить, что говорите: "Я хочу чтобы этот элемент был вот такой ширины минус столько-то пикселей". .box { width: calc( 100% - 20px ); } Похоже на что-то из препроцессоров типа SASS, но это чистый CSS, и здесь используется высчитанный браузером размер элемента для дальнейших математических операций. Элемент .box из примера будет таким, "каким он был бы при 100% ширине, минус 20 пикселей"...

Приветствую тебя друг, рад видеть тебя на нашем канале, у нас ты сможешь найти много полезного материала по программированию. Мы публикуем все самое полезное и интересное на тему программирования, лекции и книги, уроки и видео уроки, доклады с конференций...

Создадим 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 состоит из Контейнера и его Дочерних элементов (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 - элемент растягивается на всю ширину и имеет свое полное пространство среди окружающих блоков...