Comment résoudre le problème après que DIV ait défini la largeur et dépassé l'élément parent-tutoriel HTML-php.cn

Comment résoudre le problème après que DIV ait défini la largeur et dépassé l'élément parent

php中世界最好的语言

Libérer： 2018-01-20 09:24:36

original

3157 Les gens l'ont consulté

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;

Copier après la connexion

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>

Copier après la connexion

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!