Как рассчитывается заполнение при использовании процента (%)?

Почему отступ в этом примере не равен 300 пикселям?

#Test{
  width:600px;
  padding-right:50%;
  box-sizing:border-box;
  background:#ddd;
}
<div id="Test">
TEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ HTEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ HTEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ HTEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ H
</div>

  • Откуда браузер выводит свои расчеты, 50% от чего?

  • В приведенном ниже примере отступ фактически становится меньше по мере того, как контейнер #Test становится больше.

  • На самом деле я хочу, чтобы ширина #Test была динамической, однако я исправил ее для целей этого примера.

  • И как мне получить 50% заполнения #Test?

Примечания. Я ищу не просто решение, а понимание того, как здесь работает отступ.


padding css box-sizing
person DreamTeK    schedule 12.01.2016    source источник
comment
50% — относительное измерение. вопрос, который вы должны задать, заключается в том, каково это измерение относительно К.   -  person Marc B    schedule 12.01.2016

Ответы (2)


arrow_upward
11
arrow_downward

TL;DR

Заполнение рассчитывается в соответствии с шириной родителя

Во-первых, вы должны отметить, что:

Процент:
Процент рассчитывается относительно ширины блока, содержащего сгенерированный блок [...] (источник: w3c, выделение мое)

Это означает, что отступ вычисляется в соответствии с шириной родительского элемента (стоит отметить, что в макеты без flexbox, отступы сверху и снизу также относятся к ширине содержащего блока).

С коробкой-размером: граница-коробка

Когда вы меняете box-model по умолчанию на границы, отступы (и границы ) включается в ширину элемента, как в вашем примере. Так с

width:600px;
padding-right:50%;
box-sizing:border-box;

Правильный отступ должен составлять 50% от ширины родителя, но общая ширина элемента составляет 600 пикселей. Единственный момент, когда право отступа составляет 50% от ширины элемента, — это когда parent width = element width (Обратите внимание, что в вашем примере этого не может быть, потому что родителем является body, а body имеет поле по умолчанию).

Временное решение.
Если вы хотите, чтобы отступ составлял 50 % ширины элемента, в этой блочной модели вы можете:

  • установить фиксированный отступ: width:600px; padding-right: 300px;
  • придайте элементу плавную ширину: width:50%; padding-right:25%;

Без размера окна: граница окна

В блочной модели по умолчанию отступы не включены в ширину элемента, поэтому element width = 600px + 50% of parent's width, как вы можете видеть в следующем примере:

#Test{
  width:600px;
  padding-right:50%;
  background:#ddd;
}
<div id="Test">
TEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ HTEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ HTEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ HTEXT ETISI DHOASIHD I SAIDUHSILAUDH LISH ADBHSJADB JHSA DKH ASKDH KSAH DKLJS ADLK ASJKLD KLASH DLSJAH KLS ADKL S JS KSH KD KSJ HDKJSH DKH SDKH SKDH KSJH DKJSH DKJ H
</div>

Временное решение.
Если вы хотите, чтобы отступ составлял 50 % ширины элемента, в этой блочной модели вы можете:

  • установить фиксированный отступ: width:300px; padding-right: 300px;
  • придайте элементу плавную ширину: width:25%; padding-right:25%;

Ссылки:

  • Блочная модель MDN, W3C
  • Свойство заполнения: MDN, W3C
  • Свойство box-sizing : MDN W3C
person web-tiki    schedule 12.01.2016
comment
Имея это в виду, как вы создаете желаемую процентную ширину для элемента? - person DreamTeK; 12.01.2016
comment
@Obsidian хорошо, в вашем случае это довольно просто, поскольку у вас фиксированная ширина в пикселях, вы также можете указать значение отступа в пикселях, например: padding-right:300px; - person web-tiki; 12.01.2016
comment
:) и я предполагаю, что для динамического элемента мне придется включить дополнительный вложенный div? - person DreamTeK; 12.01.2016
comment
@Obsidian, вы можете сделать это или, если вы хотите, чтобы элемент имел ширину 50% и отступ, равный 50% ширины i, вы можете задать отступу значение 25%, потому что 50 / 2 = 25 . - person web-tiki; 12.01.2016
comment
@ Джош Крозье: не ссылайтесь на REC-CSS2 - это спецификация 1998 года, и некоторые разделы содержат отличия от CSS2.1. - person BoltClock; 18.01.2016
comment
Спасибо за указание на то, что @BoltClock я также изменил ссылки и ссылки в ответе. - person web-tiki; 18.01.2016

arrow_upward
2
arrow_downward

Это связано с шириной родительского элемента, если только ширина родительского элемента не зависит от этого.

Из спецификации CSS 2.1 W3C:

Процент рассчитывается относительно ширины блока, содержащего сгенерированный блок, даже для «отступов сверху» и «отступов снизу». Если ширина содержащего блока зависит от этого элемента, результирующий макет не определен в CSS 2.1.

person Cedric Reichenbach    schedule 12.01.2016