Что делает этот код CSS ?

Question

Что делает этот код CSS ?

Челик) Ученик (57), на голосовании 8 месяцев назад

 html { 
    box-sizing: border-box; 
} 
*, *::before, *::after { 
    box-sizing: inherit; 
}

Вот что этот код делает в CSS? И что еще кроме этого можно добавить?

Answer 1

Дмитрий Узбеков Знаток (400) 9 месяцев назад

даже я не знаю

Answer 2

nonme Мудрец (15575) 9 месяцев назад

разхмер. а что еще почитай про CSS

Answer 3

Задаёт для всех элементов на странице значение border-box для свойства box-sizing которое говорит о том, что padding и border входит в указанные размеры элементов а не прибавляется к ним. И здесь достаточно было бы просто использовать такой селектор:

 *, *::before, *::after { 
box-sizing: border-box;
}

Answer 4

Semen Kapacuk Гуру (3750) 9 месяцев назад

Настраивает боксовую модель. Это отдельная большая тема, почитай статьи

Челик)Ученик (57) 9 месяцев назад

можно ссылку на статью?

Semen Kapacuk Гуру (3750) Челик), можно, в гугле вводи "боксовая модель" или "box model" и нажимай понравившуюся ссылку

Answer 5

Представьте, что вам нужен блок размером 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 с учетом отступов и рамок, как мы и хотели.