—»     —»   Знакомство с CSS3-функцией calc()
  Раздел: CSS/Style Sheets   Комментариев: 2  

Знакомство с CSS3-функцией calc()



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

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

Как уже было отмечено выше, мы можем использовать calc() для определения длины: ширины и высоты, поля, отступов, размера шрифта и так далее. Для вычисления можно использовать математические выражения: сложение, вычитание, разделение и умножение.

Например, давайте предположим, что у нас есть три 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);
}

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

Знакомство с CSS3-функцией calc()

Чтобы увидеть все в действии, перейдите по ссылке приведенной ниже.

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.


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

Что следует отметить

При использовании функции calc() нам следует обращать внимание на следующее:

* Вычисление производится слева направо
* Разделение и умножение производится первым, а также можно использовать круглые скобки.
* calc() на данный момент не поддерживается в Opera.
* Приставки -moz- и -webkit- необходимы для корректной работы в ранних версиях Firefox и Chrome.
* Мы можем использовать различные единицы для операции, к примеру, calc(50% – 10px).
* Знаки + и – следует разделять пробелом. Например, calc(100% -5px) окажется некорректным, так как это лишь указание процентного соотношения с последующим отрицательным значением. Но следует обратить внимание на то, что пробелы не нужны при использовании знаков «*» и «/».

Завершение

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

* calc() документация – W3.org
* CSS3 Gems, функция calc() – Site Point
* Совместимость браузеров с функцией calc() – caniuse.com

Пробовали ли вы уже использовать эту функцию на собственных сайтах?
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 6679   |   Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 18 марта 2013 @ 13:09
Написал: mrnobody — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Вот вы указали свойство padding: 0 10px; — блоки съедут. Либо нужно его удалить (padding), либо добавить box-sizing: border-box;
Комментарий #2: 18 марта 2013 @ 13:23
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
mrnobody, все верно, ваша правда. Его не должно быть. Исправлено.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Виллы бали
Аренда и продажа вилл
domnabali.com
Флешки с логотипом
флешки с логотипом
logoflesh.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930