Maison > Article > interface Web > Préparation à l'entrée Boostrap border box_javascript compétences

Préparation à l'entrée Boostrap border box_javascript compétences

WBOYoriginal: 2016-05-16 15:01:282007parcourir

Dans le processus d'apprentissage de Bootstrap, j'ai rencontré toutes sortes de pièges étranges. Si vous faites les préparatifs avant d'apprendre le bootstrap, vous pouvez plus ou moins éviter certains pièges. Ensuite, l'éditeur commencera à vous présenter la connaissance de l'attribut border-box.

Dans le fichier css qui accompagne Boostrap : boostrap.css, il y a ce code :

* { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
}

Cela signifie que lors de l'écriture du code, cette propriété sera partout. Alors, qu’est-ce que ce box-sizing:boder-box exactement ? Jetons d'abord un coup d'œil à un morceau de code très courant :

<div class="outer" style="width:500px; height:500px; padding:100px; border:1px solid #000; background-color: yellow; "> 
<div class="inner" style="width:100%; height:100%; background-color:pink;"></div> 
</div>

Exécutez le code et vous obtiendrez : la hauteur de l'extérieur est de 702 px, la largeur est de 702 px, la largeur de l'intérieur est de 500 px, la hauteur est de 500 px, tout le monde ne devrait avoir aucun doute ici, regardons un autre morceau de ; codez maintenant :

* { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 
<div class="outer" style="width:500px; height:500px; padding:100px; border:1px solid #000; background-color: yellow; "> 
<div class="inner" style="width:100%; height:100%; background-color:pink;"></div> 
</div>

Ce code est en fait l'ajout des deux premiers morceaux de code. Il peut être simplement compris comme le début de l'écriture du code dans le framework Boosttrap. Le résultat de l'exécution du code est : la largeur extérieure est de 500 px et la hauteur est de 500 px. 500px ; la largeur et la hauteur intérieures sont de 298px ;

La raison de ce résultat est la suivante : box-sizing : border-box rend la largeur et la hauteur de l'élément non affectées par le remplissage et la bordure. Par exemple, dans le code ci-dessus, même si l'extérieur a un remplissage et une bordure, un remplissage. et la bordure ne sont pas affectés. Cela affectera la largeur et la hauteur de l'extérieur, qui sont toujours de 500 pixels, mais où vont le remplissage et la bordure ? Réponse : j'ai couru à l'intérieur ! Ouvrez l'outil de débogage du navigateur et consultez les détails du style externe :

Nous pouvons clairement voir que le remplissage et la bordure sont valides, mais ils occupent l'espace intérieur de l'extérieur puisque padding:100px occupe la valeur de largeur et de hauteur de 200 px de l'extérieur, et la bordure occupe la valeur de largeur et de hauteur de 2 px. , donc inner ne peut obtenir que la valeur de largeur et de hauteur de 298px.

Si vous avez de l'expérience dans le développement Web sous IE, vous constaterez que box-sizing: border-box est un mode étrange des versions inférieures d'IE.

Ce qui précède est la connaissance de la bordure que l'éditeur vous présente pour vous préparer à démarrer avec Boosttrap. L'avez-vous tous appris Si vous avez des questions, laissez-moi un message et l'éditeur vous répondra. dans le temps. Par la même occasion, merci beaucoup pour votre soutien au site Script House !

Permettez-moi de vous présenter la compréhension de la bordure-boîte de taille de boîte

-webkit-box-sizing: border-box; alors la largeur et la hauteur définies par le div incluront la bordure et le remplissage

<!DOCTYPE html>
<html>
<head>
<title>box-sizing</title>
<style type="text/css">
.testdiv{
padding: 10px;;
width:100px;
border: 10px solid
}
</style>
</head>
<body >
<div class="testdiv" > 普通</div>
<div class="testdiv" style=" -webkit-box-sizing: border-box;">
特殊
</div>
</body>
</html>

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Bootstrap imite l'effet des compétences page d'accueil_javascript de ChopsticksArticle suivant：Bootstrap imite l'effet des compétences page d'accueil_javascript de Chopsticks

Articles Liés

Voir plus