Раньше я сталкивался с различными странными ошибками при изучении начальной загрузки. Если я выполняю свою подготовительную работу перед изучением начальной загрузки, я могу избежать некоторых ловушек в большей или меньшей степени. Ниже редактор познакомит вас со знанием атрибута пограничной коробки.
В собственном файле CSS от Boostrap: boostrap.css есть кусок кода:
* {-webkit-box-size: border-box; -Моз-ролика с размером: пограничная коробка; Распределение коробки: пограничная коробка; }Это означает, что при написании кода это свойство будет везде. Так что, черт возьми, это распределение коробки: бодиер-бокс? Давайте сначала посмотрим на очень обычный кусок кода:
<div> <div> </div> </div>
Запустите код, чтобы узнать: внешняя высота 702px, внутренняя ширина составляет 500px, а высота - 500px; У каждого не должно быть никаких сомнений здесь, давайте рассмотрим еще один кусок кода:
* {-webkit-box-size: border-box; -Моз-ролика с размером: пограничная коробка; Распределение коробки: пограничная коробка; } <div> <div> </div> </div>Этот код на самом деле является добавлением первых двух кодов. Можно просто понять, что теперь вы начинаете писать код в рамках Boostrap. Результатом запуска кода является: ширина внешнего составляет 500px, а высота внутреннего - 298px;
Причиной этого результата является: размер коробки: пограничный ящик, так что ширина и высота элементов не будут влиять на прокладку и границу. Например, в приведенном выше коде, даже если наружная имеет прокладку и границу, заполнение и граница не повлияет на ширину и высоту внешней, а ширина и высота внешней части по -прежнему составляют 500px; Но куда ушли прокладки и граница? Ответ: зайдите внутрь! Откройте инструмент отладки браузера и посмотрите детали стиля внешнего:
Мы можем ясно видеть, что прокладки и граница являются обоими, но они занимают внутреннее пространство внешнего. С тех пор, как накладка: 100px занимает ширину 200px ширину и высоту внешней, а граница занимает ширину 2px ширину и высоту внутреннего, поэтому внутренний может получить только ширину 298px и высоту внешней.
Если у вас есть опыт работы в области веб-разработки в рамках IE, вы обнаружите, что размер коробки: Border-Box-это странный режим нижней версии IE.
Выше приведено соответствующие знания о подготовке Boostrap для пограничной коробки, представленной вам редактором. Вы узнали это? Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. В то же время я хотел бы поблагодарить всех за поддержку веб -сайта wulin.com!
Ниже приведено краткое введение в понимание пограничной коробки для размера коробки
-Вебкит-бокс-размер: пограничная коробка; тогда ширина и высота, установленные DIV, будут включать границы и прокладки
<! Doctype html> <html> <head> <title> sgizing </title> <style type = "text/css">. Testdiv {padding: 10px ;; ширина: 100px; граница: 10px solid} </style> </head> <body> <div> Нормальный </div> <div style = "-Вебкит-size-size-size-size-size-size-size-size-size-size-size-size-size-size-size-size-size-size-size-size-size-size-size-size-size-size-size-size-size Border-box; "> Special </div> </body> </html>