для каких объектов является присущим свойство ширина width
width
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 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
Описание
Устанавливает ширину блочных или заменяемых элементов (к ним, например, относится тег ). Ширина не включает толщину границ вокруг элемента, значение отступов и полей.
Содержимое блока, если не помещается в заданные размеры, отображается поверх.
Синтаксис
width: значение | проценты | auto | inherit
Значения
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера.
auto Устанавливает ширину исходя из типа и содержимого элемента. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат данного примера, как он отображается в браузере Safari показан на рис. 1.
Рис. 1. Ширина блока
Объектная модель
[window.]document.getElementById(» elementID «).style.width
Браузеры
Width и height: определяем размеры элемента
Для того чтобы объекту можно было задать определенную ширину и высоту, в CSS существуют два свойства — width и height (соответственно). С их помощью вы можете устанавливать фиксированные размеры элементов, будь-то сайдбар, изображение, таблица или любой блок.
Особенности вычисления ширины и высоты
Для определения ширины либо высоты объекта можно использовать любые единицы измерения длины в CSS. Наиболее просты в понимании пикселы. Если вы используете процентную запись, имейте в виду, что в этом случае ширина объекта будет зависеть от ширины его родителя. Если такового нет, то ширина элемента вычисляется, исходя из ширины окна браузера (при изменении пользователем ширины окна значение width будет пересчитано).
Процентная ширина и высота дочернего элемента вычисляются на основании размеров родителя
Что входит в ширину и высоту
Для закрепления знаний покажем пример. Допустим, у вас есть элемент с таким стилем:
Для подсчета фактической ширины элемента выполним сложение:
width + margin-left + margin-right + padding-left + border-left = 200px + 15px + 15px + 10px + 3px = 243px (фактическая ширина)
Рекомендации по высоте
Свойство height может быть удобным, если надо точно контролировать, например, высоту изображения. Однако, если в контейнере будет содержаться текст или любой другой контент, у которого может варьироваться высота, крайне не рекомендуется устанавливать фиксированную высоту для контейнера, так как подобная верстка может привести к неожиданному результату — контент будет отображаться поверх другого содержимого.
Вместо фиксированной высоты использовать height: auto — эта запись означает, что высота объекта будет рассчитываться автоматически, в зависимости от содержимого, которое он содержит.
В следующем уроке вы узнаете, как можно переопределять ширину элемента с помощью интересного и очень полезного свойства box-sizing.
CSS Высота и ширина
CSS Настройка высоты и ширины
Свойства height и width используются для установки высоты и ширины элемента.
Свойства высоты и ширины не включают padding (отступы), border (границы) или margin (поля). Они устанавливают высоту/ширину области внутри отступа, границы и поля элемента.
CSS Значения height/width
Свойства height и width могут иметь следующие значения:
CSS height/width Примеры
Пример
Установите высоту и ширину элемента
Пример
Установите высоту и ширину другого элемента
Примечание: Помните, что свойства height и width не включают отступы (padding), границы (border) или поля (margin)! Они устанавливают высоту/ширину области внутри отступа, границы и поля элемента!
Свойство max-width используется для установки максимальной ширины элемента.
Использование max-width вместо этого в данной ситуации улучшит работу браузера с небольшими окнами.
Совет: Измените окно браузера на ширину меньше 500 пикселей, чтобы увидеть разницу между двумя div-ами!
Пример
Установите высоту и ширину элементов
Этот пример демонстрирует, как установить высоту и ширину различных элементов.
Установите высоту и ширину изображения, используя проценты
Этот пример демонстрирует, как установить высоту и ширину изображения, используя процентное значение.
Установите минимальную ширину и максимальную ширину элемента
Этот пример демонстрирует, как установить минимальную ширину и максимальную ширину элемента, используя значение в пикселях.
Установите минимальную высоту и максимальную высоту элемента
Этот пример демонстрирует, как установить минимальную высоту и максимальную высоту элемента, используя значение в пикселях.
Свойства CSS width и height.
Свойства css width отвечает за значение ширины области с содержимым элемента.
Свойства css height отвечает за значение высоты области с содержимым элемента.
Как ширина, так и высота элементов может задаваться всеми доступными способами, которые описаны здесь, либо значением auto, либо значение inherit.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Отрицательные значения высоты и ширины указывать не допускается.
Казалось бы, что с этими свойствами CSS все просто и понятно, но, на самом деле, все оказывается не совсем так просто.
Задав какому-нибудь элементу на веб-странице ширину с помощью свойства width 500px это не будет означать, что общая ширина этого элемента будет 500 пикселей и не более.
Самое главное, что нужно понимать, свойства width и height задают значение ширины и высоты для области с содержимым.
В этом можно легко сейчас убедиться.
Давайте, для примера, возьмем два блока с одинаковой шириной width, но одному из них зададим дополнительно свойство padding.
По умолчанию, веб-страницы имеют поведение, что к значению высоты и ширины добавляется значение padding для соответствующей стороны.
Т.е. общая ширина элемента будет состоять из значения свойства width элемента и к нею будет плюсоваться значение padding-left и padding-right.
Для разных типов элементов, которые можно встретить на странице общая ширина и высота элементов считается по специальным формулам.
Для разных типов элементов, которые возможно встретить на веб-страницах значения width и height могут иметь разное поведение и значения.
Аналогичная ситуация будет со свойством height.
В CSS есть особый алгоритм по которому вычисляется значения width и height для разных элементов на веб-странице. Я не буду сейчас останавливаться на этом алгоритме, т.к. он несколько сложен.
Сейчас для нас главное понять, что свойства width и height позволяют работать с шириной и высотой именно области с содержимым элемента, а не общей шириной и высотой элемента.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Или зарегистрируйтесь через социальные сети:
CSS width Свойство
Пример
Задайте ширину трех элементов
div.a <
width: auto;
border: 1px solid black;
>
div.b <
width: 150px;
border: 1px solid black;
>
div.c <
width: 50%;
border: 1px solid black;
>
Подробнее примеры ниже.
Определение и использование
Свойство width задает ширину элемента.
Ширина элемента не включает отступы, границы или поля!
Примечание: Свойства min-Width и max-width переопределяют width свойство.
| Значение по умолчанию: | auto |
|---|---|
| Inherited: | no |
| Animatable: | yes. Читайте о animatable |
| Version: | CSS1 |
| Синтаксис JavaScript: | object.style.width=»500px» |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Синтаксис CSS
Значения свойств
| Значение | Описание |
|---|---|
| auto | Значение по умолчанию. Обозреватель вычисляет ширину |
| length | Определяет ширину в пикселах, см и т. д. читать о единицах длины |
| % | Определяет ширину в процентах от содержащего блока |
| initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) |
| inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Другие примеры
Пример
Пример
Задайте ширину элемент 100px. Однако, когда он получает фокус, сделать его 250пкс широкий:
input[type=text]:focus <
width: 250px;
>