Где инструменты для обработки хрома показывают реальную расчетную ширину элемента

Question

Я читал где-то в Интернете по модели коробки, и он говорит, что real width элемента блока не является его шириной, как определено в CSS, но рассчитывается в соответствии с к приведенной ниже формуле:

Реальная ширина = Запас правый + границы верно обивка правый + ширина + обивка-левый + пограничный левый + маржа налево

Так что это Real Width, что мы говорим о - это также значение, которое вычисляется браузером и показано как свойство css, которое можно проверить - или это только термин, который веб-дизайнеры используют для планирования своих макетов соответственно.

Например, я создал div и задал его ширину, равную 300px, установил ее маржу и отступы на 10px. Могу ли я перейти к инструментам разработчика Chrome и найти это Real width, чтобы быть 340px ??

Answer 1

При установке ширины или высоты в CSS, скажем, элемент сНа или р, по умолчанию они устанавливают ширину/высоту содержимого внутри элемента. Поэтому вы должны помнить о том, чтобы мысленно добавить наложение, толщину границы и маржу, чтобы увидеть, как далеко будет расширяться ящик.

Но есть альтернативный способ работы, потому что CSS имеет свойство выбора размера окна. Если вы установили:

div { 
    box-sizing: border-box; 
} 

в CSS, теперь любой дивы (или любой другой элемент или селекторы вы укажете) будет включать в себя заполнение и граница по ширине и высоте дивы. Это может быть более простой способ работы, особенно на очень сложных страницах с большим количеством материала на них.

Обратите внимание, что он по-прежнему не включает поля в ширину и высоту окна, но вы все равно не захотите этого, так как край не является частью самого окна, просто разделитель между полем и другие вещи.

Свойство выбора размера окна работает во всех основных версиях браузера, а также в IE с версии 8.

В Chrome и большинстве других браузеров, если вы нажмете клавишу F12, она разделит окно на две части и покажет инструмент разработчика. Нажмите на значок поиска в левом верхнем углу окна окна, затем щелкните на любой части страницы веб-сайта в другой половине экрана и отобразите все настройки CSS для элемента, на который вы нажали. Вы также увидите набор вложенных цветных прямоугольников, которые показывают в диаграмме все размеры ширины, заполнения, границы и размера.

Answer 2

Firsts перейти разработчик консоль

затем стиле нажмите

затем нажмите вычислены

Answer 3

Во-первых, вам нужно очистить о поле и отступы ..

маржи не включен в ширину, потому что он не меняет размер любого элемента. так, если вы создаете элемент с 300px шириной и установить поля и отступы в 10px , то он будет

 300px Width + 10px leftmargin +10px right margin = 320px