Width css 100: width — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

width — CSS — Дока

Кратко

Скопировано

Свойство width отвечает за ширину элемента. С его помощью мы можем увеличивать или уменьшать ширину строчно-блочных (inline-block) и блочных (block) элементов. На строчные элементы это свойство не будет иметь никакого влияния.

Строчно-блочные (inline-block) элементы по умолчанию подстраиваются под ширину контента, лежащего у них внутри.

Блочные (block) элементы по умолчанию имеют ширину 100%. Если представить сайт как документ с текстом, то блочный элемент займёт всю строку, на которой стоит.

Кроме фиксированной ширины можно задавать элементу минимальную ширину min-width или максимальную ширину max-width.

Пример

Скопировано

<div>Я — блочный элемент!</div><div>Я</div><div>строчно-блочный</div><div>элемент!</div>
          <div>Я — блочный элемент!</div>
<div>Я</div>
<div>строчно-блочный</div>
<div>элемент!</div>

Не меняем display для . block, поскольку <div> уже является блочным:

.block {  background-color: #2E9AFF;}.inline-block {  display: inline-block;  background-color: #F498AD;}
          .block {
  background-color: #2E9AFF;
}
.inline-block {
  display: inline-block;
  background-color: #F498AD;
}
Открыть демо в новой вкладке

Благодаря фонам можно увидеть, какую ширину имеет каждый из элементов. Элемент с классом .block занял всю строку, его ширина равна 100% от ширины родителя. Элементы с классом .inline-block

подстроились по ширине под контент и встали в одну строку.

Напишем свойство width и изменим это стандартное поведение. Ограничим ширину .block до половины окна, а каждый элемент .inline-block сделаем на всю ширину окна:

.block {  width: 50%;  background-color: #2E9AFF;}.inline-block {  width: 100%;  display: inline-block;  background-color: #F498AD;}
          . block {
  width: 50%;
  background-color: #2E9AFF;
}
.inline-block {
  width: 100%;
  display: inline-block;
  background-color: #F498AD;
}
Открыть демо в новой вкладке

Как понять

Скопировано

Свойство width позволяет управлять шириной элемента согласно поставленной задаче.

Как пишется

Скопировано

Для фиксированной ширины пишем свойство width. Для минимальной ширины — min-width. Для максимальной ширины — max-width. Эти три свойства можно указывать по отдельности, а также комбинировать для достижения нужного результата.

В качестве значения указываем число и сразу после него без пробела пишем единицу измерения. Ширину можно указывать как в относительных единицах — процентах (%), vw, vmin и так далее, так и в абсолютных единицах — пикселях (px), rem, em и любых других единицах измерения, доступных в вебе.

В данном коде все значения будут рабочими:

selector {  width: 70%;  min-width: 320px;  max-width: 76rem;}
          selector {
  width: 70%;
  min-width: 320px;
  max-width: 76rem;
}

Подсказки

Скопировано

💡 По умолчанию у блочных (block) элементов ширина равна 100%. У строчно-блочных (inline-block) элементов ширина равна ширине вложенного контента.

💡 Ширина в процентах рассчитывается от ширины родительского элемента. Если родительский элемент ограничен по ширине, к примеру, 450 пикселями, то у вложенного элемента ширина в 100% будет равна 450 пикселям. То есть 100% от родительского элемента. Если при этом у родителя будут также указаны внутренние отступы (padding), то 100% ширины для ребёнка будут равны 450px минус боковые отступы.

💡 Блочный (block) элемент занимает всю строку вне зависимости от своей ширины. Оставшееся пространство займёт внешний отступ. Поэтому, ограничивая ширину блочному элементу, не ожидай, что элементы, следующие за ним, встанут с ним в одну строку. Если нужно, чтобы все элементы встали в строку, то нужно менять их с блочных (block) на строчно-блочные (inline-block).

💡 Ограничив ширину блочного элемента, можно очень просто выровнять его по центру экрана. Для этого пропишем внешний отступ (margin) со значениями 0 auto, где 0 отвечает за отступы сверху и снизу, а ключевое слово auto — за боковые отступы.

Открыть демо в новой вкладке

Именно таким образом принято выравнивать контент сайта по центру окна браузера.

На практике

Скопировано

Алёна Батицкая советует

Скопировано

Свойство width, пожалуй, самое часто встречающееся свойство в коде. В работе вы будете манипулировать шириной очень часто.

🛠 Поскольку строчные (

inline) и строчно-блочные (inline-block) элементы подстраиваются по ширине под вложенный контент, то в ситуациях, когда контента внутри нет, ширина такого элемента будет равна нулю. Но часто случается, что нам нужен декоративный элемент. В этом случае без зазрения совести задавайте ширину. И не забудь про высоту (height).

К примеру, часто декоративные иконки верстаются при помощи фона для элементов <i> или <span>. Поскольку контента по факту в этих элементах нет, их ширина и высота будут равны 0. Пропишите display со значением block или inline-block, задайте ширину и высоту иконки и укажите путь до фонового изображения:

<div>  <i></i>  <!-- Внимание на меня! -->  <h3>Заголовок карточки</h3>  <p>Некий текст новостной карточки</p></div>
          
 <div>
  <i></i>
  <!-- Внимание на меня! -->
  <h3>Заголовок карточки</h3>
  <p>Некий текст новостной карточки</p>
</div>

.card__icon {  display: inline-block;  width: 50px;  height: 50px;  background: url('doka-eyes. svg') no-repeat center / cover;}
          .card__icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: url('doka-eyes.svg') no-repeat center / cover;
}
Открыть демо в новой вкладке

🛠 Часто начинающие разработчики разбивают текст заголовка или абзаца на строки при помощи тега <br> чтобы было точно, как в макете. В таких случаях стоит помнить, что сайты редко остаются неприкосновенными и чаще всего в процессе жизни сайта тексты на нём меняются многократно. Поэтому нужно писать стили так, чтобы любой текст, вставленный в блок, выглядел хорошо.

Пример макета:

Как не надо делать:

...<p>  Get the official status of an agent<br>  in the projectname and earn with us.</p>...
          ...
<p>
  Get the official status of an agent<br>
  in the projectname and earn with us.
</p>
...

Как можно сделать:

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

...<p>  Get the official status of an agent in the projectname and earn with us.</p>...
          
 ...
<p>
  Get the official status of an agent in the projectname and earn with us.
</p>
...

.card__text {  max-width: 50%;  margin: 0 auto; /* Для выравнивания по центру */}
          .card__text {
  max-width: 50%;
  margin: 0 auto; /* Для выравнивания по центру */
}
Открыть демо в новой вкладке

Теперь любой текст будет занимать не больше, чем 50% от ширины карточки 🎉

html — разница между шириной auto и шириной 100 процентов

спросил

Изменено 9 месяцев назад

Просмотрено 218 тысяч раз

Ранее мое предположение о width: auto заключалось в том, что ширина устанавливается равной ширине содержимого.

Теперь я вижу, что он занимает всю ширину родителя.

Кто-нибудь может описать разницу между ними?

  • HTML
  • CSS
2

Ширина авто

Начальная ширина блочного элемента, такого как div или p, устанавливается автоматически. Это заставляет его расширяться, чтобы занять все доступное горизонтальное пространство внутри содержащего его блока. Если у него есть какие-либо горизонтальные отступы или границы, их ширина не добавляется к общей ширине элемента.

Ширина 100%

С другой стороны, если вы укажете width:100%, общая ширина элемента будет равна 100% содержащего его блока плюс любые горизонтальные поля, отступы и границы (если только вы не использовали box-sizing:border-box, в котором случае добавляются только поля к 100%, чтобы изменить способ расчета его общей ширины). Это может быть то, что вы хотите, но, скорее всего, это не так.

Чтобы увидеть разницу, посмотрите на эту картинку:

Источник

4

  • ширина: авто; будет стараться изо всех сил поддерживать элемент той же ширины, что и его родительский контейнер, когда дополнительное пространство добавляется из полей, отступов или границ.

  • ширина: 100%; сделает элемент такой же ширины, как родительский контейнер. Дополнительный интервал будет добавлен к размеру элемента независимо от родителя. Обычно это вызывает проблемы.

2

Ширина 100% : Это сделает ширину контента равной 100%. поля, границы, отступы будут добавлены к этой ширине, и элемент будет переполнен, если какой-либо из них добавлен.

Ширина авто : Он будет соответствовать элементу в доступном пространстве, включая поля, границы и отступы. пространство, оставшееся после настройки полей + отступов + границы, будет доступно по ширине / высоте.

Ширина 100% + размер коробки: рамка рамки: Он также будет соответствовать элементу в доступном пространстве, включая границы, отступы (поля заставят его переполнять контейнер).

Речь идет о полях и границах. Если вы используете width: auto , затем добавьте границу, ваш div не станет больше, чем его контейнер. С другой стороны, если вы используете ширину : 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.

Когда мы говорим

 width:auto;

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

Когда мы говорим

 width:100%;

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

Для позиционирующих элементов, ширина: 100%, не относительно родителя, а ближайшего позиционированного элемента.

Если все они расположены статически, это ближайший родительский элемент.

Использование width:auto; + отображение: встроенный блок; в css дает потрясающий эффект.

  • ширина: авто; делает ширину элемента автоматической для настройки с другим объектом, используя с display: inline-block; например, если у нас есть элемент div и еще один элемент div, а элементы div являются элементами блочного уровня, поэтому, показывая их вместе в одной строке, используйте width: auto; Дисплей и : встроенный блок
2

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Что делает «width: 100%» в CSS?

Луи Лазарис / /

Обновлено:

Похоже, это одна из самых простых вещей для понимания в CSS. Если вы хотите, чтобы блочный элемент заполнил все оставшееся пространство внутри своего родителя, то это просто — просто добавьте width: 100% в вашем объявлении CSS для этого элемента, и ваша проблема решена.

Не так быстро. Это не так просто. Я уверен, что разработчики CSS всех уровней квалификации пытались сделать что-то похожее на то, что я только что описал, с причудливыми результатами, которые в конечном итоге приводили к царапанью в затылке и пожиманию плечами, прибегая к экспериментам с абсолютной шириной, пока мы не найдем то, что подходит. Это всего лишь одна из тех вещей в CSS, которые кажутся простыми для понимания (и на самом деле так и должно быть), но иногда это не так — из-за того, как проценты работают в CSS.

Use

box-sizing: border-box

Первоначально это был старый пост, в котором не учитывалось возможное использование свойства border-box . Если вы добавите следующее в начало вашего файла CSS, вы сможете избежать многих проблем, связанных с использованием 100% ширины ваших элементов:

 * {
  box-sizing: граница-коробка;
}

Это гарантирует, что отступы учтены в ширине ваших элементов. Конечно, не во всех проектах это используется, и это не исправляет того факта, что отступы могут влиять на положение внутреннего элемента. Но в большинстве случаев я настоятельно рекомендую вам использовать отступы внутри блока, а не поля, чтобы избежать этой проблемы.

Блоки не нуждаются в 100%-ной ширине

Когда мы поймем разницу между блочными элементами и встроенными элементами, мы узнаем, что блочный элемент (такой как

,

, или

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

    Большинство разработчиков CSS довольно хорошо понимают эту концепцию, но я подумал, что было бы полезно указать ее здесь как введение в объяснение того, как работают проценты при использовании на ширина свойство.

    Что

    ширина: 100% На самом деле означает

    Когда вы задаете элементу ширину 100% в CSS, вы в основном говорите: «Сделайте область содержимого этого элемента точно равной явной ширине его родителя — но только если его родитель имеет явную ширину». Итак, если у вас есть родительский контейнер шириной 400 пикселей, дочерний элемент с шириной 100% также будет иметь ширину 400 пикселей и по-прежнему будет зависеть от полей, отступов и границ — поверх настройки ширины 100%. . Изображение ниже пытается проиллюстрировать это:

    И, конечно же, точно такое же правило применимо к любому процентному значению. Область содержимого будет представлять собой процент от явно установленной ширины родителя.

    ДОБАВЛЕНО ПРИМЕЧАНИЕ. Ширина области содержимого дочернего элемента будет равна ширине области содержимого родителя, но не будет перемещаться за пределы родительской области, если на нее не влияют собственные отступы или поля. Спасибо комментарию Фабио Брендолина за разъяснение этого.

    Нужно ли его использовать?

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

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

    Другим случаем, когда это необходимо, является использование flexbox, который иногда требует, чтобы элемент был установлен на 100% ширины, чтобы занимать полную строку и переопределять естественный способ flexbox равномерно распределять элементы на одной строке. Но это зависит от того, какого макета вы пытаетесь достичь.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *