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

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

黄舟

Libérer： 2016-12-29 14:23:11

original

1667 Les gens l'ont consulté

Nous définissons d'abord un div d'une longueur et d'une largeur de 500px. Vous pouvez le considérer comme une grande boîte. Afin de voir clairement son existence, nous affichons sa bordure sous forme de ligne continue

<html>
<head>
<style type="text/css">
.div{
width:500px;
height:500px;
border:solid 1px;
} </style> <head>
<body>
<div class="div"></div>
</body>
</html>

Copier après la connexion

Il y aura beaucoup de divs à l'intérieur. Vous pouvez comprendre qu'une grande boîte contient d'autres petites boîtes

Mettez-en une en premier

<html>
<head>
<style type="text/css">
.div{
width:500px;
height:500px;
border:solid 1px;
}
#a{
width:100px;
height:100px;
background:red;
} </style> <head>
<body>
<div class="div">
<div id="a"></div> 
</div>
</body>
</html>

Copier après la connexion

Vous verrez

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

L'image n'est pas complète. Vous pouvez voir que le div à l'intérieur est étroitement attaché au coin supérieur gauche du grand div

plus

.

margin-top:5px;
margin-left:5px

Copier après la connexion

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

la marge sert à définir la marge, si elle est définie ici

margin-right:5px;
margin-bottom:5px

Copier après la connexion

ne fonctionnera pas

car il n'y a rien derrière ou en dessous

Jetons un coup d'oeil au rembourrage

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

Copier après la connexion

L'effet peut être vu dès que vous l'essayez, c'est très simple

J'ai trouvé un problème en partant du principe que la longueur et la hauteur du div sont définies dans les navigateurs IE6 et 360, ils peuvent en fait s'adapter. peu importe la quantité de contenu, le div n'éclatera pas, mais la longueur et la hauteur d'origine seront modifiées
En fait, c'est contraire à la norme. Firefox est normal

<html>
<head>
<style type="text/css">
.div{
width:100px;
height:100px;
border:solid 1px;
} 
</style> <head>
<body>
<div class="div" >
5555555555555555555555555555555555555555555555555555555555555555555555555
<br/>
<br/>
<br/>
</div>
</body>
</html>

Copier après la connexion

Vous pouvez l'essayer et voir, c'est aussi un problème de compatibilité du navigateur

<html>
<head>
<style type="text/css">
.div{
width:100px;
height:100px;
border:solid 1px;
}
#a{
width:100px;
height:50px;
background:red
}
#b{
width:100px;
height:50px;
background:green
} 
</style> <head>
<body>
<div class="div" >
<div id="a"></div>
<div id="b"></div>
<br/>
<br/>
<br/>
</div>
</body>
</html>

Copier après la connexion

Fonctionnant sous Firefox est

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

correct

et l'exécution du navigateur IE6 est

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

incorrecte

La longueur et la hauteur d'un div est la marge extérieure (deux), la bordure (deux), la marge intérieure (deux) et la longueur du contenu

Quoi qu'il en soit, rappelez-vous que la longueur et la largeur d'un div ne font absolument pas référence au contenu. La longueur et la largeur de

Ce qui précède est le contenu du nouveau début de la conception de mises en page Web div css (4). Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www. php.cn) !