Un nouveau départ pour la conception de mises en page de pages Web div CSS (7)-tutoriel CSS-php.cn

Un nouveau départ pour la conception de mises en page de pages Web div CSS (7)

黄舟

Libérer： 2016-12-29 14:38:27

original

1498 Les gens l'ont consulté

Revenons ensuite au problème du chevauchement des marges extérieures de deux divs horizontaux

<html>
<head>
<style type="text/css"> 
body{margin:0;padding:0;} 
#a{width:500px;height:500px;border:solid;}
.div{width:100px;height:100px;border:soild;
margin-right:20px;background:green;float:left;} 
#b{width:100px;height:100px;border:soild;margin-left:20px;background:green;float:left;} 
</style> 
<head>
<body>
<div id="a">
<div class="div"></div>
<div id="b"></div>
</div>
</body>
</html>

Copier après la connexion

Un nouveau départ pour la conception de mises en page de pages Web div CSS (7)

ie6 et Firefox sont identiques
Cela montre que les marges extérieures horizontales ne se chevaucheront pas

Pourquoi le premier div n'est-il pas défini pour flotter, mais le deuxième div est défini sur
, il ne sera donc pas disposé horizontalement

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
}
.div{
width:100px;
height:100px;
border:soild;
margin:5px;
background:green;
} 
#b{
width:100px;
height:100px;
border:soild;
margin:5px;
background:green;
float:left;
} 
</style> 
<head>
<body>
<div id="a">
<div class="div"></div>
<div id="b"></div>
</div>
</body>
</html>

Copier après la connexion

Premier coup d'oeil à Firefox

Un nouveau départ pour la conception de mises en page de pages Web div CSS (7)

Ici vous pouvez voir que pour les divs flottants et les divs ordinaires, les marges verticales ne se chevaucheront pas
Regardez at ie6

Un nouveau départ pour la conception de mises en page de pages Web div CSS (7)

Le deuxième div ajoute en fait la marge gauche au premier div, qui est de 10 px, donc le problème de compatibilité du navigateur est assez gênant

Les divs flottants peuvent être positionnés en fonction des divs ordinaires

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
}
.div{
width:100px;
height:100px;
border:soild;
margin:5px;
background:green;
} 
#b{
width:100px;
height:100px;
border:soild;
margin-top:25px;
background:green;
float:left;
} 
</style> 
<head>
<body>
<div id="a">
<div class="div"></div>
<div id="b"></div>
</div>
</body>
</html>

Copier après la connexion

Un nouveau départ pour la conception de mises en page de pages Web div CSS (7)

Les divs ordinaires peuvent-ils donc être positionnés en fonction des divs flottants ? Expérimenter

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
}
.div{
width:100px;
height:100px;
border:soild;
margin:5px;
background:green;
} 
#b{
width:100px;
height:100px;
border:soild;
margin-top:25px;
background:green;
float:left;
} 
#c{
width:300px;
height:300px;
border:soild;
margin-top:50px;
background:green;
} 
</style> 
<head>
<body>
<div id="a">
<div class="div"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</body>
</html>

Copier après la connexion

Ici, nous agrandissons délibérément la troisième div

Un nouveau départ pour la conception de mises en page de pages Web div CSS (7)

Comme vous pouvez le voir, je ne le fais pas Je ne sais pas que le deuxième div existe, mais il est positionné en fonction du premier div ordinaire, avec une distance de 50px
Le troisième div ici ne couvre pas le deuxième div, mais est en dessous, plaçant le troisième div en dessous . Cela se voit si vous changez la couleur des deux divs

Un nouveau départ pour la conception de mises en page de pages Web div CSS (7)

Parce que les divs ordinaires ne peuvent être qu'au sol et ne peuvent pas être dans les airs

. Je regarde le spectacle ie6. . .

Un nouveau départ pour la conception de mises en page de pages Web div CSS (7)

Je pense qu'utiliser IE6 pour apprendre le CSS est une tragédie. . .

Alors, les divs flottants peuvent-ils être positionnés en fonction des divs flottants ?

<html>
<head>
<style type="text/css"> 
body{
margin:0;
padding:0;
} #a{
width:500px;
height:500px;
border:solid;
}
.div{
width:100px;
height:100px;
border:soild;
margin:5px;
background:green;
} 
#b{
width:100px;
height:100px;
border:soild;
background:green;
float:left;
} 
#c{
width:100px;
height:100px;
border:soild;
margin-left:50px;
background:green;
float:left;
} 
</style> 
<head>
<body>
<div id="a">
<div class="div"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</body>
</html>

Copier après la connexion

La réponse est oui

Un nouveau départ pour la conception de mises en page de pages Web div CSS (7)

Idem pour ie6

Ce qui suit est un résumé
Les éléments flottants peuvent être positionnés en fonction d'éléments non flottants (c'est-à-dire des divs ordinaires) et d'éléments flottants
Les éléments non flottants ne peuvent être positionnés qu'en fonction d'éléments non flottants, pas d'éléments flottants

Donc à propos de l'aéroport La métaphore est à réinterpréter
L'élément flottant est un avion volant dans les airs. L'élément non flottant est un avion stationné au sol
Si l'élément non flottant occupe un. zone, l'élément flottant n'occupera pas cette zone, car Vous pouvez voir la situation au sol dans les airs, vous pouvez donc le positionner en fonction d'éléments non flottants
Si l'élément flottant occupe une zone, le non-flottant. l'élément flottant au sol ne connaîtra pas la situation dans les airs, donc vous ne le saurez pas, donc les deux se chevaucheront, un dans le ciel et un au sol

Ce qui précède est le contenu du nouveau début de la conception de mises en page Web CSS div (7), plus de contenu connexe Veuillez faire attention au site Web PHP chinois (m.sbmmt.com) !