Box Sizing в CSS
Ширину и высоту элемента можно рассчитать двумя способами, учитывая отступы и рамки или не учитывая их, и свойство CSS box-sizing выбирает, какой из них применяется.
Если его не задавать, браузер не включает их в указанное вами значение и добавляет потом:
- фактическая ширина = width + padding + border
- фактическая высота = height + padding + border
Таким образом, отступы и рамка добавляются поверх заданного вами размера, и элемент часто выглядит больше, чем вы ожидали. box-sizing решает эту проблему.
Пример
Оба элемента <div> запрашивают одинаковые ширину и высоту, но отображаются в разных размерах: только у второго есть дополнительный отступ, который его увеличивает.
Output: complete HTML page "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Without Box Sizing</title>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<h2>Without box-sizing</h2>
<div class="div1">This div has width: 300px and height: 100px.</div>
<br>
<div class="div2">This div also has width: 300px and height: 100px.</div>
<p>The two divs above end up with different sizes, because div2 has padding that is added to the specified width and height.</p>
</body>
</html>
Решение box-sizing в CSS
С помощью box-sizing отступы и рамка могут стать частью объявленных вами общих ширины и высоты. Это делает значение box-sizing: border-box;, которое оставляет их внутри расчёта.
Результат настолько лучше, что многие разработчики хотели бы применять его к каждому элементу на своих страницах. Браузеры уже применяют box-sizing: border-box; ко многим элементам форм, хотя и не ко всем, поэтому поля ввода и текстовые области могут отличаться при width: 100%;.
Задавать box-sizing: border-box; для всех элементов и безопасно, и разумно.
Пример
Добавьте box-sizing: border-box; к этим двум элементам <div>, и теперь они отображаются в одинаковом размере.
Output: complete HTML page "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>With Box Sizing</title>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<h2>With box-sizing: border-box</h2>
<div class="div1">Both divs are the same size now!</div>
<br>
<div class="div2">Hooray!</div>
<p>Both divs appear the same size because box-sizing: border-box includes padding and border in the total width and height.</p>
</body>
</html>
Универсальный box-sizing
Чтобы охватить всю страницу, задайте box-sizing: border-box; для универсального селектора *.
Output: complete HTML page "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Universal Box Sizing</title>
<style>
* {
box-sizing: border-box;
}
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<h2>Universal box-sizing</h2>
<div class="div1">This div has width: 300px and height: 100px.</div>
<br>
<div class="div2">This div also has width: 300px and height: 100px.</div>
<p>With the universal selector (*) set to box-sizing: border-box, all elements include padding and border in their total width and height.</p>
</body>
</html>