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

Как изменить размер контейнера в html

  • автор:

Как сделать контейнер по ширине содержимого?

Как сделать .inside по ширине содержимого и выровнять его по центру над элементом .container?

.block < position: relative; margin: 50px; >.container < position: absolute; top: -8px; left: -10px; z-index: 5; width: 20px; height: 20px; background: #fff; border: 1px solid #858585; border-radius: 50%; cursor: pointer; >.inside
 
1000000

Отслеживать

задан 31 июл 2021 в 4:49

Html Developer Html Developer

145 13 13 бронзовых знаков

2 ответа 2

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

* < box-sizing: border-box; >.block < position: relative; margin: 50px; >.container < position: absolute; top: -8px; left: 0; z-index: 5; height: 20px; >.container::before < content: ''; position: absolute; top: 0; left: 50%; height: 20px; width: 20px; border: 1px solid #858585; border-radius: 50%; margin-left: -10px; background: #fff; cursor: pointer; >.inside
 
1000000

Отслеживать

ответ дан 31 июл 2021 в 5:22

27.6k 5 5 золотых знаков 35 35 серебряных знаков 66 66 бронзовых знаков

а почему left: -50%; и width: 20px; в элемент::before ? как это нагуглить?

31 июл 2021 в 8:19

это центрирование, margin = -( ширина / 2). Еще как вариант вместо margin использовать transform: translateX(-50%)

31 июл 2021 в 9:30

это я знаю. мне не понятно почему эти стили применяются к container::before а не к container

31 июл 2021 в 9:52

а почему эти стили должны применяться к container?

31 июл 2021 в 9:53

я этого не утверждаю, а хочу разобраться. не понятно, например, почему width: 20px применяется к container::before. ::before это же не сам элемент, а псевдо элемент до него

Как изменить размер контейнера в html

Размеры элементов задаются с помощью свойств width (ширина) и height (высота).

Значение по умолчанию для этих свойств — auto , то есть браузер сам определяет ширину и высоту элемента. Можно также явно задать размеры с помощью единиц измерения (пикселей, em) или с помощью процентов:

width: 150px; width: 75%; height: 15em;

Пиксели определяют точные ширину и высоту. Единица измерения em зависит от высоты шрифта в элементе. Если размер шрифта элемента, к примеру, равен 16 пикселей, то 1 em для этого элемента будет равен 16 пикселям. То есть если у элемента установить ширину в 15em, то фактически она составит 15 * 16 = 230 пикселей. Если же у элемента не определен размер шрифта, то он будет взят из унаследованных параметров или значений по умолчанию.

Процентные значения для свойства width вычисляются на основании ширины элемента-контейнера. Если, к примеру, ширина элемента body на веб-странице составляет 1000 пикселей, а вложенный в него элемент имеет ширину 75%, то фактическая ширина этого блока составляет 1000 * 0.75 = 750 пикселей. Если пользователь изменит размер окна браузера, то ширина элемента body и соответственно ширина вложенного в него блока div тоже изменится.

Процентные значения для свойства height работают аналогично свойству width, только теперь высота вычисляется по высоте элемента-контейнера.

    Размеры в CSS3 div.outer < width: 75%; height: 200px; margin: 10px; border: 1px solid #ccc; background-color: #eee; >div.inner  

Ширина и высота в CSS 3

В то же время фактические размеры элемента могут в итоге отличаться от тех, которые установлены в свойствах width и height . Например:

    Размеры в CSS3 div.outer  
Определение фактического размера в CSS 3

Фактические размеры в CSS 3

Как видно на скриншоте, в реальности значение свойства width — 200px — определяет только ширину внутреннего содержимого элемента, а под блок самого элемента будет выделяться пространство, ширина которого равна ширине внутреннего содержимого (свойство width) + внутренние отступы (свойство padding) + ширина границы (свойство border-width) + внешние отступы (свойство margin). То есть элемент будет иметь ширину в 230 пикселей, а ширина блока элемента с учетом внешних отступов составит 250 пикселей.

Подобные расчеты следует учитывать при определении размеров элементов.

С помощью дополнительного набора свойств можно установить минимальные и максимальные размеры:

  • min-width : минимальная ширина
  • max-width : максимальная ширина
  • min-height : минимальная высота
  • max-height : максимальная высота
min-width: 200px; width:50%; max-width: 300px;

В данном случае ширина элемента равна 50% ширины элемента-контейнера, однако при этом не может быть меньше 200 пикселей и больше 300 пикселей.

Переопределение ширины блока

Свойство box-sizing позволяет переопределить установленные размеры элементов. Оно может принимать одно из следующих значений:

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

width: 200px; height: 100px; margin: 10px; padding: 10px; border: 5px solid #ccc; background-color: #eee; box-sizing: content-box;

В данном случае элемент будет иметь ширину в 200 пикселей и высоту в 100 пиксей.

