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

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Другими словами, свойство width устанавливает параметры ширины. Можно применять числовые значения, а так же процентные или auto (браузер сам определит ширину). В указанное значение ширины не входят границы и отступы, если размер указан больше блочного элемента, то может выйти за пределы блока элемента. Для более объективного сценария можно указать дополнительные свойства ширины.

Свойство применимо к блочным элементам, создано в версии CSS1 и проходит валидацию согласно версии CSS3.

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

Табл. 1. Действие width в браузерах
<!DOCTYPE>	Internet Explorer	Opera 10+, Firefox, Chrome, Safari	Opera 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: Наследует значение родителя.

Пример

<!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 class="layer1">
 <p class="layer2">Lorem ipsum dolor sit amet,consectetuer 
 adipiscing elit,seddiem nonummy nibh euismod tincidunt ut 
 lacreet dolore magna aliguam erat volutpat.</p>
 </div>
 </body>
</html>

Результат данного примера использования width

Пример в действии. Свойство width

Lorem ipsum dolor sit amet,consectetuer adipiscing elit,seddiem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Пример 2

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство width</title>
<style type="text/css">
<!--
div {
width:100%;
border:10px dashed;
border-color:#0ba1d5;
outline-width:thick;
outline-style:dotted;
outline-color:red;
color: yellow;
font-size: 40px;
text-decoration:blink;
}
-->
</style>
</head>
<body>
<center>
<div>Ширина = 100%</div>
</center>
</body>
</html>

Пример 2 в действии

по ссылке

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

[window.]document.getElementById("elementID").style.width

Браузеры

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

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

Источники: http://htmlbook.ru/ и http://delaisait.ucoz.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Размеры | Добавил: free20860soft (10.07.2013)

Просмотров: 825 | Теги: свойства CSS, Размеры | Рейтинг: 0.0/0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]