Введение в функцию CSS3 Calc()

Введение в функцию CSS3 Calc()

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

скачать исходники

Применение функции Calc()

Как уже упоминалось, можно употреблять calc() для определения таких величин, как width, height, margin, padding, font-size, и т.д. Для измерения можно использовать математические действия: сложение, вычитание, деление и умножение.

Например, предположим, что у нас внутри обертки имеется три <div>, как показано внизу.

<div class="col one">A</div>
<div class="col two">B</div>
<div class="col three">C</div>

При помощи функции calc() можно легко определить эти div в колонки с равной шириной следующим образом.

.wrapper .col {  
    width: calc(100% / 3);  
    padding: 0 10px;  
}

Следующая математическая операция calc(100% / 3); делит 100% родительской ширины на три, и вот как все это смотрится в браузерах. У трех div получается одинаковая ширина.

Кроме того, Курт Мейн (Kurt Maine) доказал, насколько на самом деле функция calc() удобна для создания адаптивной разметки.

Обратите внимание на следующее

При употреблении функции calc() стоит обратить внимание на некоторые вещи.

Во-первых, подсчет проводится слева направо.

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

В настоящее время calc() не поддерживается в Opera.

Для ранних версий Firefox и Chrome понадобятся префиксы -moz- и-webkit-.

Для операций можно применять различные единицы, например calc(50% – 10px)

Знаки + и – нужно разделять пробелами, например calc(100% -5px) вернет invalid, так как интерпретируется как процент, за которым следует отрицательное значение. Но пробелы не нужны для знаков * и /.

Последнее размышление

Прежде в CSS3 и препроцессоре CSS мы были ограничены фиксированным типом величины. Сегодня с помощью calc() можно более разумно установить величину, а побольше узнать об этой функции можно из нижеприведенных ссылок.

Автор: Thoriq Firdaus

Источник: http://www.hongkiat.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree