Maison > Article > interface Web > Comment résoudre le problème après que DIV ait défini la largeur et dépassé l'élément parent
Comment résoudre le problème après que DIV ait défini la largeur et dépassé l'élément parent
- php中世界最好的语言original
- 2018-01-20 09:24:363068parcourir
Cette fois, je vais vous montrer comment résoudre le problème du dépassement de l'élément parent par DIV après avoir défini la largeur. Quelles sont les précautions pour résoudre le problème du dépassement de l'élément parent par DIV après avoir défini la largeur. Ce qui suit est un cas pratique, jetons-y un coup d'œil.
Avant-propos
Cet article présente l'utilisation du nouvel attribut box-sizing de CSS3 pour résoudre le problème de la définition de la largeur du div sur width : 100 %, puis de la définition du padding ou margePour les problèmes dépassant l'élément parent, les amis dans le besoin peuvent s'y référer.
Syntaxe
box-sizing: content-box|border-box|inherit;
Valeur un, content-box
Il s'agit de la largeur et de la hauteur spécifiées par CSS2. 1 comportement.
La largeur et la hauteur sont appliquées séparément à la zone de contenu de l'élément.
Dessine le remplissage et la bordure de l'élément en dehors de sa largeur et de sa hauteur.
Valeur deux, border-box
La largeur et la hauteur définies pour l'élément déterminent la zone de bordure de l'élément.
C'est-à-dire que tous les remplissages et bordures spécifiés pour l'élément seront dessinés dans la largeur et la hauteur définies.
La largeur et la hauteur du contenu sont obtenues en soustrayant respectivement la bordure et le remplissage de la largeur et de la hauteur définies.
valeur trois, hériter
spécifie que la valeur de l'attribut box-sizing doit être héritée de l'élément parent .
<!DOCTYPE html>
<html>
<head>
<style>
div.container
{
width:100%;
border:1em solid;
padding:15px;
box-sizing:border-box;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:100%;
border:1em solid red;
float:left;
padding:15px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">这个 div 占据左半部分。</div>
</div>
</body>
</html>Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture connexe :
Comment utiliser le serveur sse de h5 pour envoyer des événements EventSource
Le stockage local de H5 et les détails de la base de données locale Présentation
Comment implémenter la fonction de barrage de défilement dans h5 via Canvas
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!