Afficher l'utilisation de -webkit-box en css3

Display Webkit Box Usage Css3



boîte de webkit

1. Avant de pouvoir implémenter la mise en page Web horizontale, elle est généralement flottante ou display: inline-block, mais vous ne pouvez pas obtenir une mise en page fluide réelle. Au moins la largeur doit être calculée par vous-même.



2.flexiblebox peut obtenir une réelle sensation de mise en page fluide. Tant que les propriétés correspondantes sont données, le navigateur effectuera des calculs supplémentaires pour nous.



3.box-flex est une propriété de modèle de boîte nouvellement ajoutée de css3, et son apparence peut résoudre la méthode de mise en page que nous réalisons via N multi-structure et css. Une application de mise en page classique est le contour vertical, la moyenne de l'eau et la division proportionnelle de la mise en page.



Actuellement, la propriété box-flex n'est pas entièrement prise en charge par les navigateurs firefox, Opera et chrome, mais vous pouvez utiliser leurs propriétés privées pour définir firefox (-moz), opera (-0), chrome / safari (-webkit).

Plusieurs propriétés fournies sur le modèle de boîte

boîte-orient



Disposition des éléments enfants vertical (rangée verticale) ou horizontale (rangée horizontale)

boîte-flex

Rapport entre éléments frères, un seul coefficient

aligner la boîte

Disposition de la boîte

boîte-direction

Direction de la boîte

boîte-flex-groupe

Coefficient de fluide en groupes

box-lines

boîte-ordinal-groupe

Disposition des éléments enfants en groupes

-moz-box-pack: fin

-webkit-box-pack: fin
Le rendu

Box-pack ci-dessous est quelques exemples de flexiblebox

1.1. Disposition adaptative à quatre colonnes.

Le rendu


1.1html

Utilisation de webkit-box en css3

.envelopper {

affichage: -moz-box

affichage: boîte

affichage: -webkit-box

-webkit-box-orient: horizontal / * Affichage horizontal * /

}

.enfant {

hauteur min: 200px

bordure: 2px solide oranger

-webkit-box-flex: 1/* Un par un*/

marge: 20px

taille de la police: 100px

font-weight: gras

famille de polices: Georgia

-webkit-box-align: center / * Affichage centré * /

}

1

deux

3

4

1.2. Lorsqu'une colonne est définie sur une largeur fixe, les deux colonnes restantes peuvent se voir attribuer des ratios différents (disposition à trois colonnes,)

Le rendu


Code HTML

Utilisation de webkit-box en css3

.envelopper {

affichage: -webkit-box

-webkit-box-orient: horizontal / * horizontal * /

}

.enfant {

hauteur min: 200px

bordure: 2px orange uni

-webkit-box-flex: 1

marge: 10px

taille de la police: 50px

font-weight: gras

famille de polices: Georgia

-webkit-box-align: centre

}

.w100 {largeur: 100px}

.flex1 {-webkit-box-flex: 1}

.flex2 {-webkit-box-flex: 2}

100 px

1

Proportion 2

1.1. Vous trouverez ci-dessous une présentation de base d'une page Web commune

Le rendu


Utilisation de webkit-box en css3

en-tête, pied de page, section {

bordure: solide 5px # FFA500

famille de polices: Georgia

taille de la police: 40px

text-align: centre

marge: 20px

}

#doc {

largeur: 80%

largeur min: 600px

hauteur: 100%

affichage: -webkit-box

-webkit-box-orient: vertical

marge: 0 auto

}

entête,

bas de page {

hauteur min: 100px

-webkit-box-flex: 1

}

#teneur {

hauteur min: 400px

affichage: -webkit-box

-webkit-box-orient: horizontal

}

.w200 {largeur: 200 px}

.flex1 {-webkit-box-flex: 1}

.flex2 {-webkit-box-flex: 2}

.flex3 {-webkit-box-flex: 3}

Entête

largeur 200

proportion 3

Proportion 1

Bas de page