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

Вычисление ширины блока через box-sizing

В CSS3 появилось свойство box-sizing , смысл которого в способе вычисления ширины HTML-блока браузером. Но, прежде чем переходить к его рассмотрению, сначала давайте вспомним, как обычно браузер производит расчет ширины блока элемента в HTML-разметке?

Вычисление всегда выполняется по формуле: Width = Margin + Border + Padding + Content . То есть, если ширина контента задана в 200px, padding равен 25px, border равен 10px, а margin равен 15px; то результирующая ширина блока будет равна 300px.

Такой способ вычисления ширины блока делают все современные браузеры:

Модель расчета ширины блока в браузере по умолчанию

Однако, были времена, когда не все браузеры вычисляли размеры блока элемента подобным образом. Существовал Internet Explorer версии 5/6, который ширину блока считал несколько иначе: из заданной ширины блока вычитались padding и border, получалась результирующая ширина области content. В те времена веб-разработчики “показывали пальцем” на этот браузер и говорили, что это ошибка и недочет разработчиков IE5/6.

Но теперь времена изменились благодаря появлению адаптивного ( responsive ) дизайна. Причины возникновения адаптивного дизайна — в огромном количестве устройств с разными размерами экранов, по большей части мобильных. Задача адаптивного дизайна в “подстраивании” одного и того же дизайна сайта под различные размеры мониторов. При таком “подстраивании” важной становиться задача вычисления ширины блоков элементов, чтобы верстка не “разваливалась”.

Чтобы такого не произошло, как раз и становиться удобным “возврат” к той модели расчета ширины блока, какая присутствовала в IE5/6. Для этого было разработано свойство box-sizing , с помощью которого можно управлять подобной моделью расчета.

Свойство box-sizing принимает три значения (три модели вычисления ширины блока): **content-box padding-box border-box**.

Свойство box-sizing: content-box

Первая модель content-box является способом вычисления ширины блока по умолчанию, принятым в современных браузерах:

Ширина блока равна сумме: Width = Width (Content) + Padding + Border + Margin

Свойство box-sizing со значением content-box

Свойство box-sizing: padding-box

Вторая модель padding-box заключается в том, что ширина блока включает в себя ширину контента ( content ) и ширину padding . Остальные — border-box и margin-box — приплюсовываются к заданной ширине, как обычно. Данная модель, хоть и заявлена в спецификации CSS3, не поддерживается на сегодняшний день почти никакими браузерами; так что о ней можно забыть (пока забыть):

Ширина блока равна сумме: Width = Width (Content + Padding) + Border + Margin

Свойство box-sizing со значением padding-box

Свойство box-sizing: border-box

Третья модель border-box очень похожа на предыдущую модель padding-box . Но, в данном случае, ширина блока включает в себя еще и border-box ; то есть ширина блока включает в себя область content-box , padding-box и border-box . Область margin-box прибавляется к ширине блока элемента, как обычно.

Ширина блока равна сумме: Width = Width (Content + Padding + Border) + Margin

Свойство box-sizing со значением border-box

Практический пример свойства box-sizing

Теперь не мешало бы продемонстрировать на практике, каким образом браузеры выполняют вычисления ширины блоков элементов под управлением свойства box-sizing . Допустим, у нас имеется блок-обертка div , внутри которого расположены два плавающих блока-потомка div и div .

HTML-разметка представлена ниже:

… и CSS-таблица, обычная для такого случая. Единственное “новое” правило в этом коде — это свойство box-sizing , указанное с вендорными префиксами. Обычно его можно не указывать, так как у браузеров по умолчанию свойство box-sizing установлено в значении content-box (как уже упоминалось ранее). Но в нашем случае понадобится явно указать это свойство. Для блоков-потомков здесь намерено мы не указываем (пока не указываем) padding , border и margin :

Свойство box-sizing со значением content-box

Блоки-потомки четко вписываются в блок-родитель, так как у них нет border , padding и margin ; ширина блоков-потомков точно равна половине ширине блока-родителя.

Теперь добавим для блоков-потомков padding: 5px :

Картина будет заранее предсказуемая — один из блоков-потомков опуститься вниз из-за добавления padding: 5px к обоим блокам:

Свойство box-sizing со значением content-box и padding: 5px

Настало время применить свойство box-sizing со значением border-box . Браузер сразу же пересчитает ширину обоих блоков и картина, как по волшебству, изменится:

Свойство box-sizing со значением border-box и padding: 5px

Даже если добавить к блокам-потомкам границу border , то картинка останется прежней:

