Maison > Article > interface Web > Parlez de la disposition de la grille en CSS (graphiques et texte)
Parlez de la disposition de la grille en CSS (graphiques et texte)
- 青灯夜游avant
- 2021-01-13 18:53:062580parcourir
(Partage vidéo d'apprentissage : tutoriel vidéo CSS)
La disposition en grille peut diviser la page Web en lignes et colonnes d'attributs simples, page CSS La technologie de mise en page nous permet de récupérer des éléments dans une page Web et de contrôler leur position par rapport au flux de mise en page normal, aux éléments environnants, aux conteneurs parents ou à la fenêtre/fenêtre principale.
Mise en page du Saint Graal
La mise en page du Saint Graal est une mise en page à trois colonnes avec une largeur fixe des deux côtés et un milieu adaptatif :
css :
* {
box-sizing: border-box;
}
html, body{
width: 100%;
height: 100%;
margin: 0;
}
.container{
width:100%;
}
.container:after{
display: table;
content:".";
clear:both;
}
.container .cl{
float:left;
border: 1px solid red;
height: 200px;
}
.main{
width:100%;
padding 0 290px 0 320px;
background-color: blue;
}
.sub{
width: 320px;
margin-left:-100%;
background-color: white;
}
.extra{
width: 290px;
margin-left:-290px;
background-color: yellow;
}
CSSHTML :
<body>
<div class="container">
<div class="cl main">
</div>
<div class="cl sub"></div>
<div class="cl extra"></div>
</div>
</body> "161053501991527Parlez de la disposition de la grille en CSS (graphiques et texte)")
Le principe de la mise en page du Saint Graal est que lorsque les éléments enfants sont dans un état flottant, définissez un état négatif margin, et les éléments enfants chevaucheront leurs frères au-dessus des éléments.
Donc, si vous souhaitez à nouveau diviser la zone bleue en trois zones, je pense qu'il existe de nombreuses façons. Mais peut-on y parvenir grâce à l’imbrication ? On peut essayer :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="window-target" content="_top">
<title>Writing to Same Doc</title>
<style type="text/css">
* {
box-sizing: border-box;
}
html, body{
width: 100%;
height: 100%;
margin: 0;
}
.container{
width:100%;
}
.container:after{
display: table;
content:".";
clear:both;
}
.container .cl{
float:left;
border: 1px solid red;
height: 200px;
}
.main{
width:100%;
padding: 0 290px 0 320px;
background-color: blue;
}
.sub{
width: 320px;
margin-left:-100%;
background-color: white;
}
.extra{
width: 290px;
margin-left:-290px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="cl main">
<div class="container">
<div class="cl main"></div>
<div class="cl sub"></div>
<div class="cl extra"></div>
</div>
</div>
<div class="cl sub"></div>
<div class="cl extra"></div>
</div>
</body>
</html> "161053503019160Parlez de la disposition de la grille en CSS (graphiques et texte)")
Principe du système de grille
 "161053503471393Parlez de la disposition de la grille en CSS (graphiques et texte)")
Hypothèse : Flowline La largeur de est W, la largeur de la colonne est c, la largeur de la gouttière est g, la largeur de la marge est m et le nombre de colonnes de la grille est N
W = c*N + g*(N- 1) + 2m ; La largeur de g est généralement le double de celle de m, donc :
W = (c+g) * N ; Enregistrez c+g comme C, nous obtenons :
W = C * N ;
La plupart des systèmes de grille sont des variantes de cette formule.
Système de grille de Bootstrap
Nous allons maintenant examiner la conception de disposition de grille commune et la mise en œuvre de la conception dans bootstrap. Pour utiliser correctement la disposition en grille dans BootStrap, les colonnes doivent être placées dans des lignes et les lignes doivent être placées dans des conteneurs. La classe conteneur a deux fonctions principales dans la mise en page :
fournit des restrictions de largeur dans différents intervalles de largeur (points d'arrêt réactifs). Lorsque la largeur change, prenez une largeur différente.
Fournit un remplissage pour empêcher le contenu interne de toucher les bordures du navigateur.
Le rembourrage est utilisé dans Bootstrap pour remplacer la marge mentionnée ci-dessus. La taille est de 15 pixels, comme le montre l'image ci-dessous, et la couleur rose correspond à la taille du remplissage.
La ligne est un conteneur de colonnes. La somme des colonnes dans chaque ligne doit être de 12, mais nous pouvons l'étendre par imbrication. Les marges gauche et droite de Row sont de -15px, ce qui est utilisé pour décaler le remplissage dans le conteneur, comme indiqué dans la partie bleue de l'image ci-dessous :
 "161053504639161Parlez de la disposition de la grille en CSS (graphiques et texte)")
Cette conception de rangée est principalement pour la commodité de l'imbrication, sera mentionné plus tard.
La colonne est le protagoniste du système de grille. Le remplissage gauche et droit de chaque colonne est de 15 pixels. La marge négative de la ligne ci-dessus compense le remplissage du conteneur, donc définir le remplissage pour chaque colonne consiste à empêcher le remplissage. le contenu ne touche pas directement la bordure, et il y a des emplacements pour cartes 30px (gouttière) entre les différentes colonnes. Comme le montre la partie jaune de l'image ci-dessous :
 "161053505099187Parlez de la disposition de la grille en CSS (graphiques et texte)")
Réfléchissez maintenant à la formule mentionnée ci-dessus : W = C * N;
ligne mentionnée ci-dessus. la conception à marge négative est principalement destinée à l'imbrication. Si vous souhaitez imbriquer une colonne dans une colonne, vous devez d'abord placer la colonne imbriquée dans la ligne, puis placer la ligne dans la colonne en tant que conteneur, sans placer de conteneur. Comme le montre en bleu la figure ci-dessous, il s'agit de la zone de marge négative de la ligne placée dans la colonne.
 "161053505548471Parlez de la disposition de la grille en CSS (graphiques et texte)")
Maintenant, placez la colonne imbriquée dans la ligne, comme le montre la figure ci-dessous, la colonne supérieure joue le rôle de conteneur.
 "161053506270611Parlez de la disposition de la grille en CSS (graphiques et texte)")
Pour plus de connaissances liées à la programmation, veuillez visiter : Apprentissage en programmation ! !
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!