Размер | htmlbook.ru

В HTML размеры элементов или расстояния между ними задаются в пикселах или процентах. Пиксел — это элементарная точка на экране монитора, является относительной единицей измерения, ее величина зависит от установленного экранного разрешения и размера монитора. Возьмем, к примеру, популярное разрешение монитора 1024х768 пикселов. Картинка с такими же размерами будет занимать всю область экрана. Увеличив разрешение монитора до 1280х1024, мы, тем самым, уменьшим размеры изображения на экране.

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

Пример 6.2. Размеры изображения в пикселах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Изображение</title>
 </head>
 <body>
  <p><img src="images/figure.
 
 jpg" alt="Винни-Пух в гостях у Кролика"
  hspace="4" vspace="4" border="2"></p>
 </body>
</html>

В данном примере рисунок имеет ширину 100 пикселов (width=»100″), высоту 111 пикселов (height=»111″), горизонтальный и вертикальный отступ по 4 пиксела (hspace и vspace) и толщину границы вокруг картинки 2 пиксела (border=»2″).

Процентная запись удачно дополняет пикселы, поскольку позволяет привязаться к размерам определенного элемента, к примеру, окна браузера. Так, если задать у картинки ширину 100%, то рисунок будет заполнять все свободное пространство окна по ширине. Браузер понимает, что речь идет о процентах, если после числа добавляется символ %, например:.

Размеры допустимо задавать только в целых числах. Это правило относится как к пикселам, так и процентам.

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

Пример 6.3. Размеры изображения в процентах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Изображение</title>
 </head>
 <body>
  <p><img src="images/figure.jpg" alt="Винни-Пух в гостях у Кролика"></p>
 </body>
</html>

В данном примере ширина картинки задана как 100%, при этом высота изображения явно не задается, поскольку она вычисляется автоматически. Вид страницы при таких размерах картинки показан на рис. 6.3.

Рис. 6.3. Изображение с шириной 100%

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

Как вы понимаете, ширина окна принимается за 100%, но ее легко превысить, причем ненароком. В частности, стоит только добавить в примере 6.3 к тегу <img> отступы по горизонтали (hspace=»10″) и ширина изображения станет 100%+20. Это в свою очередь приведет к появлению горизонтальной полосы прокрутки. Учитывайте этот нюанс при установке размеров элементов.

Размер | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+1.0+3.5+1.3+1.0+
1.0+		1.0+

Описание

Для задания размеров различных элементов, в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера.

Относительные единицы

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

Табл. 1. Относительные единицы измерения
ЕдиницаОписание
emРазмер шрифта текущего элемента
exВысота символа x
pxПиксел
%Процент

Единица em это изменяемое значение, которое зависит от размера шрифта текущего элемента (размер устанавливается через стилевое свойство font-size). В каждом браузере заложен размер текста, применяемый в том случае, когда этот размер явно не задан. Поэтому изначально 1em равен размеру шрифта, заданного в браузере по умолчанию или размеру шрифта родительского элемента. Процентная запись идентична em, в том смысле, что значения 1em и 100% равны.

Единица ex определяется как высота символа «x» в нижнем регистре. На ex распространяются те же правила, что и для em, а именно, он привязан к размеру шрифта, заданного в браузере по умолчанию, или к размеру шрифта родительского элемента.

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

Пример 1

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Относительные единицы</title>
  <style>
    h2 { font-size: 30px; }
    p { font-size: 1.5em; }
  </style>
 </head> 
 <body>
  <h2>Заголовок размером 30 пикселов</h2> 
  <p>Размер текста 1.5 em</p> 
 </body>
</html>
Абсолютные единицы

Абсолютные единицы применяются реже, чем относительные и обычно при работе с текстом. В табл. 2 перечислены основные абсолютные единицы.

Табл. 2. Абсолютные единицы измерения
ЕдиницаОписание
inДюйм (1 дюйм равен 2,54 см)
cmСантиметр
mmМиллиметр
ptПункт (1 пункт равен 1/72 дюйма)
pcПика (1 пика равна 12 пунктам)

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

Пример 2

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Абсолютные единицы</title>
  <style>
   h2 { font-size: 24pt; }
   p { margin-left: 30mm; }
  </style>
 </head> 
 <body>
   <h2>Заголовок размером 24 пункта</h2> 
   <p>Сдвиг текста вправо на 30 миллиметров</p> 
 </body>
</html>

Примечание

При установке размеров обязательно указывайте единицы измерения, например width: 30px. В противном случае браузер не сможет показать желаемый результат, поскольку не понимает, какой размер вам требуется. Единицы не добавляются только при нулевом значении (margin: 0).

Размер HTML Атрибут

❮ Предыдущий Все атрибуты HTML Далее ❯

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

Для элементов ввода атрибут size указывает видимую ширину в символах <ввод> элемент.

Для выбранных элементов атрибут размера указывает количество видимых опций в раскрывающемся списке.

Применяется к

Атрибут размера можно использовать для следующих элементов:

Элементы Атрибут
<ввод> размер
<выбрать> размер

Примеры

Пример ввода

Форма HTML с двумя полями ввода шириной 35 и 4 символов:

<форма action="/action_page.php">
  Электронная почта:

  PIN-код:


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

Пример выбора

Раскрывающийся список с тремя видимыми параметрами:

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

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

Атрибут размера имеет следующую поддержку браузера для каждого элемента:

Элемент
ввод 1,0 2,0 1,0 1,0 1,0
выбрать		 Да Да Да Да Да

❮ Предыдущий Все атрибуты HTML Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

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


Top3 Examples


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

ФОРУМ | О

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

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

HTML | Атрибут размера — GeeksforGeeks

Улучшить статью

Сохранить статью

  • Уровень сложности: Базовый
  • Последнее обновление: 09 Дек, 2021

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Атрибут size в HTML используется для указания начальной ширины поля ввода и количества видимых строк для элемента select.
    Атрибут размера можно использовать со следующими элементами: