Размер шрифта в CSS. Единицы измерения px, %, em

Влад Мержевич

Любой блочный элемент состоит из набора свойств, подобно капустным листам накладываемых друг на друга. Основой блока выступает его контент (это может быть текст, изображение и др.), ширина которого задаётся свойством width , а высота через height ; вокруг контента идут поля (padding ), они создают пустое пространство от контента до внутреннего края границ; затем идут собственно сами границы (border ) и завершают блок отступы (margin ), невидимое пустое пространство от внешнего края границ. Ширина блока это комплексная величина и складывается из нескольких значений свойств:

• width - ширина контента, т.е. содержимого блока;
• padding-left и padding-right - поле слева и справа от контента;
• border-left и border-right - толщина границы слева и справа;
• margin-left и margin-right - отступ слева и справа.

Какие-то свойства могут отсутствовать и в этом случае на ширину не оказывают влияние. Общая ширина показана на рис. 1 в виде чёрной пунктирной линии.

Рис. 1. Ширина блока

Если значение width не задано, то оно по умолчанию устанавливается как auto . В этом случае ширина блока будет занимать всю доступную ширину при сохранении значений полей, границ и отступов. Под доступной шириной в данном случае подразумевается ширина контента у родительского блока, а если родителя нет, то ширина контента браузера.

Допустим, для слоя написан следующий стиль.

Width: 300px; /* Ширина слоя */ margin: 7px; /* Значение отступов */ border: 4px solid black; /* Параметры границы */ padding: 10px; /* Поля вокруг текста */

Ширина слоя согласно этой записи будет равна 342 пиксела, эта величина получается складыванием значения ширины контента плюс отступ слева, граница слева и поле слева, плюс поле справа, граница справа и отступ справа. Суммируем все числа.

Ширина = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342

Надо отметить, что блочная модель с формированием ширины несет в себе кучу неудобств. Постоянно приходится заниматься вычислениями, когда требуется задать определенную ширину блока. Также начинаются проблемы при сочетании разных единиц измерения, в частности, процентов и пикселов. Предположим, что ширина контента задана как 90%, если сюда приплюсовать поля и границы, заданные в пикселах, то нельзя вычислить суммарную ширину блока, поскольку проценты напрямую в пикселы не переводятся. В итоге может получиться так, что общая ширина блока превысит ширину веб-страницы, что приведет к появлению горизонтальной полосы прокрутки. Выходов из подобной ситуации два - поменять алгоритм блочной модели и воспользоваться вложенными слоями.

Алгоритм блочной модели

Как уже упоминалось, ширина блока формируется из ширины контента и значений полей, границ и отступов. В браузере Internet Explorer в алгоритм меняется автоматически и ширина всего блока устанавливается равной width . Остальные браузеры так просто не меняют алгоритм, к тому же вы знаете, что режим совместимости это зло. В CSS3 есть замечательное свойство box-sizing , которое нам и пригодится. При значении border-box ширина начинает включать поля и границы, но не отступы. Таким образом, подключая box-sizing со значением border-box к своему стилю, мы можем задавать ширину в процентах и спокойно указывать border и padding , не боясь, что изменится ширина блока. К сожалению, с этим свойством связана небольшая проблема, как обычно относящаяся к браузерам - не все браузеры его понимают. Радует, что браузеры хотя бы поддерживают специфические для каждого браузера свойства. В табл. 1 приведена поддержка браузерами.

Как видно из таблицы, в свойствах разброд и шатание, поэтому придется делать гибрид и указывать все три свойства (пример 1).

Пример 1. Ширина блока

HTML5 CSS3 IE Cr Op Sa Fx

Данный пример будет работать во всех браузерах, указанных в табл. 1, однако невалиден в CSS3 из-за применения нестандартных свойств начинающихся на -moz и -webkit. Ширина блока составляет 100% с учетом значений padding . Без свойства box-sizing в браузере появится горизонтальная полоса прокрутки.

Вложенные слои

Использование свойства box-sizing всем хорошо, кроме того, что не работает в старых версиях IE. Если вы верстаете сайт с учетом IE7 и IE6, вам подойдет старый проверенный метод с вложением слоев. Идея простая - для внешнего блочного элемента задаётся только необходимая ширина, а для вложенного блока всё остальное - поля, границы и отступы. Поскольку по умолчанию ширина блока равна доступной ширине родителя, получится, что блоки в каком-то смысле накладываются друг на друга, при этом фактическая ширина такого комбинированного элемента будет чётко задана. В примере 2 показано использование вложенных слоев.

Пример 2. Вложенные слои

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Ширина блока в процентах

Преимуществом вложенных слоев является использование отступов (box-sizing их не учитывает), универсальность метода, также то, что фон по желанию можно добавлять к одному или другому слою. Тем самым несколько меняется внешний вид элементов, это особенно актуально при включении фоновых рисунков. Из недостатков метода можно отметить включение дополнительного блока, который усложняет структуру кода, особенно при частом применении метода. Но это можно считать мелочью по сравнению с преимуществами.

