Width 100 css что это

Атрибут width

Для изменения размеров изображения средствами HTML предусмотрены атрибуты height и width . Допускается использовать значения в пикселях или процентах. Если установлена процентная запись, то размеры изображения вычисляются относительно родительского элемента — контейнера, где находится элемент . В случае отсутствия родительского контейнера, в его качестве выступает окно браузера. Иными словами, width=»100%» означает, что рисунок будет растянут на всю ширину веб-страницы. Добавление только одного атрибута height или width сохраняет пропорции и отношение сторон изображения. Браузер при этом ожидает полной загрузки рисунка, чтобы определить его первоначальную высоту и ширину.

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

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

Синтаксис

Значения

Любое целое положительное число в пикселях или процентах.

Значение по умолчанию

Исходная ширина изображения.

Пример

IMG, атрибут width

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузреа, начиная с которой элемент поддерживается.

width

Устанавливает ширину блочных или заменяемых элементов (к ним, например, относится тег ). Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

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

Табл. 1. Действие width в браузерах

	Internet Explorer	Opera 10+, Firefox, Chrome, Safari	Opera 9
Не указан (режим совместимости)	Если содержимое превышает заданную ширину, то блок изменяет свои размеры, подстраиваясь под содержимое. В противном случае ширина блока равна значению width .	Во всех случаях браузер действует по спецификации CSS. А именно, ширина блока получается сложением значений width , padding , margin и border .

Синтаксис

width: значение | проценты | auto | inherit

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера.

auto Устанавливает ширину исходя из типа и содержимого элемента. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

    width

Результат данного примера, как он отображается в браузере Safari показан на рис. 1.

Ширина блока

Рис. 1. Ширина блока

Объектная модель

[window.]document.getElementById(» elementID «).style.width

Браузеры

Браузер Internet Explorer 6 некорректно определяет width как min-width . В режиме совместимости (quirk mode) Internet Explorer до версии 8.0 включительно неправильно вычисляет ширину элемента, не добавляя к ней значение отступов, полей и границ.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

width

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

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

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

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

В современном CSS есть логический аналог этого свойства — inline — size .

Пример

Скопировать ссылку «Пример» Скопировано

 Я — блочный элемент! Ястрочно-блочныйэлемент! div class="block">Я — блочный элемент!div> div class="inline-block">Яdiv> div class="inline-block">строчно-блочныйdiv> div class="inline-block">элемент!div>

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

 .block  background-color: #2E9AFF;> .inline-block  display: inline-block; background-color: #F498AD;> .block  background-color: #2E9AFF; > .inline-block  display: inline-block; background-color: #F498AD; >

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

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

width

Свойство CSS width устанавливает ширину элемента. По умолчанию она равняется ширине внутренней области, но если box-sizing имеет значение border-box , то она будет равняться ширине области рамки.

Интерактивный пример

Синтаксис

/* Ключевые слова */ width: 25em border-box; width: 75% content-box; width: max-content; width: min-content; width: available; width: fit-content; width: auto; /* значения */ width: 300px; width: 25em; /* значения */ width: 75%; /* Глобальные значения */ width: inherit; width: initial; width: unset;

Свойство width указывается как:

одно из следующих ключевых слов: available , min-content , max-content , fit-content , auto .
или . За ними так же могут быть указаны одни из следующих ключевых слов: border-box , content-box .

Значения

Ширина — фиксированная величина.

Ширина в процентах — размер относительно ширины родительского блока.

Браузер рассчитает и выберет ширину для указанного элемента.

Использует fill-available размер строки или fill-available размер блока, в зависимости от способа разметки.

Внутренняя максимальная предпочтительная ширина.

Внутренняя минимальная ширина.

Ширина содержащего блока минус горизонтальные margin , border и padding .

внутренняя минимальная ширина
меньшая из внутренней предпочтительной ширины и доступной ширины

Формальный синтаксис

width =
auto | (en-US)
| (en-US)
min-content | (en-US)
max-content | (en-US)
fit-content( )

=
| (en-US)

Примеры

Ширина по умолчанию

p.goldie  background: gold; >

p class="goldie">Сообщество Mozilla производит множество отличного ПО.p>

Пиксели и em

.px_length  width: 200px; background-color: red; color: white; border: 1px solid black; > .em_length  width: 20em; background-color: white; color: red; border: 1px solid black; >

div class="px_length">Ширина в пикселяхdiv> div class="em_length">Ширина в emdiv>

Проценты

.percent  width: 20%; background-color: silver; border: 1px solid red; >

div class="percent">Ширина в процентахdiv>

max-content

p.maxgreen  background: lightgreen; width: intrinsic; /* Safari/WebKit используют нестандартное имя */ width: -moz-max-content; /* Firefox/Gecko */ width: -webkit-max-content; /* Chrome */ >

p class="maxgreen">Сообщество Mozilla производит множество отличного ПО.p>

min-content

p.minblue  background: lightblue; width: -moz-min-content; /* Firefox */ width: -webkit-min-content; /* Chrome */ >

p class="minblue">Сообщество Mozilla производит множество отличного ПО.p>

Проблемы доступности

Убедитесь, что элементы с width не обрезаются и / или не затеняют другое содержимое, когда страница масштабируется для увеличения размера текста.

MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0

Спецификации

Specification
CSS Box Sizing Module Level 4 # width-height-keywords
CSS Box Sizing Module Level 4 # sizing-values

Начальное значение	auto
Применяется к	все элементы, кроме незаменяемых строчных элементов, табличных строк и групп строк
Наследуется	нет
Проценты	ссылается на ширину содержащего блока
Обработка значения	процент, auto или абсолютная длина
Animation type	длина, проценты или calc();

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Блочная модель, height , box-sizing , min-width , max-width

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Product help
Report an issue

Our communities

Developers

Web Technologies
Learn Web Development
MDN Plus
Hacks Blog

Website Privacy Notice
Cookies
Legal
Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Width 100 css что это

Атрибут width

Синтаксис

Значения

Значение по умолчанию

Пример

Браузеры

width

Синтаксис

Значения

Объектная модель

Браузеры

width

Пример

width

Интерактивный пример

Синтаксис

Значения

Формальный синтаксис

Примеры

Ширина по умолчанию

Пиксели и em

Проценты

max-content

min-content

Проблемы доступности

Спецификации

Совместимость с браузерами

Смотрите также

Found a content problem with this page?

MDN

Support

Our communities

Developers

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