Width что такое: width | CSS | WebReference

Leave a Comment / Разное / By /

Содержание

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
Устанавливает ширину, исходя из типа и содержимого элемента.

Песочница

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

div {
  width: {{ playgroundValue }}%;
}

Пример

<!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. Ширина блока

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

Объект.style.width

Примечание

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

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

СпецификацияСтатус
CSS Intrinsic & Extrinsic Sizing Module Level 3Рабочий проект
CSS Level 2 Revision 1 (CSS 2.
1)		Рекомендация
CSS Level 1Рекомендация
Спецификация

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

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

Браузеры

481213.511
1141
Браузеры

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

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

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

Размеры

См. также

  • box-sizing
  • height
  • max-width
  • min-width
  • Абсолютное позиционирование
  • Адаптивный макет на флексбоксах
  • Блочные элементы
  • Вкладки на CSS
  • Высота и ширина в CSS
  • Отзывчивый веб-дизайн
  • Открываем блочную модель
  • Поток
  • Примеры использования float
  • Размеры блока
  • Создание флексбоксов
  • Строчно-блочные элементы
  • Строчные элементы

Рецепты

  • Как выровнять таблицу по центру?
  • Как задать ширину таблицы?

Практика

  • Выравнивание таблицы
  • Изображения в колонках
  • Плавающая ширина картинки
  • Цвет фона таблицы
  • Ширина картинки
  • Ширина таблицы

width | htmlbook.

ru
Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+3.1+1.0+1.0+1.0+

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

Значение по умолчаниюauto
НаследуетсяНет
ПрименяетсяК блочным элементам
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/visudet.html#propdef-width

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

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

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

Табл. 1. Действие width в браузерах
<!DOCTYPE>Internet ExplorerOpera 10+, Firefox, Chrome, SafariOpera 9
Не указан (режим совместимости)Если содержимое превышает заданную ширину, то блок изменяет свои размеры, подстраиваясь под содержимое. В противном случае ширина блока равна значению width.Во всех случаях браузер действует по спецификации CSS. А именно, ширина блока получается сложением значений width, padding, margin и border.

Содержимое блока, если не помещается в заданные размеры, отображается поверх блока.

Ширина равна значению width.

Содержимое блока, если не помещается в заданные размеры, отображается поверх.

Переходный HTML
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. 01 Transitional//EN»>
Строгий HTML
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN»>		Ширина формируется путем сложения значений width, padding, margin и border.

Содержимое блока, если не помещается в заданные размеры, отображается поверх.

Ширина равна значению width плюс padding, margin, и border.

Содержимое блока, если не помещается в заданные размеры, отображается поверх.

HTML 5
<!DOCTYPE html>
XHTML
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN»>

Синтаксис

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

Значения

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

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

Пример

HTML5CSS2.1IECrOpSaFx

<!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>

Результат данного примера, как он отображается в браузере 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.

Размеры

Что такое ширина в математике? Определение, формула, примеры, факт

Что такое ширина в математике?

Все живое и неживое вокруг нас имеет разные формы и размеры. Мы можем описать их размер по-разному. Один из них заключается в измерении их ширины. Что означает ширина в геометрии? Измерение объекта из стороны в сторону известно как ширина в математике.

Данное изображение показывает нам ширину бассейна.

Определение ширины

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

Как измеряется ширина? Измеряется под прямым углом к ​​длине. Ширина измеряет объект от одной стороны до другой. Например, мы определяем ширину дороги, измеряя расстояние от одной стороны дороги до другой.

Разница между шириной и длиной

«Ширина» в геометрии часто используется для описания более короткой стороны объекта. Например, в заданных прямоугольниках оба являются одним и тем же прямоугольником, но один повернут только для того, чтобы показать, что более короткая сторона прямоугольника называется шириной.

Термин «длина» часто используется наряду с шириной в геометрии для описания большей длины объекта.

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

Ширина может быть измерена в стандартных единицах, таких как метр, сантиметр, миллиметр.

Другими общепринятыми единицами измерения являются дюйм, ярд, фут.

Разница между шириной и глубиной

Ширина равна глубине? В чем разница между этими измерениями? Давайте посмотрим.

В двухмерных фигурах ширина является самой короткой стороной и говорит нам, насколько широк объект. Некоторыми объектами вокруг вас, которые имеют ширину, являются книга, стена, дверь, черная доска, стол и т. д.

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

Мы используем слово «глубина», когда говорим об объектах, находящихся под землей. Некоторые вещи, которые имеют глубину, включают колодец, яму, озеро и т. д.

Ширина различных двумерных фигур

В двумерных фигурах шириной является самая короткая сторона.

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

Ширина некоторых фигур обозначается специальными именами, например, ширина прямоугольника также известна как его ширина.

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

Ширина различных трехмерных фигур

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

Посмотрим ширину трехмерных фигур.

Заключение

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

Решенные примеры

  1. Какой ластик имеет максимальную ширину?

Решение:

Ширина — это расстояние между сторонами объекта. Подсчитав квадраты, мы видим, что ластик A и B имеет ширину менее 2 сантиметров, а ластик C больше 2 сантиметров.

Следовательно, ластик C имеет максимальную ширину.

2. Какова ширина данного прямоугольника?

Решение: Более короткая сторона прямоугольника — это ширина. Следовательно, ширина прямоугольника равна 5 см.

3. Какова ширина данного прямоугольника?

Решение:  

Считая квадраты по ширине, мы получаем ширину прямоугольника как 2 единицы.

4. Какой прямоугольник имеет наименьшую ширину?

