Верстка блоков CSS

Question

Верстка блоков CSS

Стасёнс Бойко Знаток (288), на голосовании 6 месяцев назад

Ребят вопрос есть. Вот всё в css понимаю, вроде не сложно, но у меня всегда возникает проблема с ширинами и высотами блоков в адаптиве и не только. То есть какую именно высоту или ширину нужно задавать то ли блоку то ли карточке товаров и тд., что бы все нормально отображалось и к примеру картинки не вылазили за рамки блока и растягивались по блоку как нужно... С этим большие проблемы. Вроде ничего сложного (стараюсь фикс ширины и высоты не задавать) и все равно блоки кривые и приходится костылями исправлять. Примеров где у меня проблемы с этим - валом. И карточки товаров и флекс контейнеры, и просто дивы и еще 1000 разных блоков. И кому какую ширину высоту задавать и как оно взаимодействует между собой я очень путаюсь. Сижу по 2-3 часа и не понимаю почему так криво. Собственно вопрос к вам, может есть видео на ютубе или тема которая посвящена именно моей проблеме и может это всё как то называется одной темой? К примеру блочная модель или... Огромная просьба помочь с материалом для изучения, желательно не древним.

Answer 1

⭐Человек с Земли Оракул (65288) 7 месяцев назад

Про правильную разметку и размеры блоков читай в Boostrap5
https://bootstrap-5.ru/docs/5.3/layout/grid/

и Boostrap4
https://getbootstrap.com/docs/4.6/layout/overview/

Стасёнс БойкоЗнаток (288) 7 месяцев назад

Спасибо, но хотелось бы без всяких фреймов, а чисто на стандартном css. Нужно же понимать почему блок или картинка в блоке не адаптивная, а если за тебя это делает фреймворк используя шаблон, то ничему ты толком не научишься. Бустрап чуть позже буду изучать, а пока хотел бы понять как верно задавать ширины высоты в разных блоках сайта. Есть идеи на что стоило бы мне обратить внимание?

⭐Человек с Земли Оракул (65288) Стасёнс Бойко,

Есть идеи на что стоило бы мне обратить внимание?

Обрати внимание на Бутстрап, он уже решает все твои вопросы, просто изучи и делай также вручную.

Answer 2

Петр Алексеевич Оракул (82071) 7 месяцев назад

Задавать минимальную или максимальную ширину и высоту для карточки. Чтобы элементы за ее пределами не вылезали, давать им максимальную ширину 100%. Картинкам авто-высоту, минимальную ширину и ширину 100%.
Карточки желательно в грид-сетку размещать и найти статью про grid-auto-flow, grid-auto-fill и т.д., очень полезная.
А вообще, ты говоришь "Примеров где у меня проблемы с этим - валом", а в чем сложность приложить 1-3 таких? Всяко проще конкретно указывать, где проблема, чем абстрактно в темноте шарить, в чем именно пробелы

Стасёнс БойкоЗнаток (288) 7 месяцев назад

Хорошо. Вот к примеру смотри, верстаю вот такую часть макета. Я специально выделил цветами что бы вы поняли с чем у меня загвоздка.

Красный блок - флекс контейнер. В нем 2 подблока (текст с картинкой и калькулятор). Тут загвоздка, нужно ли задавать им ширину и высоту, в каких значениях? Вот не понимаю я этого. Дальше блок текст с картинкой. У меня картинка к примеру до низу блока не увеличивалась. Такое ощущение что был паддинг боттом. Я что только не перепробовал. Решил вообще через флекс бокс (костылем) но понимаю что это неправильный вариант. То есть размеры картинке какие и нужно ли задавать их вообще? Картинку делать в диве или просто без дива?
2.Желтый блок. СВГ картинки. Они на самом деле разные по размеру, но у них по макету 136 на 136. Их задавать через бэкграунд или через html?

Петр Алексеевич Оракул (82071) Стасёнс Бойко, блоку с текстом и картинкой фикс ширину в пикселях, у формы при сужении экрана пусть уменьшаются поля, а затем сами поля немного. То есть полям максимальную ширину и минимальную и ширину 100%. Где 2 поля, можно обернуть в див, чтобы не высчитывать проценты. Позже можно уменьшить ширину блоку с текстом и картинкой так же на фиксированную, обычно заказчики не любят, когда текст скачет при ресайзе. На каком-то этапе уже сделать их в колонку друг под другом.

Стасёнс БойкоЗнаток (288) 7 месяцев назад

фиол блок. Это png или jpeg картинки. Им нужно ли задавать ширину и высоту? А вдруг там будут другие картинки по размеру и верстка полетит... Их делать в html без дива или в диве?
4. Тоже фиол блок. Понимаю что слайдер, но давайте делать просто два блока. Нужно ли им ширину указывать? А высоту?

Петр Алексеевич Оракул (82071) Стасёнс Бойко, фиолетовый. Jpg, переведенный в webp. Дать блоку фиксированные размеры как по ширине, так и по высоте, дать картинке object-fit: cover, размеры стандартные 100% auto. В слайдере ширину ограничить, не важно фикс или максимальная ширина. Высоту конечно надо бы авто с минимальной шириной, но это будет выглядеть плохо, если будет мало текста в одном, и много в другом слайде. Задача дизайнеру, чтобы хотя бы словами объяснил, что будет в таком случае

Стасёнс БойкоЗнаток (288) 7 месяцев назад

Как вы понимаете какой размер конкретному блоку задавать. Имею ввиду пиксели проценты авто?... В этом у меня вся проблема. Как вы определяете нужные величины для каждого отдельного блока.

Петр Алексеевич Оракул (82071) Стасёнс Бойко, из макета беру. Есть длинный блок. Если непонятно, как его уменьшать, смотрю на макет более узкого разрешения и становится понятно. Если не стало понятно и вообще один гемор с резиновым поведением блока, тогда он верстается в статичных размерах по макету. При уменьшении разрешения он сразу становится как на макете с узким разрешением. Вот для примера https://codepen.io/cruci_an/pen/ExJOqOK уменьшай ширину экрана и увидишь 2 разных способа адаптировать оба блока. Как будет лучше, тоже у дизайнера спрашивать нужно заранее, чтобы он концептуально пояснил, лучше отступы фиксированные, которые уменьшают контент или фиксированная ширина и меняющиеся отступы.

Answer 3

К примеру блочная модель

Это конструктор грид-ареалов любых конфигураций.. себе делал))
https://bulletproof-password.web.app/Grid%20Layout%20with%20Cell%20Spanning.html
В адаптиве тоже будет работать, просто заменяется шаблон, например уменьшается число колонок.

Лучше разобрать конкретный пример, где есть проблемы.

Answer 4

Вы упустили тему "относительных размеров". Задавайте все размеры в процентах, а не пикселях и не пунктах.

Answer 5

Высоту блокам лучше не задавать, т.к. в большинстве случаев высота определяется исходя из контента, но бывают случае когда необходимо задавать фиксированную высоту.

Чтобы расставить карточки товаров, для этого есть один простой универсальный рецепт. Здесь высота зада фиксированная, сделал специально т.к. не стал заполнять контентом.

  
 
 
     
     
    Document

Пример может и не самый лучший, но он простой и универсальный, т.к. не требует доп оберток, карточки можно раставлять как угодно, по 2 в ряд, по 3, по 4 и т.д.

Answer 6

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