diff options
Diffstat (limited to 'files/ru/web/css/width/index.html')
| -rw-r--r-- | files/ru/web/css/width/index.html | 207 |
1 files changed, 207 insertions, 0 deletions
diff --git a/files/ru/web/css/width/index.html b/files/ru/web/css/width/index.html new file mode 100644 index 0000000000..15dd65de37 --- /dev/null +++ b/files/ru/web/css/width/index.html @@ -0,0 +1,207 @@ +--- +title: width +slug: Web/CSS/width +translation_of: Web/CSS/width +--- +<div>{{CSSRef}}</div> + +<p>Свойство CSS <strong><code>width</code></strong> устанавливает ширину элемента. По умолчанию она равняется ширине <a href="/ru/docs/Web/CSS/box_model#content">внутренней области</a>, но если {{cssxref("box-sizing")}} имеет значение <code>border-box</code>, то она будет равняться ширине <a href="/ru/docs/Web/CSS/box_model#border">области рамки</a>.</p> + +<div>{{EmbedInteractiveExample("pages/css/width.html")}}</div> + +<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p> + +<p>Свойства {{cssxref("min-width")}} и {{cssxref("max-width")}} перекрывают {{cssxref("width")}}.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush:css no-line-numbers">/* <length> значения */ +width: 300px; +width: 25em; + +/* <percentage> значения */ +width: 75%; + +/* Значения-ключевые слова */ +width: 25em border-box; +width: 75% content-box; +width: max-content; +width: min-content; +width: available; +width: fit-content; +width: auto; + +/* Глобальные значения */ +width: inherit; +width: initial; +width: unset; +</pre> + +<p>Свойство <code>width</code> указывается как:</p> + +<ul> + <li>одно из следующих ключевых слов: <code><a href="#available">available</a></code>, <code><a href="#min-content">min-content</a></code>, <code><a href="#max-content">max-content</a></code>, <code><a href="#fit-content">fit-content</a></code>, <code><a href="#auto">auto</a></code>.</li> + <li><code><a href="#<length>"><length></a></code> или <code><a href="#<percentage>"><percentage></a></code>. За ними так же могут быть указаны одни из следующих ключевых слов: <code><a href="#border-box">border-box</a></code>, <code><a href="#content-box">content-box</a></code>.</li> +</ul> + +<h3 id="Значения">Значения</h3> + +<dl> + <dt><a id="<length>" name="<length>">{{cssxref("<length>")}}</a></dt> + <dd>Ширина - фиксированная величина.</dd> + <dt><a id="<percentage>" name="<percentage>">{{cssxref("<percentage>")}}</a></dt> + <dd>Ширина в процентах - размер относительно ширины родительского блока.</dd> + <dt><code><a id="border-box" name="border-box">border-box</a> </code>{{experimental_inline}}</dt> + <dd>Если присутствует, то предшествующие {{cssxref("<length>")}} или {{cssxref("<percentage>")}} применяются к области рамки элемента.</dd> + <dt><a id="content-box" name="content-box"><code>content-box</code></a> {{experimental_inline}}</dt> + <dd>Если присутствует, то предшествующие {{cssxref("<length>")}} или {{cssxref("<percentage>")}} применяются к внутренней области элемента.</dd> + <dt><a id="auto" name="auto"><code>auto</code></a></dt> + <dd>Браузер рассчитает и выберет ширину для указанного элемента.</dd> + <dt><a id="fill" name="fill"><code>fill</code></a> {{experimental_inline}}</dt> + <dd>Использует <code>fill-available</code> размер строки или <code>fill-available</code> размер блока, в зависимости от способа разметки.</dd> + <dt><a id="max-content" name="max-content"><code>max-content</code></a> {{experimental_inline}}</dt> + <dd>Внутренняя максимальная предпочтительная ширина.</dd> + <dt><a id="min-content" name="min-content"><code>min-content</code></a> {{experimental_inline}}</dt> + <dd>Внутренняя минимальная ширина.</dd> + <dt><a id="available" name="available"><code>available</code></a> {{experimental_inline}}</dt> + <dd>Ширина содержащего блока минус горизонтальные <code>margin</code>, <code><font face="consolas, Liberation Mono, courier, monospace">border</font></code> и <code>padding</code>.</dd> + <dt id="fit-content"><a id="fit-content" name="fit-content"><code>fit-content</code></a> {{experimental_inline}}</dt> + <dd>Наибольшее из: + <ul> + <li>внутренняя минимальная ширина</li> + <li>меньшая из внутренней предпочтительной ширины и доступной ширины</li> + </ul> + </dd> +</dl> + +<h3 id="Формальный_синтаксис">Формальный синтаксис</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Ширина_по_умолчанию">Ширина по умолчанию</h3> + +<pre class="brush:css">p.goldie { + background: gold; +}</pre> + +<pre class="brush:html"><p class="goldie">Сообщество Mozilla производит множество отличного ПО.</p></pre> + +<p>{{EmbedLiveSample('Default_width', '500px', '64px')}}</p> + +<h3 id="Пиксели_и_em">Пиксели и em</h3> + +<pre class="brush: css">.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; +} +</pre> + +<pre class="brush: html"><div class="px_length">Ширина в пикселях</div> +<div class="em_length">Ширина в em</div></pre> + +<p>{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}</p> + +<h3 id="Проценты">Проценты</h3> + +<pre class="brush: css">.percent { + width: 20%; + background-color: silver; + border: 1px solid red; +}</pre> + +<pre class="brush: html"><div class="percent">Ширина в процентах</div></pre> + +<p>{{EmbedLiveSample('Percentage', '500px', '64px')}}</p> + +<h3 id="max-content_2">max-content</h3> + +<pre class="brush:css;">p.maxgreen { + background: lightgreen; + width: intrinsic; /* Safari/WebKit используют нестандартное имя */ + width: -moz-max-content; /* Firefox/Gecko */ + width: -webkit-max-content; /* Chrome */ +}</pre> + +<pre class="brush:html"><p class="maxgreen">Сообщество Mozilla производит множество отличного ПО.</p></pre> + +<p>{{EmbedLiveSample('max-content_2', '500px', '64px')}}</p> + +<h3 id="min-content_2">min-content</h3> + +<pre class="brush:css">p.minblue { + background: lightblue; + width: -moz-min-content; /* Firefox */ + width: -webkit-min-content; /* Chrome */ +}</pre> + +<pre class="brush:html"><p class="minblue">Сообщество Mozilla производит множество отличного ПО.</p></pre> + +<p>{{EmbedLiveSample('min-content_2', '500px', '155px')}}</p> + +<h2 id="Проблемы_доступности">Проблемы доступности</h2> + +<p>Убедитесь, что элементы с <code>width</code> не обрезаются и / или не затеняют другое содержимое, когда страница масштабируется для увеличения размера текста.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td> + <td>{{Spec2('CSS3 Sizing')}}</td> + <td>Добавляет ключевые слова <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'width')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Определяет <code>width</code> как анимируемое.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Уточняет к какому элементу относится</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#width', 'width')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Первоначальное определение.</td> + </tr> + </tbody> +</table> + +<div>{{cssinfo}}</div> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + +<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div> + +<p>{{Compat("css.properties.width")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/ru/docs/Web/CSS/box_model">Блочная модель</a>, {{cssxref("height")}}, {{cssxref("box-sizing")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}</li> +</ul> |