Значение CSS как математическое выражение

В любом случае, я могу написать значение css как математическое выражение? Пример:

div{
    height: 50% + 30px;
    width: 40em - 5px;
   }

Если есть, это было бы прекрасно.
PS: Я не хочу делать это с помощью JS или JQuery.

Ответы

Ответ 1

Это можно сделать с помощью css3 calc(). Напишите вот так:

div{
    width: 40%;
    width: -webkit-calc(40% - 5px);
    width: -moz-calc(40% - 5px);
    width: calc(40% - 5px);
    height:50%;
    height: -webkit-calc(50% + 50px);
    height: -moz-calc(50% + 50px);
    height: calc(50% + 50px);
    background: green;
    color: white;
    position:absolute;
}

Отметьте http://jsfiddle.net/3QUw6/

Проверьте это обсуждение для более Возможно ли сделать div 50px менее 100% в CSS3?

Ответ 2

Вы не можете сделать это с помощью CSS, но можете (и многое другое) с препроцессором CSS, например LESS, SASS или мой любимый Stylus. Конечным результатом является простой старый CSS, но он должен быть скомпилирован первым.

Ответ 3

Оба параметра padding и margin могут использоваться для добавления к размерам объектов. Я предлагаю вам ознакомиться с box model.

HTML:

<div id="container">
    <div class="wrapper">
        <div>...</div>
    </div>
</div>

CSS:

.wrapper { 
    width: 40em;
    height: 50%;
    padding: 15px 0; /* Top and bottom padding of 15px */ }

/* Block-level element will take up 100% of the 
  container width, minus {margin_right} + {marign_left} */
.wrapper > div { margin: 0 0 0 5px; }

Ответ 4

Посмотрите calc() в CSS. Надеемся, что поддержка этого увеличится в браузерах.