По умолчанию для блочных элементов используется автоширина. Это означает, что элемент будет растянут по горизонтали ровно на столько, сколько есть свободного места. Высота блочных элементов по умолчанию устанавливается автоматически, т.е. браузер растягивает область содержимого в вертикальном направлении так, чтобы отобразилось все содержимое. Чтобы установить собственные размеры для области содержимого элемента, вы можете использовать свойства width и height .

CSS свойство width позволяет задать ширину области содержимого элемента, а свойство height высоту области содержимого:

Обратите внимание, что свойства width и height определяют размер только области содержимого, чтобы вычислить общую ширину блочного элемента, нужно сложить ширину области содержимого, левого и правого внутренних отступов и ширину левой и правой рамки. То же самое касается и общей высоты элемента, только все значения вычисляются по вертикали:

Для данного абзаца зададим только ширину и высоту.

Этот абзац содержит, кроме ширины и высоты, внутренний отступ, рамку и внешний отступ.

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

то есть 180x130 пикселей.

Переполнение элементов

После того как вы определили для элемента ширину и высоту, стоит обратить внимание на один немаловажный момент - содержимое, расположенное внутри элемента, может превысить указанный размер блока. В этом случае часть содержимого будет выходить за границы элемента, чтобы избежать этого неприятного момента, можно воспользоваться CSS свойством overflow . Свойство overflow сообщает браузеру, как нужно поступить в том случае, если содержимое блока превышает его размер. Это свойство может принимать одно из четырех значений:

• visible - значение, используемое браузером по умолчанию. Указание этого значения будет иметь тот же эффект, что и отсутствие установки свойства overflow.
• scroll - добавляет к элементу полосы прокрутки по вертикали и горизонтали.
• auto - добавляет полосы прокрутки при необходимости.
• hidden - скрывает часть содержимого, которое выходит за границы блочного элемента.

Здравствуйте, уважаемые читатели! Сегодня мы рассмотрим как задавать размеры блочных элементов веб страницы с помощью css свойств и настроить отображение контента в случае если он не помещается в элементе.

width и height — ширина и высота элементов в css

С помощью атрибутов стиля width и height можно задавать соответственно ширину и высоту блочных элементов:

width: auto|<ширина>|inherit
height: auto|<ширина>|inherit

В качестве значений можно использовать любые доступные в css единицы измерения - например, пикселы (px), дюймы (in), пункты (pt) и др.:

p {width:200px; height:150px}

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

div {width:40%;}

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

Рассмотрим несколько примеров.

Результат:

В этом примере мы создали блок div и вложили в него абзац p с текстом. Для div-а мы строго задали размеры 300 на 300 пикселей. У элемента p значения свойств width и height равны auto, поэтому как видно на скриншоте, его ширина установилась равной ширине родительского элемента, а высота стала такой, чтобы в нем поместился весь содержащийся в абзаце текст.

Теперь изменим css настройки для абзаца p и зададим фиксированные размеры:

Layer2 {
background: #eee;
width:250px;
}

Результат:

Как видим ширина абзаца стала уже и равна 250 пикселей, а его высота увеличилась так, чтобы уместился текст, так как параметр height остался равным auto.

Теперь давайте зададим высоту и ширину абзаца в процентах:

Layer2 {
background: #eee;
width:50%;
height:50%;
}

Результат:

Как видно на картинке, ширина элемента p стала равна половине ширины элемента div. А высота увеличилась и стала равна 75 процентам высоты div.

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

Определить минимальную ширину и высоту можно с помощью атрибутов min-width и min-heigh:

min-width: <ширина>
min-height: <высота>

Аналогичные атрибуты стиля max-width и max-height позволяют задать максимальные размеры:

max-width: <ширина>
max-height: <высота>

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

Стоит уточнить, что задание параметров height и width имеет смысл только для блочных тегов , так как для строчных элементов эти параметры браузером не обрабатываются.

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

Например, уменьшим размеры абзаца p из выше рассмотренных примеров до 100 пикселей:

Layer2 {
background: #eee;
width:100px;
height:100px;
}

Результат:

Как видно, текст вышел за границы абзаца и выглядит это не очень красиво. Для избежания подобных ситуаций существует правило css — overflow.

Параметр переполнения overflow для скрытия (hidden, visible) или прокрутки (scroll, auto) контента

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

Текст первого абзаца

Текст второго абзаца

Результат:

Так как ни ширина ни высота для абзацев не заданы, то браузер самостоятельно рассчитывает их исходя из своего собственного понимания значения auto. В результате абзацы по ширине заняли все доступное пространство, а по высоте в соответствии с содержащимся в них контентом.

Теперь у первого абзаца ограничим ширину:

Текст первого абзаца

Текст второго абзаца

Результат:

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

Ну а теперь ограничим у первого абзаца и высоту:

Текст первого абзаца

Текст второго абзаца

В результате получилось, что текст в такой ограниченный абзац не влазит и поэтому он наехал на область нижнего соседа. Соответственно прочитать текст ни в первом ни во втором абзацах практически не возможно. Именно для управления поведением контента в таких ситуациях существует правило overflow :

