Я просматриваю файлы CSS для многих веб-сайтов, таких как Facebook и Youtube.
В почти всех из них я вижу этот код:
* {
margin: 0;
padding: 0;
}
Нечетно, поскольку удаление этого блока в хром-инструментах веб-разработчика не влияет на макет страницы.
Что означает этот код, и когда он используется и почему?
Это общий метод, называемый CSS reset. В разных браузерах используются разные значения по умолчанию, что приводит к тому, что сайты выглядят по-разному. * означает "все элементы" (a универсальный селектор), поэтому мы устанавливаем для всех элементов нулевые поля и нулевое заполнение, что делает их одинаковыми во всех браузерах.
* является подстановочным знаком
Это означает, что эти стили применяются ко всем элементам.
В этом случае его установка margin и padding для всех элементов 0. Это характерно для файлов Reset CSS, чтобы по умолчанию использовать все собственные поля/дополнения браузера для разных элементов к общему значению.
Asterisk (*) является подстановочным знаком и означает все элементы.
* {
margin: 0;
}
устанавливает для поля всех элементов значение 0.
Сбрасывает маржу и заполнение всех элементов HTML на странице до 0.
Некоторые браузеры, возможно, уже делают это по умолчанию, но всегда полезно попробовать reset все вручную, на всякий случай.
Фактически, на многих веб-сайтах есть reset.css(или аналогичный), который при открытии вы увидите много правил для reset всего в каждом браузере.
Это подстановочный знак и устанавливает margin и padding в 0 для всех элементов HTML.
Попробуйте более интересный, например:
* {
font-size: 20pt;
}
Это общая часть общего css reset. Это в основном устанавливает всю маржу и добавление всех (*) элементов в 0. Затем вы можете добавлять свои собственные значения полей и заполнения для каждого элемента в соответствии с вашими требованиями.
В CSS есть некоторые стили по умолчанию, применяемые к каждой веб-странице в дополнение к вашим стилям. Эти стили по умолчанию определяют определенные значения padding и margin для таких элементов, как <h1>, <li>, <p>, <table> и т.д. Досадно, что вам часто приходится переопределять эти стили, чтобы ваша страница выглядела правильно, но не все производители браузеров соглашаются по умолчанию. Часто большинству разработчиков проще всего reset all padding и margins до zero, поэтому все ведет себя так, как ожидалось. * является селектором wildcard и будет соответствовать всем типам элементов. По существу, этот стиль говорит reset, что все дополнения/поля равны нулю для всех элементов, поэтому удаляются все стили по умолчанию.
* - это дикая карта, она выбирает все элементы
margin: 0; и padding: 0; установите для поля выбранных элементов значение margin и padding равным 0, которое в этом случае будет всем элементом.
Это очень удобно для веб-разработки, я использую его на каждом сайте, который я создаю.
Звездочка (*) - это универсальный селектор в CSS, используемый для вызова всех HTML-элементов. Рекомендуется использовать *{ margin:0} перед написанием CSS. Это сбросит поля всех HTML-элементов на ноль.
<style>
*{ margin:0}
</style>
Подробнее на https://tutorial.techaltum.com/cssselectors.html
https://tutorial.techaltum.com/cssselectors.html#universal-selector