width: 200px; height: 100px; margin: 10px; padding: 10px; border: 5px solid #ccc; background-color: #eee; box-sizing: padding-box;
width: 200px; height: 100px; margin: 10px; padding: 10px; border: 5px solid #ccc; background-color: #eee; box-sizing: border-box;

Например, определим два блока, которые отличаются только значением свойства box-sizing:

    Размеры в CSS3 div < width: 200px; height: 100px; margin: 10px; padding: 10px; border: 5px solid #ccc; background-color: #eee; >div.outer1 < box-sizing: content-box; >div.outer2  
Определение фактического размера в CSS 3
Определение фактического размера в CSS 3

В первом случае при определении размеров блока к свойствам width и height будут добавляться толщина границы, а также внутренние и внешние отступы, поэтому первый блок будет иметь большие размеры:

@container¶

Правило @container — это правило условной группы, которое применяет стили к контексту включения. Объявления стилей фильтруются по условию и применяются к контейнеру, если условие истинно. Условие оценивается, когда контейнер меняет размер.

Может быть предоставлено необязательное container-name с учетом регистра, которое отфильтровывает набор контейнеров запросов, рассматриваемых только как те, у которых есть совпадающее имя контейнера запросов. После того, как подходящий контейнер запроса выбран для элемента, каждая функция контейнера в оценивается по сравнению с этим контейнером запроса.

Изображения, фильтры, композиция

  • image-orientation
  • image-rendering
  • image-resolution
  • object-fit
  • object-position
  • linear-gradient()
  • radial-gradient()
  • repeating-linear-gradient()
  • repeating-radial-gradient()
  • conic-gradient()
  • repeating-conic-gradient()
  • url()
  • element()
  • image()
  • cross-fade()
  • background-blend-mode
  • isolation
  • mix-blend-mode
  • contain
  • contain-intrinsic-block-size
  • contain-intrinsic-height
  • contain-intrinsic-inline-size
  • contain-intrinsic-size
  • contain-intrinsic-width
  • container
  • container-name
  • container-type
  • @container
  • content-visibility

Синтаксис¶

1 2 3
@container container-condition>  /* */ > 

Значения¶

Набор функций, которые оцениваются относительно контейнера запроса при изменении размера контейнера. Стили, определенные в , применяются, если условие истинно.

Набор объявлений CSS.

Логические ключевые слова¶

Логические ключевые слова можно использовать для определения состояния контейнера:

  • and — сочетает в себе два или более условий.
  • or — сочетает в себе два или более условий.
  • not — отрицает условие. Для каждого запроса контейнера допускается только одно условие «не», которое нельзя использовать с ключевыми словами and или or .
 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
@container not (width  400px)  /* */ > @container (width > 400px) and (height > 400px)  /* */ > @container (width > 400px) or (height > 400px)  /* */ > @container (width > 400px) not (height > 400px)  /* */ > 

Именованные контексты изоляции¶

Контекст включения может быть назван с помощью свойства container-name .

1 2 3 4
.post  container-name: sidebar; container-type: inline-size; > 

В контейнерных запросах свойство container-name используется для фильтрации набора контейнеров до контейнеров с совпадающим именем контейнера запроса:

1 2 3
@container sidebar (width > 400px)  /* */ > 

Дескрипторы¶

В условии контейнера можно использовать следующие дескрипторы:

Соотношение сторон контейнера, рассчитанное как отношение ширины к высоте контейнера, выраженное как значение .

Размер блока контейнера, выраженный в виде значения .

Высота контейнера, выраженная как значение .

Инлайновый размер контейнера, выраженный в виде значения .

Ориентация контейнера: landscape или portrait .

Ширина контейнера, выраженная в виде значения .

Спецификация¶

box-sizing

Применяется для изменения алгоритма расчета ширины и высоты элемента.

Согласно спецификации CSS ширина блока складывается из ширины контента ( width ), значений отступов ( margin ), полей ( padding ) и границ ( border ). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.

Синтаксис

box-sizing: content-box | border-box | padding-box | inherit

Значения

content-box Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ. border-box Свойства width и height включают в себя значения полей и границ, но не отступов ( margin ). Эта модель используется браузером Internet Exporer в режиме несовместимости. padding-box Свойства width и height включают в себя значения полей, но не отступов ( margin ) и границ ( border ). inherit Наследует значение родителя.

HTML5 CSS3 IE Cr Op Sa Fx

    box-sizing    

В данном примере ширина первого слоя будет равна 324 пиксела, поскольку она складывается из значения ширины контента ( width ), полей слева и справа ( padding ) и толщины границ ( border ). Ширина второго слоя равняется 300 пикселов за счет применения свойства box-sizing . Результат примера в браузере Opera показан на рис. 1.

Ширина блоков

Рис. 1. Ширина блоков

Браузеры

Firefox поддерживает нестандартное свойство -moz-box-sizing .

Safari до версии 5.0, Chrome до версии 10.0, Android до версии 4.0 и iOS Safari до версии 5.0 поддерживают нестандартное свойство -webkit-box-sizing .

Internet Explorer, Chrome, Opera и Safari не поддерживают значение padding-box .

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

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