Свойство box-sizing со значением border-box и border: 6px

Но если прибавить к блокам div и div правило margin , то наша разметка снова “сломается”:

Это происходит потому, что в модель вычисления border-box поля margin не входят. Поле margin-left размером 5px прибавляется к ширине блока-потомка. Суммарная ширина обоих блоков-потомков превышает ширину блока-родителя и один из них выходит из его, опускаясь (снова) вниз:

Свойство box-sizing со значением border-box и margin-left: 5px

В этом примере мы не применили к свойству box-sizing значения padding-box , потому что [браузеры не понимают этого значения][1] и свойство box-sizing работать не будет в этом случае.

Заключение

Вот и все, что можно сказать о свойстве box-sizing . Понимание этого свойства понадобиться еще, когда придет время изучать адаптивный (responsive) дизайн.

Основой для данной статьи послужила замечательная “Большая книга CSS3 Д. Макфарланд (3-е издание).

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing “MDN CSS — box-sizing”

box-sizing css

TypeScript — размеченные объединения

> Пользовательское объединение типов — что это и как можно использоватьПомимо объединения **примитивных** типов данных (например):<% high. … Continue reading

Сохраняем пропорции высоты и ширины элемента при изменении ширины контента на чистом CSS

Как пропорционально уменьшать ширину и высоту различных элементов при изменении ширины родительского контейнера?

Для изображений это делается очень просто, задаем свойству height значение auto , при этом максимальную ширину изображения ограничиваем шириной родительского контейнера max-width: 100%;

Проблема в том, что мы не можем задать height: auto; для блочных элементов, например для DIV. В данном случае 100% &#8211; это будет высота родителя.

Решение проблемы

Нам нужны два блочных элемента для достижения желаемого поведения. Нет изображений, нет Javascript.

Итак, что это? Мы определяем псевдоэлемент для нашего ящика и задаем ему margin-top 100% . Поскольку это 100% значение относится к ширине элемента &#8230; вы получаете его ( height: 0; padding-bottom: 100%; также будет работать, но тогда вы должны отрегулировать значение padding-bottom каждый раз, когда вы меняете ширину).

Таким образом, наш блок уже выше ширины. Если вы хотите отображать только несколько цветных блоков, тогда уже все готово. Но поскольку пользовательский интерфейс намного сложнее, и если вы также предоставляете некоторый контент, мы добавляем контент в наш блок .box .

Контент

И вот трюк: мы просто позиционируем блок контента как абсолютный со всеми четырьмя ориентациями, установленными в 0. Это просто покрывает родительский элемент полностью, независимо от того, какой размер он имеет.

Вот и все. Блестяще, не так ли? Даже padding не сломает его, и нет необходимости в box-sizing: border-box здесь.

Другие пропорции

Если вы хотите создать другие коэффициенты, просто измените значение padding-top псевдоэлемента:

IE7 и ниже

Поскольку IE такой IE, и особенно IE7 &#8211; это все, но только не браузер, вы должны сами создать элемент вместо псевдоэлемента в своей разметке, если хотите поддержать IE. Или бросьте на него Javascript, пока он, надеюсь, не сломается. Навсегда.
Мой вольный перевод статьи http://www.mademyday.de/css-height-equals-width-with-pure-css.html.

Рабочий пример на CodePen:

Вариант №2 &#8211; Сохраняем пропорции высоты и ширины элемента при изменении ширины контента на чистом CSS без псевдоэлементов

Есть второй вариант без псевдоэлементов, но при его использовании блок всегда имеет ширину 100%, поэтому если нужно несколько таких блоков в ряд, то они должны быть помещены в какой-то родитель, у которого уже будет задана нужная ширина относительно остальных элементов на странице.

Уменьшение высоты блока CSS

Каким свойством можно уменьшить высоту блока на несколько пикселей? А то у меня такая структура: шапка блока, потом контент блока, потом футер блока, но футер с тенью внизу, и получается что тень обромляется обводкой слева и справа — не красиво, фиксированую высоту не хочется ставить. Подскажите пож-та

Если футер внутри блока, попробуйте указать отрицательный margin-bottom для футера.

Это поднимет границу "футеросодержащего" блока на указанное количество пикселей.

Высота свойство — height: Ширина — width:

&#x412;&#x441;&#x451; &#x435;&#x449;&#x451; &#x438;&#x449;&#x435;&#x442;&#x435; &#x43E;&#x442;&#x432;&#x435;&#x442;? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

дизайн сайта / логотип &#169; 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая &#171;Принять все файлы cookie&#187; вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

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