Antes, me encontré con varias trampas extrañas al aprender bootstrap. Si hago mi trabajo preparatorio antes de aprender Bootstrap, puedo evitar algunas dificultades en mayor o menor medida. A continuación, el editor le presentará el conocimiento del atributo de la caja fronteriza.
En el propio archivo CSS de Boostrap: Boostrap.css, hay un código:
* {-webkit-box-tamaño: border-box; -Moz-box-siting: border-box; dimensionamiento de la caja: border-box; }Esto significa que al escribir código, esta propiedad estará en todas partes. Entonces, ¿qué demonios es este tamaño de caja: Boder-Box? Primero veamos un código de código muy ordinario:
<div> <div> </div> </div>
Ejecute el código para averiguar: la altura externa es de 702 px, el ancho interno es de 500px y la altura es de 500 px; Todos no deberían tener dudas aquí, echemos un vistazo a otro código ahora:
* {-webkit-box-tamaño: border-box; -Moz-box-siting: border-box; dimensionamiento de la caja: border-box; } <div> <div> </div> </div>Este código es en realidad la adición de los dos primeros códigos. Simplemente se puede entender que ahora comienza a escribir código en el marco de Boostrap. El resultado del código que se ejecuta es: el ancho del exterior es 500px y la altura del interior es 298px;
La razón de este resultado es: tamaño de caja: caja de borde para que el ancho y la altura de los elementos no se vean afectados por el acolchado y el borde. Por ejemplo, en el código anterior, incluso si el exterior tiene relleno y borde, el acolchado y el borde no afectarán el ancho y la altura del exterior, y el ancho y la altura del exterior aún son 500px; Pero, ¿a dónde fueron el relleno y el borde? Respuesta: ¡Entra! Abra la herramienta de depuración del navegador y vea los detalles del estilo del exterior:
Podemos ver claramente que el relleno y el borde son válidos, pero ocupan el espacio interno del exterior. Dado que el relleno: 100px ocupa el valor de ancho y altura de 200px del exterior, y el borde ocupa el valor de ancho y altura de 2px del interior, por lo que el interno solo puede obtener el valor de ancho y altura de 298px del exterior.
Si tiene experiencia en el desarrollo web en IE, encontrará ese tamaño de caja: Border-Box es el modo extraño de la versión inferior de IE.
Lo anterior es el conocimiento relevante sobre la preparación de boostrap para la caja de borde presentada por el editor. ¿Lo has aprendido? Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. Al mismo tiempo, me gustaría agradecer a todos por su apoyo al sitio web de Wulin.com.
A continuación se muestra una breve introducción a la comprensión de la caja del borde del tamaño de la caja
-Webkit-box-siting: border-box; Entonces el ancho y la altura establecidos por el DIV incluirán bordes y relleno
<! Doctype html> <html> <fead> <title> box-sizing </title> <style type = "text/css">. TestDiv {relleno: 10px ;; width: 100px; border: 10px sólido} </style> </head> <body> <div> normal </div> <style = "-webkit-sizing: boxe-s-syinging:-syinging:-singing:-syinging:-syinging:-syinging:-syicing: border-box; "> especial </div> </body> </html>