Как установить размер блока css
Перейти к содержимому

Как установить размер блока css

  • автор:

Как установить размер блока css

Установка размеров через абсолютное позиционирование

  • В данной статье рассказывается о том, как можно оперировать позициями и размерами в CSS, чтобы создавать блоки и решать типичные задачи дизайна. Также здесь будет показано, как можно через позиционирование определить размеры блока.

    Постановка задачи

    Условия задачи

    Итак, чтобы вникнуть в суть этих двух параметров свойств CSS предлагаю использовать практический пример. Для этого поставим перед собой следующую задачу: создать такой блок, у которого сверху, слева и справа установлены отступы по 20 пикселей до границ родительского элемента. Снизу от рассматриваемого блока должен быть отступ, который занимает половину высоты родителя. Ниже представлена схема, которая показывает, что должно получиться в итоге: психология трейдера в торговле. Стоит обратить внимание, что по нашей задачке не указана высота родительского элемента. Поэтому наше решение будет носить универсальный характер и будет гибким с точки зрения верстки.

    Решение

    Решение нашей задачи будет основываться на применении абсолютного позиционирования. Однако тут же может возникнуть вопрос, как же можно использовать такой тип позиционирования при неизвестной стороне? Можно! Стоит только шире посмотреть на проблему, так как размер можно определить не только с помощью свойств width и height. Нашей проблеме помогут функции top, right, bottom и left. Основной принцип работы этого способа заключается именно в применении всех этих свойств одновременно. Принудительная установка отступов с каждой стороны сформирует область, которую должен будет заполнить наш блок, так как альтернативного варианта не будет. Таким образом, при написании такого кода HTML

    div class="block0"> div class="block">div> div>
    .block0  display:block; width:300px; height:300px; margin:30px auto 0px auto; background:#d4d8ff; position:relative; /* этот родительский блок нужен только для визуализации того, что все условия поставленной задачи соблюдены */ > .block  position:absolute; top:20px; bottom: 50%; /* установит отступ ровно в половину от высоты родителя */ right: 20px; left: 20px; background:#679bce; >

    Решение задачи

    Мы получим следующую картину в браузере Сравнивая исходно поставленную задачу (картинку схемы правильного решения) и полученный результат, можно сделать вывод, что задача решена. Однако не стоит забывать про старичка Internet Explower, он как обычно требует индивидуального подхода. Чтобы старичок справился с задачей, выдадим ему «костыли» CSS

    html .box height: expression( parentNode.offsetHeight/2 - 20 + 'px'); width: expression( parentNode.offsetWidth - 40 + 'px'); >

    Теперь поясняю смысл кода! Первая строка содержит указания, что высота потомка не должна превышать половину аналогичного параметра у родителя, причем не забываем отступ сверху, равный 20 пикселям. Вторая строка прописывает ширину нашего блока, с учетом левого и правого отступа. Стоит отметить, что для реальных условий при использовании «костылей» необходимо создавать отдельный файл с CSS-кодом, который будет подшит к документу условным комментарием.
    Стоит отметить, что это не наиболее рациональный вариант оптимизации работы IE, однако при нынешних условиях развития браузера (которых вообще нет, так как Microsoft перестал выпуск этого продукта) можно закрыть на это глаза и пользоваться первоначальным вариантом. Для принципиальных личностей привожу идеальный вариант кода, однако помните, что рационализация будет иметь место только при наличии одного из статических размеров CSS

    html .box z-index: expression( /* оптимизированный expression, который сработает только при загрузке страницы */ runtimeStyle.zIndex = 1, runtimeStyle.height = parentNode.offsetHeight/2 - 20 + 'px'); >

    Где можно применить такое решение?

    Это конечно все отлично, но возникает вполне законный вопрос зачем это знать и где можно применить? Иметь в арсенале такой прием никогда не помешает, а применить это можно при использовании декоративных бэкграундных картинок. Причем стоит отметить, что этот элемент будет оптимизирован под любое разрешение экрана, так как он имеет абсолютное позиционирование (прием работает и при position: fixed;).

    В каких браузерах работает?

    6.0+ 5.0+ 9.5+ 4.0+ 3.0+

    Выводы

    Подводя итог, следует обратить внимание на то, что размеры блока не всегда определяются свойствами width и height. Можно использовать абсолютное позиционирования и сопутствующие элементы. Также, не стоит забывать, что для работы приема в Internet Explower следует прописать функцию expression. Кроме того, родительский блок должен быть позиционирован, как relative. В некоторых случаях это вызывает определенные неудобства. Несомненно, применение этого способа не слишком распространено, однако иногда это знание принесет большую пользу.

    HTML CSS Установить размер внутреннего div в зависимости от размера внешнего

    У меня есть div, внутри которого три div’a установленных вертикально. И я хочу к примеру сделать первый блок 25% от ширины внешнего div, второй 25% и третий 50%. Можно ли как-то с помощью CSS сделать это?

    Отслеживать
    задан 7 янв 2020 в 17:50
    Илья Кузьмич Илья Кузьмич
    333 2 2 серебряных знака 14 14 бронзовых знаков

    1 ответ 1

    Сортировка: Сброс на вариант по умолчанию

    * < margin: 0; padding: 0; box-sizing: border-box; >.container < border: 2px solid green; width: 500px; display: flex; /* optional */ padding: 20px; >.block < border: 1px solid black; height: 200px; >.block:nth-child(1), .block:nth-child(2) < width: 25%; >.block:nth-child(3)
     
    25%
    25%
    50%

    Отслеживать
    ответ дан 7 янв 2020 в 19:17
    7,394 2 2 золотых знака 12 12 серебряных знаков 25 25 бронзовых знаков
    Отличное решение, помогло! Спасибо большое 😉
    8 янв 2020 в 1:12
    @ИльяКузьмич, не за что, желаю успехов!
    8 янв 2020 в 1:24

    • html
    • css
      Важное на Мете
    Похожие

    Подписаться на ленту

    Лента вопроса

    Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

    Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.16.5008

    Как установить границу div без увеличения размеров в CSS

    Если вы хотите, чтобы размеры вашего div -элемента не изменились после применения к нему границы толщиной в 1px, воспользуйтесь свойством box-sizing: border-box; . Благодаря этому свойству CSS толщина границ будет учтена в общих размерах элемента.

    Скопировать код

    Таким образом, итоговые размеры div составят ровно 100px по высоте и ширине, включая границу. Граница будет строго вписана в общий размер элемента.

    Способы предотвращения изменения размера элемента при добавлении границ

    Использование свойства ‘outline’

    Свойство outline можно рассматривать как аналог свойства border . Оно визуально воспринимается так же, но не влияет на общий размер блока:

    Скопировать код

    Невидимый щит: применение прозрачных границ

    Прозрачные границы работают как мастер-маскировки. Граница присутствует, но визуально её не заметно:

    Скопировать код

    Для большей степени невидимости можно подобрать цвет границы под цвет фона.

    Корректировка внутренних отступов и внешних сеток: гармония и порядок

    При добавлении границы уменьшите размеры блока на 2px или сократите внутренние отступы на 1px. Этот совет будет особенно полезен, если вы используете внешние CSS-фреймворки, которые могут модифицировать ваши стили.

    Кроссбраузерность: уважение к классике

    Не все пользователи вашего сайта используют последние версии браузеров, так что не забывайте обеспечивать поддержку более старых версий:

    Скопировать код

    Практические советы при использовании CSS для предотвращения изменения размера элемента из-за границ

    Профессионализм в действии: выбор инструментов разработчика

    Опирайтесь на такие инструменты разработки, как Firebug или Chrome DevTools, чтобы наблюдать за поведением ваших размеров в различных браузерах, включая поведение границ. Эти инструменты незаменимы для корректировки layout’а.

    Динамическое изменение стиля с помощью CSS-классов

    Стили границ часто подвергаются изменениям. Используйте переключение CSS-классов для управления этими изменениями:

    Скопировать код

    .selected

    Адаптивные дизайны: быть в тренде

    Не замыкайтесь в строгих рамках. Будьте гибкими в вопросе определения размеров, используйте отступы и внутренние отступы для создания адаптивных дизайнов.

    Работа с несколькими фонами

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

    Правильный выбор границ?

    Иногда вам может потребоваться добавить границу только сверху и снизу элемента. Для этого используйте свойства border-top и border-bottom :

    box — sizing

    Это свойство определяет как будут вести себя размеры блока.

    Время чтения: меньше 5 мин

    Открыть/закрыть навигацию по статье
    Контрибьюторы:

    • Светлана Коробцева ,
    • Антон Капустинский

    Обновлено 2 ноября 2022

    Кратко

    Скопировать ссылку «Кратко» Скопировано

    При помощи свойства box — sizing можно изменить то, как браузер будет рассчитывать размеры элемента.

    По умолчанию размером элемента считается размер контентной области. Если кроме width и height указать ещё и padding с border , то браузер посчитает размер элемента как width + padding * 2 + border * 2 и height + padding * 2 + border * 2 .

    �� Если задать значение border — box для свойства box — sizing , то браузер изменит принцип расчёта и padding с border уже будут включены в width и height .

    Подробнее об особенностях расчёта размеров элемента можно прочитать в статье «Блочная модель».

    Пример

    Скопировать ссылку «Пример» Скопировано

    Создадим два элемента и зададим обоим элементам идентичные стили:

     div class="element first">div> div class="element second">div>      
     .element  display: inline-block; width: 100px; height: 100px; padding: 25px; border: 10px solid #ffffff;> .element  display: inline-block; width: 100px; height: 100px; padding: 25px; border: 10px solid #ffffff; >      

    Отличаться они будут только фоном и значением свойства box — sizing .

     .first  box-sizing: content-box; background-color: #2E9AFF;> .second  box-sizing: border-box; background-color: #F498AD;> .first  box-sizing: content-box; background-color: #2E9AFF; > .second  box-sizing: border-box; background-color: #F498AD; >      

    В итоге элементы получились разного размера! Как так? Мы ведь указали одинаковые ширину, высоту и внутренние отступы, а так же рамку ��

    Как понять

    Скопировать ссылку «Как понять» Скопировано

    Причина в том, что при значении свойства box — sizing , равном content — box (значение по умолчанию) ширина элемента рассчитывается следующим образом:

    Ширина контентной области (100) + внутренний отступ слева и справа (25 + 25) + ширина правой и левой рамок (10 + 10). Итого: 170 пикселей.

    Аналогично с высотой.

    Выходит что первый элемент получил размеры 170 х 170.

    Размер второго элемента считается иначе. Из-за значения свойства box — sizing браузер воспринимает width и height как конечные размеры элемента. Получается что в 100 пикселей указанной ширины уже включены и внутренние боковые отступы и боковые рамки. Размеры второго элемента будут 100 х 100.

    Как пишется

    Скопировать ссылку «Как пишется» Скопировано

    В качестве значения для свойства box — sizing невозможно использовать что-то кроме ключевых слов. Значение может быть только одно.

    • content — box — значение по умолчанию. Финальная ширина = ширина + правый внутренний отступ + левый внутренний отступ + правая рамка + левая рамка
    • border — box — значение width и height являются финальными размерами элемента. Финальная ширина = ширина

    Подсказки

    Скопировать ссылку «Подсказки» Скопировано

    �� Свойство нельзя анимировать при помощи transition ��

    �� Свойство не наследуется.

    �� При любом значении свойства внешние отступы ( margin ) в расчёт не берутся.

    �� Значение по умолчанию: content — box .

    На практике

    Скопировать ссылку «На практике» Скопировано

    Алёна Батицкая советует

    Скопировать ссылку «Алёна Батицкая советует» Скопировано

    �� Из-за стандартного механизма расчёта размера элемента многие начинающие разработчики получают не те размеры элемента, которые ожидали. При этом есть два решения:

    1. Подгонять размер элемента под желаемый, высчитывая самостоятельно, какими должны быть внутренние отступы и рамка, чтобы в итоге получился нужный размер.
    2. В самом начале работы «сбросить» стандартное значение, заменив его на предсказуемое box — sizing .

    Для «сброса» можно использовать универсальный селектор. Напиши в самом начале файла со стилями:

     *  box-sizing: border-box;> *  box-sizing: border-box; >      

    Теперь все размеры элементов будут равны тем значениям, что заданы в свойствах width и height . Так победим ����

  • Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *