Maison > interface Web > tutoriel HTML > Explication détaillée de la transformation et de l'utilisation de la configuration à double aile volante

Explication détaillée de la transformation et de l'utilisation de la configuration à double aile volante

零下一度
Libérer: 2017-06-24 13:24:44
original
1660 Les gens l'ont consulté

Dimensionnement de la boîte + mise à niveau de la marge négative

1. Attribut de dimensionnement de la boîte

.content-size, .border-size{width: 200px;height: 100px;padding: 10px;border: 5px solid red;margin: 20px;
}.content-size{box-sizing: content-box;
}.border-size{box-sizing: border-box;
}
Copier après la connexion
    .
  1. Les valeurs de largeur, de hauteur, de remplissage, de bordure et de marge des deux classes de taille de contexte et de taille de bordure sont les mêmes.

  2. box-sizing : content-box, la largeur et la hauteur du div sont les valeurs de width et height

  3. box- dimensionnement : border-box, la largeur et la hauteur du div sont padding + border + width (hauteur du contenu)

2. Application de l'attribut border-box

Transformation de la disposition à double aile, la double hauteur de vol traditionnelle est adaptative. Cette fois, la hauteur de la disposition à double aile est fixée via la valeur border-box de l'attribut box-sizing, de sorte que la tête et le pied de page soient fixes et que la barre de défilement apparaisse automatiquement dans la partie centrale du contenu.

Le code est le suivant :

<html><head><meta charset="UTF-8"><title>Document</title><style>div, body{margin: 0px;}  .head{  height: 60px;  background: red;  }  .main {  height: 100%;  clear: both;  box-sizing: border-box;  padding: 60px 0px 100px 0px;  margin: -60px 0px -100px 0px;  }  .main-main{  clear: both;  }  .main-main:after{  content: '';  display: block;  overflow: hidden;  clear: both;  }  .cont-main{  margin: 0px 300px 0px 200px;  overflow: hidden;  overflow-y: auto;  height: inherit;  }  .main .cont, .main .left, .main .right{  float: left;  height: 100%;  }  .main .cont{  width: 100%;  }  .main .left{width: 200px;margin-left: -100%;  }  .main .right{width: 300px;margin-left: -300px;  }  .footer{  height: 100px;  background: gray;  }</style></head><body><div class="head">head</div><div class="main"><div class="main-main"><div class="cont"><div class="cont-main">cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont最后一条<br/></div></div><div class="left">left</div><div class="right">right</div></div></div><div class="footer">footer</div></body></html>
Copier après la connexion

Rendu :

Analyse du code clé

  1. Pour réaliser la disposition traditionnelle des ailes à double vol, je n'entrerai pas dans les détails ici.

  2. Selon l'introduction de l'attribut box-sizing, vous pouvez savoir que lorsqu'il est défini sur border-box, sa hauteur = padding + border value, et la valeur négative de margin doit être utilisé.


    1. le rembourrage réduit la hauteur du contenu lui-même

    2. margin négative La valeur raccourcit la distance entre la tête, le pied de page et le contenu

.main {  height: 100%;  clear: both;  box-sizing: border-box;  padding: 60px 0px 100px 0px;  margin: -60px 0px -100px 0px;
  }
Copier après la connexion
  1. L'implémentation de la barre de défilement dans la partie contenu est due à notre principal (le div le plus à l'extérieur dans la partie centrale, tel que .main) doit être réglé sur height:100% afin que sa hauteur remplisse l'écran. Par conséquent, un div (tel que .main-main) doit être ajouté à la couche externe de la mise en page du contenu. À l’heure actuelle, la hauteur de .main-main est ce que nous voulons. Le corps du milieu suivant contient le code CSS :

.cont-main{
  margin: 0px 300px 0px 200px;
  overflow: hidden;
  overflow-y: auto;
  height: inherit;
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal