Когда мы размещаем веб-страницу, мы часто сталкиваемся с ситуацией, когда ширина или высота конечной веб-страницы превышает наши предварительные расчеты. На самом деле это вызвано так называемой блочной моделью CSS.
| #test{margin:10px;padding:10px;width:100px;height:100px;} |
Как и в приведенном выше коде, мы много раз будем вычислять занимаемую им позицию как ширину: 120 пикселей, высоту: 120 пикселей, поскольку при обычном понимании отступы — это внутреннее поле, которое должно быть включено в ширину, а поле — это внешний край. расстояние, поэтому ширина = поле слева + поле справа + ширина, но интерпретация браузером блочной модели CSS не одинакова, поэтому в конце мы обнаружим, что ширина и высота выложенной веб-страницы превысят нашу ожидаемые вычисления и, в конечном итоге, вызвать смещение дисплея.
На самом деле это не так. Реальный расчет позиции, занимаемой тестом, должен выглядеть так: ширина = левое поле + правое поле + левое отступ + правое отступ + ширина, то есть должен быть реальный размер ширины. быть внутреннее поле + внешнее поле. + Сама ширина, то есть реальный размер теста должен составлять 140 пикселей. Расчет высоты аналогичен расчету ширины.
А если в тест добавляется граница, алгоритм ширины и высоты также должен добавить размер границы.
| #test{margin:10px;padding:10px;border:5px;width:100px;height:100px;} |
Ширина теста здесь должна равняться внешней границе + внутренней границе + границе + самой ширине, поэтому ширина теста равна 150 пикселей.
Как показано на рисунке ниже, фактическое положение, занимаемое шириной и высотой, не является самой маленькой областью, а должно доходить до самого внешнего темно-синего слоя.
