Сброс CSS стилей Bootstrap Reboot
Существует множество вариантов сбросов стилей CSS. И также много о них написано. Я просто объясню почему я остановился на Bootstrap Reboot
Изначально у каждого браузера предустановлены свои стили для стандартных элементов, и перед началом верстки их необходимо привести к одинаковому отображению во всех браузерах.
Если стили не сбросить к единым, то потом при проверке в разных браузерах натолкнемся на неприятные моменты, когда, к примеру, отступы у одних и тех же элементов разные и верстка ломается, потом исправляем отображение, например, в Firefox - а она ломается в Chrome и так далее.
Первое преимущество в начальных стилях. Так выглядит страница после подключения одного из самых популярных CSS сбросов Normalize.css
А после подключения Bootstrap Reboot, не написав еще ни строчки CSS, сразу же получаем эстетически приятный вид
Самое важное преимущество Bootstrap Reboot в том, что по-умолчанию для всех элементов(включая псевдо-элементы) установлено свойство box-sizing
в значение border-box
*,
*::before,
*::after {
box-sizing: border-box;
}
Объясню на простом примере, что дает это свойство.
Например, нужно сверстать блок шириной 400px с текстом, рамкой 10px и внутренним отступом текста от рамки 25px
Создаем html
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, ut itaque illo laudantium possimus incidunt veritatis hic ab, magnam nesciunt natus est nisi iste voluptatem aperiam. Ut nesciunt, voluptates earum aliquid ad culpa assumenda eum nemo. Recusandae eos neque, commodi ducimus molestiae ea quis velit laudantium asperiores, delectus quam fuga, et tempora illo dicta quia nisi? Quos possimus at ducimus eum, odio earum reiciendis distinctio ad consequuntur architecto provident soluta, ratione sapiente ex perferendis quas. Aspernatur reprehenderit earum ex iste aliquid facere, veniam accusantium repellendus delectus, eum in doloribus explicabo suscipit itaque odio soluta praesentium ipsa, commodi esse saepe cupiditate!</div>
Задаем стили
.text {
padding: 25px;
width: 400px;
border: 10px solid #f7cb15;
}
Без свойства box-sizing: border-box;
получаем блок шириной большего размера(470px), чем была задана(400px).
Так как свойство box-sizing
по-умолчанию имеет значение content-box
заданная ширина применятся к контенту(а не к блоку), а потом к ширине контента 400px еще прибавляется padding
по 25px слева и справа и ширина рамки по 10px слева и справа и итоговая ширина блока становится 400px(ширина контента) + 50px(padding
слева и справа) + 20px(border
слева и справа) = 470px
Если же свойству box-sizing
поставить значение border-box
, то указанная ширина будет применена к блоку(а не к контенту) с учетом размеров padding
и border
В итоге мы контролируем внешние размеры блока независимо от установленных padding
и border
и на мой взгляд это логичней, и то что в Bootstrap Reboot по-умолчанию box-sizing: border-box;
установлен на все элементы это для меня большой плюс.
Написал отдельную статью - Почему размеры блока больше заданных.
В каждом проекте, которые верстаю с нуля, подключаю Bootstrap Reboot
Чтобы подключить Bootstrap Reboot, заходим на официальный сайт Bootstrap
Ищем кнопку Download
Под заголовком Compiled CSS and JS нажимаем на Download
В скачаном архиве заходим в папку css и находим файл bootstrap-reboot.min.css
Копируем его в папку проекта, где лежит основной файл стилей, у меня обычно это папка /css, где лежит основной файл main.css
Затем в HTML-файле, например, в index.html в блоке <head></head>
подключаем сначала bootstrap-reboot.min.css(этот файл всегда подключается первым) и только потом уже основной файл стилей, в моем случае это main.css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap-reboot.min.css"/>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
</body>
</html>
Подробности на официальном сайте - Bootstap Reboot