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

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

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

Пример;

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

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

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

4 ответа

Решение

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

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

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

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

 {width:auto;}

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

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

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

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

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

Другие вопросы по тегам