overflow: visible|hidden|scroll|auto|inherit

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

Правило скрывает все, что не помещается в контейнере:

Значение scroll отобразит в элементе по вертикали и горизонтали полосы прокрутки даже в том случае, если все содержимое умещается:

Текст первого абзаца

Текст второго абзаца

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

Текст первого абзаца

Текст второго абзаца

Результат:

Для настройки полос прокрутки можно также использовать атрибуты стиля overflow-x и overflow-y, которые позволяют настраивать отображение прокрутки по отдельным осям. Таким образом отвечает за горизонтальную ось , а за вертикальную ось .

Поэтому если вам, например, нужно чтобы в абзаце горизонтальная прокрутка не появлялась никогда, а вертикальная появлялась только по необходимости, то достаточно написать следующее правило css:

p{overflow-x:hidden;overflow-y:auto;}

И задача будет решена.

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

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

Высота и ширина блока в CSS.

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

Высота блока в CSS задается при помощи команды height: auto|<высота в единицах измерения>|inherit и как вы уже поняли мы можем задать высоту блока при помощи команды auto мы даем команду браузеру что он сам может определить размер блока и таким образом блок будет такого размера чтобы поместить все элементы и не больше.

Команда inherit позволит вам заимствовать параметры у родительского элемента и эти значения будут видны только если заданы параметры для родительского элемента. Но чаще всего нужно задавать размер блока конкретно, просто указать размер в одной из принятых величин(чаще всего это пиксели).

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

Эта команда дает понять браузеру что для конкретного элемента на странице нужно задать размер в десять процентов от размера родительского блока.

Ширина блока в CSS задается при помощи параметра width: auto|<ширина>|inherit все параметры аналогичны как для высоты так и для ширины блока и я думаю что снова повторяться не стоит. Хочу только сказать что не обязательно задавать конкретно как высоту так и ширину блока, можно задать например ширину а высота будет увеличиваться в зависимости от содержимого и что очень удобно если вы не знаете какой контент будет на конкретной странице.

Минимальная и максимальная ширина блока.

Также для каждого блока мы можем задать не конкретные параметры а минимальный и максимальный параметр для любого блока на сайте. Благодаря этому можно наполнять блоки без страха того что они выйдут за приделы окна браузера.

Задать это очень просто нам нужно прописать для задания минимальной ширины и высоты следующие параметры:

min-width: <ширина>

min-height: <высота>

А для максимальной нужны два параметра:

max-width: <ширина>
max-height: <высота>

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

Параметры размещения float в css.

В всех предыдущих примерах где мы создавали контейнеры и элементы размещаются друг за другом по порядку но нам для создания дизайна этого не достаточно, нам нужна возможность для того чтобы размещать элементы на свое усмотрение и в этом нам поможет свойство float в css и сейчас мы разберем применение данного свойства на практике.

Параметр float может принимать несколько значений и сейчас мы разберемся какие это параметры:

float: left|right|none|inherit

Теперь давайте разберемся с каждым примером отдельно.

Команда float: left означает то, что блок должен выравниваться по левому краю а все остальные элементы будут его обтекать по правому краю.

float:right это полная противоположность предыдущей команде и соответственно блок будет выравниваться по правому краю а все элементы будут обтекать его слева.

float:none стандартное поведение для каждого блока, размещение блоков одно за другим. Использование этого параметра сейчас не актуально и его применяют очень редко и скорее просто по неграмотности.

Параметр clear в css.

Очень часто при создании дизайна на блоках при помощи команды float нужно некоторым блокам дать команду для того чтобы они не обтекали блок а вели себя как обычно, размещаясь ниже всех остальных. Такая проблема раньше решалась при помощи команды float:none к нужному блоку но отображение в каждом браузере может быть разным и поэтому в таких случаях намного рациональнее применять команду clear и сейчас мы посмотрим как это можно сделать.

clear: left|right|both|none|inherit

Команда имеет четыре параметра и сейчас конкретно с каждым мы разберемся что за функции он выполняет.

clear: left команда означает что элемент размещается ниже все элементов с параметром float: left.

clear:right команда размещает блок ниже всех элементов с параметром float: right.

clear:both параметр размещает элемент ниже всех блоков с параметром как float: left так и float: right.

clear:none обычное поведение для блока. Задавать параметр не следует если до этого были размещены плавающие контейнеры.

Применяем все знания на практике.

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

Как мы видим для каркаса нам понадобится создать четыре блока DIV и к ним нам нужно будет применить как параметры размера так и параметры размещения.

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

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

Header{width:500px; ширина блока
height:100px; высота блока
background-color:#33CCFF;} цвет блока

Content{width:400px; ширина блока
height:400px; высота блока
background-color: #33FF33; цвет блока
float: left;} позиция блока

Sidebar{width:100px; ширина блока
height:400px; высота блока
background-color: #CCCCCC; цвет блока
float:left;} позиция блока

Footer{width:500px; ширина блока
height:100px; высота блока
background-color: #0000FF; цвет блока
clear:both;} стандартная позиция блока

И после того как мы пропишем все эти команды то мы получим вот такой каркас для сайта.