|
Post by Elli on Aug 16, 2019 12:29:58 GMT -7
Box Sizing Inheritance Base styles for box sizing inheritance. Uses the Box Sizing Mixin. CSS/** * Reset box-sizing on all elements * * `border-box` includes padding and border in the * calculations for total width, height values. This is * more predictable than the default `content-box`, which * does the opposite. * * 1. Apply `inherit` to all elements (global selector) * 2. Apply the same with a global selector for * pseudo-elements */
* { .box-sizing(inherit); } /* 1 */ *::before, *::after { .box-sizing(inherit); } /* 2 */
/** * 1. Now add `border-box` to `html`, which will cascade * down through all elements, but leaves box-sizing * easy to overwrite on a parent component * * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; .box-sizing(); } /* 1 */
|
|