Width что такое – Функция возвращает ширину элемента. Кроме этого, с помощью width(), можно установить новое значение ширины.

Свойство width | CSS справочник

CSS свойства

Определение и применение

CSS свойство width устанавливает ширину области содержимого элемента. Свойства min-width и max-width могут переопределить ширину.

CSS свойство width не включает в себя отступы (padding), границы (border) и поля (margin):

  • Общая ширина элемента вычисляется по формуле:
    width (ширина) + padding-left (левый отступ) + padding-right(правый отступ) + border-left (левая граница) + border-right(правая граница).

  • Общая высота элемента вычисляется по формуле:
    height (ширина) + padding-top (верхний отступ)+padding-bottom(нижний отступ) + border-top (верхняя граница) + border-bottom(нижняя граница).

Поддержка браузерами

CSS синтаксис:

width:"auto | length | initial | inherit";

JavaScript синтаксис:

object.style.width = "10%"

Значения свойства

ЗначениеОписание
autoБраузер вычисляет ширину самостоятельно. Это значение по умолчанию.
lengthОпределяет ширину в пикселях, см и др.
%Определяет ширину в процентах от содержащего блока родительского элемента.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Свойства height и width.</title>
<style> 
.primer1 {
width :25px; /* задаём ширину блока */
height :25px; /* задаём высоту блока */
background-color:orange; /* задаём цвет заднего фона */
}
.primer2 {
width :50px; /* задаём ширину блока */
height :50px; /* задаём высоту блока */
background-color:orange; /* задаём цвет заднего фона */
}
.primer3 {
width :75px; /* задаём ширину блока */
height :75px; /* задаём высоту блока */
background-color:orange; /* задаём цвет заднего фона */
}
.primer4 {
width :100px; /* задаём ширину блока */
height :75px; /* задаём высоту блока */
background-color:orange; /* задаём цвет заднего фона */
}
.primer5 {
width :125px; /* задаём ширину блока */
height :75px; /* задаём высоту блока */
background-color:orange; /* задаём цвет заднего фона */
}
</style>
</head>
	<body>
		<div class = "primer1"></div>
		<div class = "primer2"></div>
		<div class = "primer3"></div>
		<div class = "primer4"></div>
		<div class = "primer5"></div>
	</body>
</html>
Пример использования свойств height и width.CSS свойства

width | CSS справочник

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

CSS свойство width устанавливает ширину области содержимого элемента.

описание работы CSS свойств height и width

Если содержимое превышает заданную ширину области содержимого, оно будет выходить за границу элемента, например слишком длинное слово или слишком большое изображение. Для того, чтобы содержимое оставалось в пределах границ элемента, можно воспользоваться свойством overflow или overflow-x, в этом случае, если содержимое будет превышать заданную ширину, появится полоса прокрутки. Чтобы визуально увидеть, когда содержимое выходит за границу элемента, можно к примеру установить фон или рамку для элемента.

Общая ширина элемента вычисляется по формуле: width + padding (левый и правый) + border (левый и правый). Например, если вы зададите: width: 500px, padding: 5px, border 1px, то общая ширина элемента получится 512px.

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

Примечание: свойство width работает только с блочными элементами.

Значение по умолчанию: auto
Применяется: ко всем элементам, кроме незаменяемых строчных элементов, столбцов таблицы и групп столбцов
Анимируется: да
Наследуется: нет
Версия: CSS1
Синтаксис JavaScript: object.style.width="50px"

Синтаксис

width: auto|величина|inherit;

Значения свойства

Значение Описание
auto Значение auto означает, что область содержимого будет автоматически растянута по ширине ровно на столько, сколько есть свободного места.
величина Определяет ширину в единицах измерения CSS.
% Ширина указывается в процентах и высчитывается в зависимости от ширины области содержимого родительского элемента.
inherit Указывает, что значение наследуется от родительского элемента.

Пример


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style>
    p.ex { width: 300px; }
  </style>
</head>
<body>

  <p>Открыв глаза, он понял, что все еще находится в лесу, поблизости
  никого уже не было, даже чувство тревоги пропало. И только полностью осознав
  что произошло, он наконец-то понял причину нападения и осознал, как много у него
  украли за прошедшие мгновения его жизни.</p>

</body>
</html>

Результат данного примера в окне браузера:

width

width | CSS | WebReference

Устанавливает ширину содержимого элемента. По умолчанию ширина зависит от типа элемента: блочные занимают всю доступную ширину; ширина строчно-блочных равна ширине их содержимому. Свойство width позволяет явно задать желаемую ширину элемента, несмотря на его исходное поведение.

Если для элемента свойство box-sizing задано как border-box, то width определяет ширину блока.

Краткая информация

Значение по умолчаниюauto
НаследуетсяНет
ПрименяетсяКо всем элементам, за исключением строчных и строк таблиц
АнимируетсяДа

Синтаксис ?

width: <размер> | <проценты> | auto

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#
×

