Page d'accueil>Tutoriel de conception de sites Web>Effets spéciaux Web

Utiliser le dimensionnement de la boîte pour implémenter le cadre d'imitation div

Auteur：Eve Cole Date de mise à jour：2009-12-07 16:08:04

[ Navigateurs participant au test : IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2 ]
[ Système d'exploitation : Windows]

Regardons d'abord le code :

Boîte de code d'exécution
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="auteur" content="Chomo" />
<link rel="start" href=" http://www.14px.com " title="Accueil" />
<title>Utiliser le dimensionnement de boîte pour implémenter un cadre d'imitation div</title>
<style type="text/css">
* { marge :0 ; remplissage :0;}
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; débordement:caché;}
html, corps { hauteur : 100 % ;}
.top { position :relative ; marge-top :-100px hauteur :100px fond :#f60 ;}
.side { position:relative; hauteur:100%; background:#fc0; overflow:auto; float:left; margin-right:-3px;
.main { position:relative; débordement:auto; hauteur:100%;
.bottom { position : relative ; hauteur : 100px ; arrière-plan : #f60 ;
</style>
</tête>
<corps>
<div class="haut">
haut
</div>
<div class="côté">
côté
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="main">
principal
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div classe="bas">
bas
</div>
</corps>
</html>

[Ctrl+A Sélectionner tous les conseils : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]

Pièces clés :

html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; débordement:caché;}

Le principe est probablement le suivant :

Mille mots ne valent pas une image. Grâce à la comparaison avant et après la chirurgie plastique, tout le monde devrait pouvoir voir l'effet de box-sizing:border-box.

Les étudiants qui comprennent le box-sizing doivent savoir que cela vient du monde CSS3 qui est loin de Weiguo, donc IE6/IE7 n'est pas supporté, mais je suis très responsable et dis : cette démo est normalement compatible avec IE6/IE7.

Parce que...

sous IE6/IE7, la valeur de dimensionnement par défaut de <html> est border-box (Remarque : IE7 est un peu anormal, et la conscience a récupéré après un débordement : caché, ce qui n'affectera pas le fonctionnement normal de cette démo). ,

La question est maintenant de savoir s'il faut utiliser cette méthode. Comparons les avantages et les inconvénients, et vous pourrez décider par vous-même :

Il est préférable d'utiliser la méthode de positionnement absolu. Cette méthode présente actuellement deux avantages principaux :

  1. essentiellement pour chaque navigateur. même méthode, le code CSS est simple, facile à modifier et facile à comprendre.
  2. compatible. La méthode de positionnement absolu existe sous OP10. Il n'y a actuellement aucun moyen de corriger le bug, je dois donc faire un détour.

Son plus gros inconvénient est qu'il n'est pas flexible. S'il n'y avait pas IE6, je pense que je choisirais certainement la méthode de positionnement absolu.

Ce qui suit est un exemple d’application démo.

Boîte de code d'exécution
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<tête>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="auteur" content="Chomo" />
<link rel="start" href=" http://www.14px.com " title="Accueil" />
<title>Utiliser le dimensionnement de boîte pour implémenter un cadre d'imitation div</title>
<style type="text/css">
* { marge :0 ; remplissage :0;}
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; rembourrage:100px 0;
html, corps { hauteur : 100 % ;}
.top { position :relative ; marge-top :-100px hauteur :100px fond :#f60 ;}
.side { position:relative; hauteur:100%; background:#fc0; overflow:auto; float:left; margin-right:-3px;
.main { position : relative ; débordement : caché ; hauteur : 100 % ; indice z : 2 ;}
.main iframe { hauteur : 100 % ; largeur : 100 % ; arrière-plan : #fff ; position : gauche absolue : 0 ;
.bottom { position : relative ; hauteur : 100px ; arrière-plan : #f60 ;
</style>
</tête>
<corps>
<div class="haut">
haut
</div>
<div class="côté">
côté
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div class="main">
<iframe frameborder="0" src=" http://www.g.cn/"></iframe >
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div classe="bas">
bas
</div>
</corps>
</html>

[Ctrl+A Tous les conseils de sélection : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]

Un problème à noter :

ne donnez pas overflow:hidden au corps, il cachera impitoyablement tout ce qui se trouve à l'extérieur. Les choses, y compris le haut/le bas (en-tête/pied de page) ;

un point important à comprendre :

La méthode de génération de la hauteur de [100%+(N)px] : div { height:100%; )px;} .

 

 
Articles connexes