Процент заполнения/края CSS в рамке

Question

Насколько я понимаю, используя box-sizing:content-box, при настройке прокладки и поля элемента в процентах они будут составлять процент от ширины фактической области содержимого. Таким образом, 50% -ная граница изображения шириной 300 пикселей без какого-либо отношения к его дополнению создаст ширину в 150 пикселей и, следовательно, фактический размер ширины 450 пикселей (+ дополнение).

Теперь, когда я использую box-sizing:border-box, ширина определяется как содержимое + дополнение + граница. Если я установил прописку моего элемента в пограничном поле с использованием процентов, будет ли он ссылаться на это различное определение ширины, поэтому ссылаясь на себя? Если это не так, и это относится только к ширине содержимого, в этом случае сама ширина содержимого также зависит от ширины заполнения и границы (ширина содержимого = ширина рамки) -border-padding), поэтому более высокий процент на padding будет относиться к меньшему содержимому, что делает добавление себя меньше. Я понимаю это право? Похоже, что в обоих случаях прокладка будет сама по себе. Что мне не хватает? И в каком порядке браузер вычисляет проценты, исходя из чего (только контент или фактическая ширина)?

Большое спасибо!

Answer 1

Не имеет значения, что вы установили box-sizing в отношении того, как рассчитываются фактические размеры полей и границ. Так будет и в любом случае.

Что content-box или border-box сделать управление с шириной и высотой элемента так, что граница и отступы не включены (content-box) или они включены (border-box) в общем размере указанного height и width.

Кроме того, границы не могут иметь ширину, заданную в процентах, а отступы основаны на ширине элемента, а не на содержании.

#one { 
 
    box-sizing:content-box; /* default */ 
 
    width:100px; 
 
    height:100px; 
 
    padding:10%; /* padding % is a percentage of the element's width */ 
 
    border:1px solid red; 
 
    border:10% solid black; /* Borders can't be set to percentages */ 
 
    background:yellow; 
 
    float:left; 
 
} 
 

 
#two { 
 
    box-sizing:border-box; /* default */ 
 
    width:100px; 
 
    height:100px; 
 
    padding:10%; /* padding % is a percentage of the element's width */ 
 
    border:1px solid red; 
 
    border:10% solid black; /* Borders can't be set to percentages */ 
 
    background:blue; 
 
    float:left; 
 
}

<div id="one"></div> 
 
<div id="two"></div>