box-sizing: padding-box
Почему поддерживается только в FF и потенциально может быть удалено из спецификации?
Кому мешает? Пусть возможно бесполезно (а может и нет), но для полноты картины реализует последнее из возможных сочетаний для получения ширины блока из width, padding и border. <!--чтобы добавить красок--> <style> div { padding: 10px; height: 50px; } .parent { border: solid 5px red; } .child { border: solid 5px green; } </style> <button>content-box</button> <button>padding-box</button> <button>border-box</button> <div class="parent"> <div class="child"></div> </div> <script> (function () { var child = document.querySelector(".child"); document.addEventListener("click", function (event) { var target = event.target; if (target.tagName == "BUTTON") { child.style.boxSizing = target.innerHTML; } }); })(); </script> |
Цитата:
А не реализуют потому что не очень то и нужно. Мне вот ни разу это не пригодилось.. |
Мне в скриптах-на-коленке пригождалось. Оч. удобно не париться о бордерах и паддингах и получать\изменять простосто width\height.
В продакшн понятное дело не проблема всё предусмотреть, но по-быстрому накидать - удобно. |
Цитата:
Цитата:
Цитата:
|
извиняюс. я вижу это дело впервые. есть ли рельные кейсы для него?
|
Цитата:
не знаю, разве что упростить расчёт, так как этом случае width/height == clientWidth/clientHeight для box-sizing: border-box; это простота расчёта без выезжаний и создания дополнительных блоков например, как в учебнике, для распахивания элемента на всю внутреннюю ширину/высоту родителя http://learn.javascript.ru/box-sizing здесь про меню, в котором происходит смещение блока, а также в комментах отмечено про возможность использовать не только пиксели для задания величин и не повредить расчёт http://habrahabr.ru/post/149441/ про другие применения сам бы послушал |
Часовой пояс GMT +3, время: 07:37. |