Вопрос Что делает этот код css ?
- Автор темы Blacker
- Дата начала
Задаёт для всех элементов на странице значение border-box для свойства box-sizing которое говорит о том, что padding и border входит в указанные размеры элементов а не прибавляется к ним. И здесь достаточно было бы просто использовать такой селектор: *, *::before, *::after {
box-sizing: border-box;
}
box-sizing: border-box;
}
разхмер. а что еще почитай про CSS
Представьте, что вам нужен блок размером 200 на 200 пикселей: Добро пожаловать на мой супер-мега-сайт! При этом у блока должна быть рамка толщиной в 3 пикселя.
А текст внутри блока должен иметь отступы от краев блока в 10 пикселей со всех сторон.
Вы пишете что-то вроде этого: .my-block {
width: 200px;
height: 200px;
border: 3px solid black;
padding: 10px;
} Открываете страничку - и видите блок размером 226 на 226 пикселей.
Почему так? Вы же просили 200 на 200.
А потому что по умолчанию width и height - это размеры контента внутри блока.
К этим размерам прибавляются два паддинга и две рамки.
Так что вместо 200 имеем 200 + 10 + 10 + 3 + 3 = 226 пикселей.
Можно было бы, конечно, вычесть эту разницу из размеров и задать их равными 174, но это неудобно. Что, если потом мы изменим паддинг или толщину рамки? Снова пересчитывать размеры.
Гораздо лучше задать размеры не контента блока, а всего блока целиком, включая отступы и рамки. Для этого мы задаем box-sizing: border-box.
И всё! Теперь блок имеет размеры 200 на 200 с учетом отступов и рамок, как мы и хотели.
А текст внутри блока должен иметь отступы от краев блока в 10 пикселей со всех сторон.
Вы пишете что-то вроде этого: .my-block {
width: 200px;
height: 200px;
border: 3px solid black;
padding: 10px;
} Открываете страничку - и видите блок размером 226 на 226 пикселей.
Почему так? Вы же просили 200 на 200.
А потому что по умолчанию width и height - это размеры контента внутри блока.
К этим размерам прибавляются два паддинга и две рамки.
Так что вместо 200 имеем 200 + 10 + 10 + 3 + 3 = 226 пикселей.
Можно было бы, конечно, вычесть эту разницу из размеров и задать их равными 174, но это неудобно. Что, если потом мы изменим паддинг или толщину рамки? Снова пересчитывать размеры.
Гораздо лучше задать размеры не контента блока, а всего блока целиком, включая отступы и рамки. Для этого мы задаем box-sizing: border-box.
И всё! Теперь блок имеет размеры 200 на 200 с учетом отступов и рамок, как мы и хотели.