Функція calc () в css3.

Відео: Learn How To Use CSS3 calc () Function In Hindi / Urdu

Відео: Tech Talk: How to use the CSS Calc Function

Всім привіт! Сьогодні ми поговоримо про функцію calc (), яка з`явилася в CSS3.

Варто відразу сказати, що підтримує цю функцію з IE9.

використовується функція calc (), як зрозуміло з її назви, для обчислень.

Синтаксис цієї функції такий:

Відео: CSS3 linear-gradient background tutorial HTML5 Linear Gradient Parameters

property: calc(expression) -

У вираженні ви можете використовувати будь-які елементарні математичні оператори

Відео: Kurs CSS3

+ - складання
- - віднімання
* - множення
/ - поділ

Розглянемо конкретний приклад

class="Alert"gt;This is an alert! Be accurate!

Тепер додамо трохи стилів

.alert { 
 width:100% - 
 width: calc(100%-100px) - 
 margin:0auto- 
 background: tomato- 
 color:# fff- 
 padding:20px- 
 box-sizing: border-box- 
}

Таким чином ми отримаємо блок, який вирівнюються по центру, а по його боках буде по 50px відступів, але, головне, що все це справа буде обчислюватися автоматично в залежності від ширини браузера. Спробуйте поізменять розмір свого браузера, щоб переконатися в цьому.

А у мене на цьому все! Дякую за увагу і удачі!

Поділися в соціальних мережах:

Схожі