Значения

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

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

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>width</title>
  <style>
   .layer1 {
    width: 300px; /* Ширина блока */
    background: #fc0; /* Цвет фона */
    padding: 7px; /* Поля вокруг текста */
    border: 1px solid #ccc; /* Параметры рамки */
   }
   .layer2 {
    width: 400px; /* Ширина текстового блока */
   }
  </style>
 </head>
 <body>
  <div>
   <p>Lorem ipsum dolor sit amet,consectetuer 
   adipiscing elit,seddiem nonummy nibh euismod tincidunt ut 
   lacreet dolore magna aliguam erat volutpat.</p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Ширина блока

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

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

Примечание

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

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

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.
×

Браузеры

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

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 18.03.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Атрибут width | HTML | WebReference

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

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

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

Синтаксис

<img>

Значения

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

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

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

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>IMG, атрибут width</title>
 </head>
 <body>
  <p><img src="image/sample.gif"
    alt=""></p>
 </body>
</html>

Браузеры

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

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.01.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

width против device-width / PAYSTO corporate blog / Habr

Довольно часто люди не понимают разницы между шириной (width) и шириной устройства (device-width) (и, более того, есть примеры с минимальной (min-device-width) и максимальной шириной устройства (max-device-width)), используя медиазапросы CSS. Это недопонимание приводит к написанию плохого кода и значительно большему количеству работы для разработчика. Этот вопрос очень часто встречается на форумах SitePoint, поэтому пришло время объяснить все подробнее. В этой статье будет затронута эта проблема, а также мы более подробно рассмотрим, какой вариант следует использовать, создавая отзывчивые сайты.

Основные определения

Давайте определимся, что мы имеем ввиду, когда говорим о медиазапросах, основанных на «ширине» и «ширине устройства». Нижеприведенные цитаты взяты из статьи MDN о медиазапросах, и там есть такое определение «ширины»:

Свойство среды «ширина» (width) описывает ширину отображаемой поверхности устройства вывода (например, ширину окна документа или ширину окна страницы на принтере)

А вот так MDN определяют «ширину устройства»:

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

Так что же это на самом деле значит? Простыми словами, «ширина» и «ширина устройства» относятся к ширине устройства, а не всей ширине области просмотра, которая может быть абсолютно другим понятием. Все, что вас должно интересовать – это ширина области просмотра, вне зависимости от ширины устройства.

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

Большинство планшетов и мобильных устройств не всегда имеют 1 пиксель устройства на 1 пиксель CSS. Например, вам стоит знать, что у iPhone 4 стандартная область обзора экрана составляет 640×960. Это означает, что на данном примере device-width iPhone4 равна 320×480. Дело в том, что Apple понимают, что не каждый сайт создан отзывчивым и пытается сделать хорошо всем, предоставив ширину около 980px для отображения десктопного варианта сайта. Это значит, что если нет метатега области обзора, iPhone4 берет сайт и отображает его, как если бы он был 980px в ширину, при этом втискивая его в экран шириной 320px, в результате чего с точки зрения пользователя сайт будет отображаться уменьшенным.

Начинаем

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

<meta name="viewport" content="width=device-width,initial-scale=1">

Как только на нашей странице появится этот сниппет, если мы будем просматривать страницу на разных устройствах, будут срабатывать разные медиазапросы. Без этого, при просмотре страницы на определенном устройстве, она будет отображаться просто как уменьшенная версия страницы; устройство будет пытаться вжать целый сайт в экран шириной 320px. И это не есть хорошо ни для вас, ни для ваших пользователей! Пользователи не любят увеличивать сайт, чтобы увидеть контент, и они точно не хотят скроллить его туда-сюда.

Например, давайте возьмем iPhone 4, у которого стандартная ширина области просмотра 980px. Без тега meta ваши попытки использовать медиазапросы не приведут ни к чему, и устройство будет неправильно обращаться к стандартной области просмотра. Большинство медиазапросов рассчитано на 500px или меньше. Это обычно выполняется с помощью простого медиазапроса max-width. Без тега meta вы не получите эффекта от этого запроса, так как iPhone 4 будет продолжать отображать версию сайта шириной 980px. Давайте рассмотрим приведенный ниже пример:

body {
  background: white;    
}
 
@media screen and (min-width: 980px) /* Desktop */ {
  body {
    background: red;
  }
}
 
@media screen  and (max-width: 979px) /* Tablet */ {
  body {
    background: blue;
  }
}
 
@media screen and (max-width: 500px) /* Mobile */ {
  body {
    background: green;
  }
}

Ниже прикреплены два скриншота, сделанные с помощью iPhone 4. На обеих страницах есть вышеуказанный CSS, но на одной используется тег области просмотра meta, а на другой нет.

Показанная выше страница не содержит тега meta, и, в результате, фон отображается красным и имитирует стандартную область просмотра шириной 980px, вместо того, чтобы использовать мобильный медиазапрос на 500px.

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

Почему следует выбирать device-width?

Честно говоря, заголовок этой статьи изначально подразумевает неиспользование device-width. Однако для device-width есть свое место. Если вы делаете сайт для определенных устройств, тогда да – вам следует использовать device-width.

