CSS дочерняя ширина 100% или px вопрос

Question

Может быть, простой вопрос с простым ответом.

Сегодня мне стало интересно, какова разница между шириной дочернего элемента в пикселях или 100%, когда ширина дочернего элемента будет точно такой же, как у родительского элемента. Результаты будут такими же, как я знаю, но что лучше использовать?

Пример;

div {width: 300px;}
h1 {width: 300px;} /*or..*/
h1 {width: 100%;}

<div>
<h1>Width of child</h1>
</div>

Это имеет значение? А что ты используешь?

Answer 1

Визуально оба ваших примера будут выглядеть одинаково.

Но использование width: 100% для дочернего элемента означает, что если вы когда-либо захотите изменить ширину обоих, вам нужно всего лишь изменить ширину родительского элемента.

Также обратите внимание, что теги h * являются элементами уровня блока, поэтому по умолчанию для него уже установлена ​​ширина 100%, поэтому в вашем примере установка любой ширины для h1 является избыточной.

Answer 2

Существует гораздо лучшая альтернатива обоим:

 {width:auto;}

... на дочернем элементе.

Для вашего примера, с {width: 100%} или {width: 300px}, если вы решили затем применить отступ или границу к дочернему элементу (h1), он будет переполнен за пределами своего контейнера. Если вы используете ширину пикселя, вам нужно будет вычесть сумму (padding-left + padding-right + border-left + border-right) из ширины дочернего элемента, чтобы он просто поместился внутри, аккуратно. В случае ширины в процентах вам нужно будет выполнить более сжатый расчет, чтобы получить правильный процент (и, вероятно, все еще немного).

Но {width: auto} будет автоматически учитывать отступы и границы, а его вычисленная ширина будет на соответствующую величину меньше, чем контейнер, так что внешний край границы на H1 остается в пределах области содержимого вашего div .

Answer 3

Если вы используете 100%, то со временем это будет на одну модификацию меньше по мере изменения ширины родительского элемента.Таким образом, использование 100% делает ваш CSS более удобным.

Answer 4

Другой пример: это может повлиять на то, к какому элементу вы бы применили фоновое изображение фиксированного размера. В этом случае используйте px, чтобы изменения макета не повредили ваши изображения. Как уже сказал Бабак, это актуально только для последующих модификаций.