Решение: Самая короткая сторона прямоугольника называется длиной. Подсчитав квадраты, мы видим, что прямоугольник А имеет наименьшую длину самой короткой стороны. Следовательно, прямоугольник A имеет наименьшую ширину.

5. Укажите ширину показанного прямоугольного параллелепипеда.

Решение: Ширина прямоугольного параллелепипеда равна 1 см.

Практические задачи

1

Посмотрите на изображение бильярдного стола, какова его ширина?

3 см

1,5 см

3 м

1,5 м

Правильный ответ: 1,5 м
Ширина бильярдного стола 1,5 м.

2

Какой прямоугольник имеет наибольшую ширину?

А

В

C

Оба A и C

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

3

Какова ширина данного прямоугольника?

5 см

4 см

3 см

2 см

Правильный ответ: 4 см
Ширина прямоугольника равна его самой короткой стороне, т. е. 4 см.

4

Укажите ширину показанного прямоугольного параллелепипеда.

6 см

2 см

1 см

9см

Правильный ответ: 2 см
Ширина прямоугольного параллелепипеда 2 см.

5

_________ — самая короткая сторона прямоугольника.

длина

высота

глубина

ширина

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

Часто задаваемые вопросы

Можно ли измерять ширину в десятичных дробях или дробях?

Да, ширина может измеряться десятичными или дробными числами. Это расстояние между сторонами объекта.

Можно ли измерить ширину ладонью?

Размах рук — нестандартное измерение. Это ширина руки, когда пальцы растопырены. Да, ширину можно измерить размахом рук.

Как найти ширину прямоугольника, если известны площадь и длина?

Мы знаем, что формула для нахождения площади прямоугольника выглядит следующим образом

Ширина $\times$ Длина $=$ Площадь прямоугольника

Итак, мы можем найти ширину прямоугольника, разделив площадь на длину прямоугольника. Ширина $= \frac{Площадь прямоугольника}{Длина}$

Приведите пример, где ширина не является самой короткой стороной.

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

Здесь ширина не является самой короткой стороной.

Глубина и высота совпадают?

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

  • Измерение длины
  • Размеры

Ширина Определение и значение – Merriam-Webster

ˈширина 

ˈс

1

: горизонтальное измерение, выполненное под прямым углом к ​​длине : ширина

2

: размер протяженности или

3

: измеренный и отрезанный кусок материала

бязь ширина

Синонимы

  • амбит
  • амплитуда
  • ширина
  • компас
  • ограничивает
  • размеры
  • экстент
  • диапазон
  • достичь
  • царство
  • прицел
  • развертка
Просмотреть все синонимы и антонимы в тезаурусе 

Примеры предложений

Какова ширина таблицы? Она тщательно измерила длину и ширину комнаты. Палуба проходит по всей ширине дома. Ковер доступен в нескольких ширины . Мы проплыли десять ширин в бассейне. Я купил две ткани ширины . Узнать больше

Недавние примеры в Интернете Лишняя ширина , включая пространство между двумя воротами, сжала лошадей с внутренней стороны ближе к перилам. — Джон Черва, Los Angeles Times , 1 мая 2023 г. Это может позволить расширить тротуары до безопасных ширина , с местом для плеч и велосипедных дорожек. — Алекс Демарбан, Anchorage Daily News , 30 апреля 2023 г. В дополнение к ширине колоды , еще одним фактором, который покупатели должны учитывать, является ее высота. — Кэт Де Наум, Better Homes & Gardens , 28 апреля 2023 г. В противном случае, есть множество цветов на выбор в стандартных ширина . — Рави Давда, Health , 6 апреля 2023 г. Наиболее распространены размеры 20 футов и 40 футов в длину с 8-футовой стандартной шириной . — Красивый дом , 5 апреля 2023 г. Шторм в Салливане прошел от 8 до 10 миль и составил около четверти мили при ширине , сказал Фанк. — Люк Джонсон, 9 лет.0288 Звезда Индианаполиса , 1 апреля 2023 г. Размером с человеческий кулак, гигантские африканские наземные улитки могут вырасти до 8 дюймов в длину и 5 дюймов в ширину . — Марина Джонсон, USA TODAY , 18 марта 2023 г. Согласно исследованию, опубликованному Cambridge University Press, на основе длины плечевой кости и ширины проксимального отдела плечевой кости , K. fordycei весил где-то между 148 кг (326 фунтов) и 159 кг.0,7 кг (352 фунта). — Мак Стоун, Discover Magazine , 24 февраля 2023 г. Узнать больше

Эти примеры программно скомпилированы из различных онлайн-источников, чтобы проиллюстрировать текущее использование слова «ширина». Любые мнения, выраженные в примерах, не отражают точку зрения Merriam-Webster или ее редакторов. Отправьте нам отзыв об этих примерах.

История слов

Этимология

широкая запись 1

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

1570, в значении, определенном в смысле 1

Путешественник во времени

Первое известное использование ширины было в 1570 г.

Посмотреть другие слова того же года

Словарные статьи Около

ширина

вдова женщина

ширина

в ширину

Посмотреть другие записи поблизости

Процитировать эту запись «Ширина.»

Словарь Merriam-Webster. com , Merriam-Webster, https://www.merriam-webster.com/dictionary/width. Доступ 24 мая. 2023.

Копировать ссылку

Детское определение

Ширина

существительное

ширина

ширина

1

: измерение короткой или короткой стороны чего-либо : ширина

2 90 005

: размер площади или диапазона

3

: мерный кусок материала

a ширина ткань

a ширина пиломатериалы

Еще от Merriam-Webster о

ширина

Английский: Перевод слова ширина для Испаноговорящие

Britannica English: перевод ширина для Говорящие на арабском языке

Последнее обновление:

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

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