С точки зрения CSS и RWD, хороший сайт – это тот, который на самом деле «агностичен к устройству» и не пытается потакать ширине каждого отдельного девайса. Таргетинг на отдельные контрольные точки для различных «типов» устройств (например, планшетов или мобильных телефонов) достигается путем фокусирования на то, как контент отображается на определенной ширине области просмотра, а потом путем внесения соответствующих изменений в медиазапросы. Поэтому не устройство диктует контрольные точки, а макет и контент, и в конечном итоге это может привести к оптимальным результатам, как с вашей точки зрения, так и с точки зрения пользователей.

Это может и быть той причиной, почему у стольких людей проблемы с созданием отзывчивого дизайна, и почему они жалуются, что это сложно. Но если они пытаются создавать дизайн под отдельные устройства, они ввязываются в заведомо проигрышную битву: количество устройств, которые необходимо учитывать (чтобы охватить всё), слишком огромное и просто сводит все к плохому коду. Также стоит упомянуть, что если вы решили использовать device-width, вы также должны задавать отдельные правила для ориентации (книжная или альбомная): ширина устройства не изменяется только из-за того, что вы повернули устройство на бок. Для этого нужно еще больше кода, а это означает еще больше головной боли.

Однако давайте посмотрим на другой возможный вариант

Что насчет “width”?

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

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

Все что вам нужно для полностью отзывчивой страницы – это гибкий сайт и немного продуманных медиазапросов для таргетирования на стандартный ряд мобильных устройств, планшетов, компьютеров + области просмотра. Я предпочитаю использовать Foundation’s Media Queries, которые являются наиболее точными и охватывают все необходимые области просмотра.

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

Для тестирования я использую расширение для Chrome Responsive Web Design Tester. Оно позволяет выбирать определенное устройство. Вы увидите размер устройства и то, как ваша страница будет отображаться на таком устройстве.

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

В заключение

Вы все еще планируете использовать device-width в медиазапросах? Приведенные аргументы оказались недостаточно убедительными? Использование обычной «ширины» и области просмотра устройства упрощает отзывчивый дизайн и в конечном итоге является лучшим вариантом, который следует использовать практически всегда.

Полезные решения Paysto для читателей Хабра:

width - Перевод на русский - примеры английский

На основании Вашего запроса эти примеры могут содержать грубую лексику.

На основании Вашего запроса эти примеры могут содержать разговорную лексику.

Resize icon to width X height.

Установить новый размер пиктограммы: ширина Х высота.

Their width should be determined by their function.

Их ширина должна определяться в зависимости от их функциональной роли.

The characteristics to be determined are the overall width, and the outside diameter.

Характеристиками, подлежащими определению, являются габаритная ширина и наружный диаметр.

The recommended width of the median can be reduced with the proper type of guard fence.

Рекомендуемая ширина разделительной полосы может быть уменьшена при наличии надлежащего защитного ограждения.

The width of that scrape could give us the size of the hook.

Ширина этой царапины даст нам размер крюка.

Blade width is at least two inches.

Ширина лезвия, по крайней мере, 5см.

Added banner width and height when you create a project.

Добавлено при создании проекта ширина и высота баннера.

Default thumbnail width for articles - default thumbnail width for pictures inside articles.

Ширина эскиза по умолчанию для статей - ширина эскиза по умолчанию для картинки статьи в самой статье.

The width of the branch-decomposition is the maximum width of any of its e-separations.

Ширина декомпозиции на ветви - это максимальная ширина любого ё-разделения.

Thumbnail width for blogs - thumbnail width for pictures in a category blog, section blog and front page.

Ширина эскиза для блогов - ширина мини-эскиза для картинки статьи в блоге категории, блоге раздела и статей на главной.

The specified row width is longer than the input text. The input text length will be used as the row width.

Указанная ширина строки больше, чем длина входного текста. Длина входного текста будет использована как ширина строки.

Maximum permissible width: Minimum permissible width:

11.1.1.1 Максимальная допустимая ширина: 11.1.1.2 Минимальная допустимая ширина:

In width: no special requirement.

6.4.4.1 По ширине: никаких особых предписаний не предусмотрено.

The Scale modifier changes the element's width and height independently.

С помощью модификатора Scale можно изменять ширину и высоту элемента независимо друг от друга.

Depth and width suggest a box cutter.

Danube, Kilia arm (E 80 - 09) - upgrading the fairway depth and/or width.

Дунай, Килийское Гирло (Е 80-09) - улучшение глубины и/или ширины фарватера.

The above figure illustrates the width of various topics for consultations.

Приведенная выше диаграмма иллюстрирует всю широту тематики консультаций.

End-outline marker lamps (paragraph 6.12.) for tractors exceeding 2.1 m in width. Forbidden on all other tractors.

5.16.8 габаритными огнями (пункт 6.12) для тракторов шириной более 2,1 м; запрещены на всех других тракторах.

3.5.2.2. There is no defined theoretical overall width of standard tyres.

3.5.2.2 У стандартных шин не существует определенной теоретической габаритной ширины.

This would ensure that the driver has sufficient free height and width when accessing or leaving his seat.

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

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

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