Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

Единицы измерения в HTML

Единицы измерения в языке HTML

Единицы измерения HTML
Описание единиц измерений в языке HTML.

В языке разметки HTML, существует два вида единиц измерений, это пиксели px и % проценты.

Примеры использования:
height="100px" — высота элемента 100 пикселей,
width="50%" — ширина элемента 50 процентов.

Экран монитора состоит из мельчайших точек, называемых пикселями. Современные мониторы (ноутбуков и компютеров) имеют чаще всего размер экрана (разрешение экрана) величиной в 1366x768, которое означает, что ширина экрана составляет 1366 пикселей, а его высота 768 пикселей.

Относительный и абсолютный размеры

Пиксели — это абсолютный размер,
Проценты — это относительный размер.

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

Допустим разрешение вашего экрана составляет 1366x768, вы создали друг под другом, две таблицы и назначили первой таблице, ширину в 1366px (пикселей):

<table width="1366px">

а второй таблице, ширину в 100% (процентов):

<table width="100%">

Обе таблицы, займут всю ширину экрана. В пикселях, ширина обеих таблиц будет равна 1366px

Если вы посмотрите на эти таблицы через экран другого монитора, чья ширина например составляет 1280 пикселей, то первая таблица выйдет за пределы экрана, поскольку её ширина больше и составляет 1366 пикселей. Вторая таблица у которой ширина 100 процентов не выйдет за пределы экрана, она опять займёт всю ширину, но теперь её ширина будет равна 1280 пикселям.

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

Читать далее: Специальные символы в HTML

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: Статья
Статья создана: 16 Окт 2014
Статья обновлена: 5 Фев 2016

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

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

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget