Чему равна высота и ширина элемента .content в следующем коде?

Question

[kachman630]

Чему равна высота элемента .content в следующем коде

.content {
box-sizing: content-box;
height: 200px;
max-height: 150px;
padding: 50px;
border: 5px solid #000000;
}
Чему равна ширина элемента .content в следующем коде

.content {
box-sizing: border-box;
min-width: 200px;
width: 100px;
padding: 10px;
Не понимаю ,как тут произвети расчет. Обьясните пожалуйста.

Comments

[Ankhena]

Самый простой способ, если лениво читать теорию, открыть всё это дело в браузере и посмотреть. Будет 200х150.

Как думать:
1. Узнать что там с box-sizing будет в итоге. Которое из значений останется.
2. Аналогично разбираете про border и padding. Которые из значений применятся по каскаду.
3. Понять влияют ли они на размеры исходя из результатов п.1
4. Посмотреть какие свойства влияют на высоту: тут высота и максимальная высота. Выяснить кто победит, учитывая, что значения с виду противоречат другу другу. Не забыть про результат п3.
5. Аналогично с шириной.