Ширина в html: Атрибут width | htmlbook.ru

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.

Размеры

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

  • Содержание
    • Синтаксис
    • Значения
    • Значение по умолчанию
    • Пример
    • Примечание
    • Браузеры

Задаёт ширину колонки. Если общая ширина содержимого превышает указанную ширину, то браузер будет пытаться «втиснуться» в заданные размеры за счёт форматирования текста. В случае, когда это невозможно, например, в колонке находятся изображения, атрибут width будет проигнорирован, и новая ширина колонки будет вычислена на основе её содержимого.

Данный атрибут устарел, взамен используйте стили.

Синтаксис

<col>

Значения

Обычно применяется любое целое значение в пикселях или процентах от доступного пространства. Альтернативный вариант основан на использовании символа *, который обозначает всю доступную ширину. Допустимо использовать кратные значения, например 3*. Например, если для таблицы установлена ширина 600 пикселей, а для колонок — 1*, 2*, то в пикселях это будет соответственно 200 и 400. При использовании подобных единиц браузеру требуется загрузить таблицу целиком, чтобы вычислить необходимую ширину ячеек, что приводит к задержке вывода больших таблиц.

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

Ширина вычисляется на основе содержимого ячейки.

Пример

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» quot;http://www.w3.org/TR/html4/strict.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>COL, атрибут width</title> </head> <body> <table cellpadding=»10″ border=»1″> <col> <col> <tr> <td> . .. </td> <td> … </td> </tr> </table> </body> </html>

Примечание

Для изменения ширины колонок воспользуйтесь псевдоклассом :nth-child и свойством width, добавляя их к селектору td.

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Ширина колонок</title> <style> table { width: 100%; /* Ширина таблицы */ } td { border: 1px solid black; /* Рамка вокруг ячеек */ } td:nth-child(1) { width: 20%; /* Ширина первой колонки */ } td:nth-child(2) { width: 80%; /* Ширина второй колонки */ } </style> </head> <body> <table> <tr> <td> … </td> <td> … </td> </tr> </table> </body> </html>

Браузеры

5 12 1 4 1 1
1 1 6 1

Браузеры

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

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

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

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

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

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

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

Свойство ширины CSS

❮ Назад Полное руководство по CSS Далее ❯


Пример

Установите ширину трех элементов

:

div.a {
  ширина: авто;
  граница: 1 пиксель сплошной черный;
}

div.b {
  ширина: 150 пикселей;
граница: 1px сплошной черный;
}

div.c {
  ширина: 50%;
  граница: 1 пиксель сплошной черный;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.


Определение и использование

Свойство width устанавливает ширину элемента.

Ширина элемента не включает отступы, границы или поля!

Примечание: Минимальная ширина и свойства max-width переопределяют ширину имущество.

Показать демо ❯

Значение по умолчанию: авто
По наследству: нет
Анимация: да. Читать о анимированном Попытайся
Версия: CSS1
Синтаксис JavaScript: объект .style.width=»500px» Попытайся


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

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

Собственность
ширина 1,0 4,0 1,0 1,0 3,5



Синтаксис CSS

width: auto| значение |начальное|наследовать;

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

Значение Описание Демо
авто Значение по умолчанию. Браузер вычисляет ширину Демонстрация ❯
длина Определяет ширину в пикселях, см и т. д. Подробнее о единицах длины Демонстрация ❯
% Определяет ширину в процентах от содержащего блока Демонстрация ❯
начальный Устанавливает для этого свойства значение по умолчанию. Читать о начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать


Дополнительные примеры

Пример

Установите ширину элемента , используя процентное значение:

img {
  width: 50%;
}

Попробуйте сами »

Пример

Установите ширину элемента на 100 пикселей. Однако, когда он получает фокус, сделайте его шириной 250 пикселей:

input[type=text] {
 ширина: 100 пикселей;
}

input[type=text]:focus {
  ширина: 250 пикселей;
}

Попробуйте сами »


Связанные страницы

Учебник CSS: Высота и ширина CSS

Учебник: Модель CSS Box

Справочник по CSS: свойство height

Ссылка на HTML DOM: свойство width 9000 Полное руководство по CSS Следующий ❯


ВЫБОР ЦВЕТА



Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.
CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery 902 Top2 Reference 902 Top2 Reference

9003 902 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Ширина ввода HTML Атрибут

❮ Тег HTML

Пример

Определить изображение как кнопку отправки с атрибутами высоты и ширины:


 
 


 




Попробуйте сами »


Определение и использование

Атрибут width определяет ширина элемента .

Примечание: Атрибут ширина используется только с .

Наконечник: Всегда указывайте как высоту , так и высоту и . ширина атрибуты для изображений. Если установлены высота и ширина, пространство, необходимое для изображение резервируется при загрузке страницы. Однако без этих атрибутов браузер не знает размер изображения и не может зарезервировать соответствующее пространство для него. Эффект будет заключаться в том, что макет страницы изменится во время загрузки (пока загружаются изображения).


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

Числа в таблице указывают первую версию браузера, полностью поддерживающую атрибут.

Атрибут
ширина Да Да 16,0 Да Да

Синтаксис

Значения атрибутов

Значение Описание
пикселей Ширина в пикселях (например)

❮ Тег HTML


ВЫБОР ЦВЕТА



Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery 902 Top2 Reference 902 Top2 Reference

9003 902 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


ФОРУМ | О

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

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

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