Что делает «width: 100%» в CSS?
Луи Лазарис / /
Обновлено:
Похоже, это одна из самых простых вещей для понимания в CSS. Если вы хотите, чтобы блочный элемент заполнил все оставшееся пространство внутри своего родителя, то это просто — просто добавьте width: 100% в объявление CSS для этого элемента, и ваша проблема решена.
Не так быстро. Это не так просто. Я уверен, что CSS-разработчики всех уровней квалификации пытались сделать что-то похожее на то, что я только что описал, с причудливыми результатами, которые в конечном итоге приводили к тому, что они ломали голову и пожимали плечами, прибегая к экспериментам с абсолютной шириной, пока мы не найдем то, что подходит. Это всего лишь одна из тех вещей в CSS, которые кажутся простыми для понимания (и на самом деле так и должно быть), но иногда это не так — из-за того, как проценты работают в CSS.
Используйте
box-sizing: border-box Изначально это был старый пост, в котором не учитывалось возможное использование свойства border-box . Если вы добавите следующее в начало вашего файла CSS, вы сможете избежать многих проблем, связанных с использованием 100% ширины для ваших элементов:
* {
box-sizing: граница-коробка;
}
Это гарантирует, что отступы учтены в ширине ваших элементов. Конечно, не во всех проектах это используется, и это не исправляет того факта, что отступы могут влиять на положение внутреннего элемента. Но в большинстве случаев я настоятельно рекомендую использовать отступы внутри блока, а не поля, чтобы избежать этой проблемы.
Блоки не нуждаются в 100%-ной ширине
Когда мы поймем разницу между блочными элементами и встроенными элементами, мы узнаем, что блочный элемент (такой как Большинство разработчиков CSS довольно хорошо понимают эту концепцию, но я подумал, что было бы полезно указать ее здесь в качестве введения к объяснению того, как работают проценты при использовании на Когда вы задаете элементу ширину 100% в CSS, вы в основном говорите: «Сделайте область содержимого этого элемента точно равной явной ширине его родителя — но только если его родитель имеет явную ширину». Итак, если у вас есть родительский контейнер шириной 400 пикселей, дочерний элемент с шириной 100% также будет иметь ширину 400 пикселей и по-прежнему будет зависеть от полей, отступов и границ — поверх настройки ширины 100%. . Изображение ниже пытается проиллюстрировать это: И, конечно, точно такое же правило применимо к любому процентному значению. Область содержимого будет представлять собой процент от явно заданной ширины родителя. ДОБАВЛЕНО ПРИМЕЧАНИЕ. Ширина области содержимого дочернего элемента будет равна ширине области содержимого родителя, но не будет перемещаться за пределы родительской области, если на нее не влияют собственные отступы или поля. Спасибо комментарию Фабио Брендолина за разъяснение этого. Во многих случаях применение Один из случаев, когда вы можете использовать ширину Другим случаем, когда это необходимо, является использование flexbox, который иногда требует, чтобы элемент был установлен на 100% ширины, чтобы занимать всю строку и переопределять естественный способ flexbox равномерно распределять элементы на одной строке. И этот небольшой урок напоминает об одной из разочаровывающих вещей в макетах CSS — что вы не можете задать элементу высоту, которая заполняет его родительский элемент, если только родительский элемент дается (как вы уже догадались) явная настройка высоты. Разница лишь в том, что в этом случае «авто» работать не будет, а вместо него требуется «высота: 100%». Самое замечательное то, что все браузеры (даже IE6 и IE7) используют высоту в процентах одинаково (за исключением ошибок IE), поэтому, если вы явно задаете высоту родительского элемента, дочерний элемент заполняет высоту до 100 % как и ожидалось. Что вы думаете? Вы когда-нибудь неправильно истолковывали ширину в процентах и отказывались от их использования, потому что они не работали так, как вы ожидали? Я знаю, что делал это, и мне потребовалось довольно много времени, чтобы понять это правильно и лучше понять их. спросил Изменено
4 месяца назад Просмотрено
205 тысяч раз Ранее мое предположение о Кто-нибудь может описать разницу между ними? 2 Ширина авто Начальная ширина блочного элемента, такого как div или p, устанавливается автоматически. Это заставляет его расширяться, чтобы занять все доступное горизонтальное пространство внутри содержащего его блока. Ширина 100% С другой стороны, если вы укажете width:100%, общая ширина элемента будет равна 100% содержащего его блока плюс любые горизонтальные поля, отступы и границы (если вы не использовали box-sizing:border-box, в котором случае добавляются только поля к 100%, чтобы изменить способ расчета его общей ширины). Это может быть то, что вы хотите, но, скорее всего, это не так. Чтобы увидеть разницу, посмотрите на эту картинку: Источник 3 1 Ширина 100% : Это сделает ширину контента равной 100%. поля, границы, отступы будут добавлены к этой ширине, и элемент будет переполнен, если какой-либо из них добавлен. Ширина авто : Он будет соответствовать элементу в доступном пространстве, включая поля, границы и отступы. пространство, оставшееся после настройки полей + отступов + границы, будет доступно по ширине / высоте. Ширина 100% + размер окна: рамка: Он также будет соответствовать элементу в доступном пространстве, включая границы, отступы (поля заставят его переполнять контейнер). Речь идет о полях и границах. Если вы используете Пока значение ширины равно auto, элемент может иметь горизонтальные поля, отступы и границы, не становясь шире своего контейнера (если, конечно, сумма левого поля + ширина левой границы + левое отступы + отступы -right + border-right-width + margin-right больше контейнера). Ширина его блока содержимого будет равна тому, что останется после вычитания полей, отступов и границ из ширины контейнера. С другой стороны, если вы укажете width:100%, общая ширина элемента будет равна 100% содержащего его блока плюс любые горизонтальные поля, отступы и границы (если вы не использовали box-sizing:border-box, в в этом случае к 100% добавляются только поля, чтобы изменить способ расчета его общей ширины). Это может быть то, что вы хотите, но, скорее всего, это не так. Источник: http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width200/ Начальная ширина блочного элемента, такого как div или p, устанавливается автоматически. Используйте width:auto для отмены явно заданной ширины. Если вы укажете width:100%, общая ширина элемента будет равна 100% содержащего его блока плюс любые горизонтальные поля, отступы и границы. Итак, в следующий раз, когда вы обнаружите, что устанавливаете ширину элемента уровня блока на 100%, чтобы он занимал всю доступную ширину, подумайте, действительно ли вы хотите установить для него значение auto. Когда мы говорим ширина никогда не будет превышать общую ширину родительского элемента. Максимальная ширина — это его родительская ширина. Даже если мы добавим границы, отступы и поля, содержимое самого элемента станет меньше, чтобы освободить место для границ, отступов и полей. В случае, если пространство, необходимое для границы + заполнения + поля, больше, чем общая ширина родительского элемента, тогда ширина содержимого станет равной нулю. Когда мы говорим ширина содержимого элемента станет равной 100% от родительского элемента, и с этого момента, если мы добавим границу, отступ или поле, это приведет к тому, что дочерний элемент превысит ширину родительского элемента, и он начнет выходить за пределы родительского элемента.
ширина свойство. Что
ширина: 100% На самом деле означает
Нужно ли его когда-нибудь использовать?
width: 100% к блочному элементу либо не нужно, либо приведет к нежелательным результатам. Если вы используете padding для внутреннего элемента и используете box-sizing : border-box , тогда вы будете в безопасности.: 100% , — это когда элемент наследует заданное значение ширины, которое вы хотите переопределить. Но даже в этом случае лучшим вариантом будет использование «width: auto», которое используется по умолчанию для блочных элементов.
Но это зависит от того, какого макета вы пытаетесь достичь. Высота работает одинаково (во всех браузерах!)
html — разница между шириной auto и шириной 100 процентов
width: auto заключалось в том, что ширина устанавливается равной ширине содержимого. Теперь я вижу, что он занимает всю ширину родителя.
Если у него есть какие-либо горизонтальные отступы или границы, их ширина не добавляется к общей ширине элемента. ширина: авто; будет стараться изо всех сил поддерживать элемент той же ширины, что и его родительский контейнер, когда дополнительное пространство добавляется из полей, отступов или границ. ширина: 100%; сделает элемент такой же ширины, как родительский контейнер.
width: auto , затем добавьте границу, ваш div не станет больше, чем его контейнер. С другой стороны, если вы используете ширину 
Для получения дополнительной информации см. это.
width:auto;
width:100%;
