Как добавить "box-sizing: border-box" в файл Normalize.css?

Question

Я постоянно использую размеры коробки: border-box; на всех элементах при создании CSS-файлов, т.е.

* {
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

Однако я не могу заставить его работать с файлом Normalize.css ( https://github.com/necolas/normalize.css).

Я попытался добавить приведенный выше код в начало моего собственного CSS-файла, в рамках самой нормализации, но безуспешно

Я бы очень хотел использовать normalize.css, так как он не такой радикальный, как некоторые другие файлы сброса CSS, но как мне сделать так, чтобы он принимал box-sizing: border-box; так что это влияет на все элементы и является кросс-браузер дружественным

Answer 1

Наилучший способ работы с размерами коробок, который я видел до сих пор:

html {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

    *,
    *::before,
    *::after {
        -webkit-box-sizing: inherit;
           -moz-box-sizing: inherit;
                box-sizing: inherit;
    }

Если ваш CSS сброс (normalize.css) вставлен в самый верх вашей таблицы стилей, с этим правилом сразу после нормализации, все должно работать как положено.

Приведенное выше правило позволяет легче контролировать настройки box-sizing: content-box для таких вещей, как сторонние виджеты.

Для получения дополнительной информации об этом методе я рекомендую: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ или http://www.paulirish.com/2012 / коробчатая проклейка-граница-бокс-FTW /

Answer 2

Я создал Initialize.css, коллекцию лучших практик, таких как нормализация, шаблон HTML5 и трюк с изменением размеров. Он настраивается с помощью SASS или LESS (также есть версия CSS). Вы не начинаете с перезаписи CSS, и это здорово!:-)

http://jeroenoomsnl.github.io/initialize-css/

Answer 3

Вам действительно нужен этот сброс CSS?

Я обычно использую это в начале каждого файла CSS:

* {
   border: 0;
   margin: 0;
   padding: 0;
   outline: 0;
}

Попробуйте это.