Avant, j'ai rencontré divers pièges étranges lors de l'apprentissage de Bootstrap. Si je fais mon travail préparatoire avant d'apprendre Bootstrap, je peux éviter certains pièges dans une plus ou moins loin. Ci-dessous, l'éditeur vous présentera la connaissance de l'attribut Border-Box.
Dans le propre fichier CSS de Boostrap: boostrap.css, il y a un morceau de code:
* {-webkit-box-size: border-box; -Moz-Box-Size: Border-Box; Dimensionnement en boîte: Border-Box; }Cela signifie que lors de l'écriture de code, cette propriété sera partout. Alors qu'est-ce que c'est ce dimensionnement de la boîte: Boder-Box? Regardons d'abord un morceau de code très ordinaire:
<div> <div> </div> </div>
Exécutez le code pour découvrir: la hauteur extérieure est de 702px, la largeur intérieure est de 500px et la hauteur est de 500px; Tout le monde ne devrait avoir aucun doute ici, jetons un coup d'œil à un autre morceau de code maintenant:
* {-webkit-box-size: border-box; -Moz-Box-Size: Border-Box; Dimensionnement en boîte: Border-Box; } <div> <div> </div> </div>Ce code est en fait l'ajout des deux premiers codes. Il peut être simplement compris que maintenant vous commencez à écrire du code dans le cadre de Boostrap. Le résultat du code en cours d'exécution est: la largeur de l'extérieur est de 500px et la hauteur de l'intérieur est de 298px;
La raison de ce résultat est: Dimensionnement de la boîte: Border-Box afin que la largeur et la hauteur des éléments ne soient pas affectées par le rembourrage et la bordure. Par exemple, dans le code ci-dessus, même si l'extérieur a un rembourrage et une bordure, le rembourrage et la bordure n'affecteront pas la largeur et la hauteur de l'extérieur, et la largeur et la hauteur de l'extérieur sont toujours de 500px; Mais où est passé le rembourrage et la frontière? Réponse: Entrez à l'intérieur! Ouvrez l'outil de débogage du navigateur et voyez les détails du style de l'extérieur:
Nous pouvons clairement voir que le rembourrage et la bordure sont tous deux valables, mais ils occupent l'espace intérieur de l'extérieur. Depuis le rembourrage: 100px occupe la largeur de 200px et la valeur de hauteur de l'extérieur, et la frontière occupe la largeur de 2px et la valeur de hauteur de l'intérieur, de sorte que l'intérieur ne peut obtenir que la largeur de 298px et la valeur de hauteur de l'extérieur.
Si vous avez de l'expérience dans le développement Web sous IE, vous constaterez que la boîte de boîte: Border-Box est le mode étrange de la version inférieure de IE.
Ce qui précède est les connaissances pertinentes sur la préparation de Boostrap pour la boîte de bordure qui vous est présentée par l'éditeur. L'avez-vous appris? Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. En même temps, je tiens à remercier tout le monde pour son soutien au site Web de Wulin.com!
Vous trouverez ci-dessous une brève introduction à la compréhension de la boîte de bordure de taille en boîte
-Webkit-Box-Size: Border-Box; Ensuite, la largeur et la hauteur définies par la div comprendront les frontières et le rembourrage
<! Doctype html> <html> <éadf> <t titre> box-sizing </title> <style type = "text / css">. TestDiv {padding: 10px ;; width: 100px; border: 10px solide} </ style> </ head> <body> Border-Box; "> Special </div> </odody> </html>