Урок 9. Курс по CSS3. Функция calc() и свойство box-sizing

От автора: вы, скорее всего, знаете, что полная ширина блока в css складывается из ширины блока (width), внутренних отступов (padding) и рамки (border). При верстке не всегда удобно держать в голове и вычислять значение ширины, которое нужно указать с учетом отступов и border.

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

Все уроки курса:

Метки: Курс по CSS3