Une explication de la mise en page et de la composition CSS3

Prémisse

Avant d'introduire la mise en page et la composition, nous introduisons d'abord une unité de taille, qui est nouvellement introduite dans CSS3, c'est rem, toutes les références à rem Les tailles de police définies sont relatives à la taille du texte de l'élément racine. Par rapport à l'utilisation de em, cette méthode nous libère du processus fastidieux de calcul manuel de la taille de la police.

Effet 1

demo01.png

Tant que nous utilisons les nouveaux attributs qui nous sont fournis par CSS3, nous pouvons facilement créer un tel effet. Ci-dessous, nous expliquerons certains des principaux attributs utilisés.

• column-width : utilisé pour spécifier la largeur de la colonne. Une fois qu'une valeur est spécifiée, le navigateur décidera dynamiquement de diviser le contenu en sections en fonction de. la largeur du navigateur actuel pour combien de colonnes.

• column-rule : Cet attribut est une abréviation. En fait, il contient trois attributs différents, à savoir column-rule-width, column-rule-style, column-rule-color, de toute façon, ce qu'ils réalisent est d'ajouter une ligne de séparation entre les colonnes, ce qui est le même que le réglage de l'attribut border.

• column-gap : utilisé pour définir l'attribut d'écart de la colonne. Cette valeur est divisée également entre les deux côtés de la colonne.

Si nous voulons implémenter des colonnes, nous pouvons utiliser la largeur de colonne ou le nombre de colonnes attribut, mais nous ne le faisons généralement pas car cela signifie que le contenu doit être divisé en trois colonnes quelle que soit la largeur du navigateur actuel, ce qui est une conception très peu conviviale.

Après avoir connu les attributs ci-dessus, je pense que vous pouvez rapidement réaliser l'effet dans notre diagramme. Nous ne collerons pas le code source ici, vous pouvez cliquer ici pour télécharger. . Ce qu'il faut mentionner ici, c'est que nous avons cité quelques belles polices sur la page. Si vous souhaitez également les utiliser, il vous suffit de coller la ligne de code suivante sous votre balise.

<link href=&#39;http://fonts.googleapis.com/css?family=Lobster|Terminal+Dosis&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;>

Effet 2

demo02.png

Nous utilisons Flexbox pour obtenir cet effet, nous expliquerons ci-dessous les différentes propriétés utilisées.

• 　display : Si nous voulons utiliser la disposition Flexbox, nous devons d'abord définir la valeur de cette propriété sur flex.

• flex-flow : Cette propriété est en fait l'abréviation de deux propriétés, dont l'une est flex-direction est utilisée pour définir la direction de l'axe principal, s'il est défini sur ligne Alors la direction horizontale est l’axe principal, et s’il s’agit d’une colonne, la direction verticale est l’axe principal. Un autre attribut est flex-wrap, Utilisé pour définir l'habillage de l'élément lorsque l'élément dépasse la largeur de l'élément parent, il s'enroule automatiquement. Cela peut obtenir l'effet d'adaptation à l'écran.

• 　flex : Cette propriété est généralement définie lorsque l'affichage est défini sur flex Définis dans l'élément enfant, il y a trois paramètres. Je ne les expliquerai pas en détail ici, car je ne peux pas organiser le langage pour l'expliquer. Vous pouvez vérifier l'utilisation de cet attribut sur Baidu.

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!