Étude approfondie CSS (2)

Recherche approfondie CSS (2)

Article de blog des pages Github

1. Modèle de boîte CSS

1 La structure de la boîte

marge. -border- Le contenu de la structure de remplissage compose le modèle de boîte

Remarque

la largeur et la hauteur sont la largeur et la hauteur de la zone de contenu, à l'exclusion de la marge de bordure de remplissage, mais la hauteur réelle de la boîte doit inclure les trois extérieurs (marge de remplissage)

Ordre d'affectation, dans le sens des aiguilles d'une montre, haut(haut)->droite(droite)->bas(bas)->gauche(gauche)

-- --haut(1)----->||gauche(4) |droite(2)|<---bas(3)----

Affectation, Une valeur, quatre valeurs c'est tout ça, comme la marge : 10px ; affectation, deux valeurs, deux valeurs sont attribuées en haut à droite, c'est-à-dire les deux premières, puis en bas = haut, gauche = affectation à droite, trois valeurs, Attribuez des valeurs respectivement en haut, à droite et en bas, c'est-à-dire les trois premiers, puis gauche = affectation à droite, quatre valeurs, il va sans dire...

représentation dans divers navigateurs html

="Content-Type" content="text/html ; charset=utf-8" /> body #test-div { padding : 10px; : 5px pointillé jaune ; marge : 20px ; couleur d'arrière-plan : rouge ; }

/body>

Chrome a une marge rougeâtre et une bordure de couleur xx (je ne peux pas dire de quelle couleur il s'agit), un remplissage cyan et un contenu bleuâtre

.

IE10, décalage du navigateur win8.1, voir la question stackoverflow, il est dit que le décalage est modifié après avoir utilisé l'absolu relatif, ce qui est le même que la position dans chrome

2.border

border: width(2px) color(green) style(dotted/dashed)

border-width/color/style Définir un certain attribut border-left: width color style Définir les attributs d'un côté à combiner with border-left -style: dotted;

Pour IE, background = remplissage de contenu pour FF, background = remplissage de contenu Il y a un petit écart entre la bordure et la bordure. Faites attention à

3.padding et margin

Les règles d'affectation, comme mentionnées ci-dessus, peuvent être résumées comme suit : en partant du haut, dans le sens des aiguilles d'une montre, attribuez N valeurs au premier N, et le reste peut être copié selon le principe d'appariement haut-bas gauche-droite. Pour une valeur, Indique quatre cases spéciales qui sont toutes identiques

corps Par défaut, le corps aura une marge de plusieurs px, et le fond du corps. s'étendra jusqu'à la partie marge, qui est proche du navigateur, background- Cela est vrai à la fois pour l'image et la couleur d'arrière-plan. L'arrière-plan des autres cases est au plus bordé (sous FF).

2. flux de documents

1. Flux standard en abrégé

Fait référence aux règles de disposition de divers éléments lorsqu'aucune autre règle CSS spéciale liée à la disposition et au positionnement n'est utilisée.

Les éléments de niveau bloc, généralement div ul li, sont toujours exprimés sous la forme d'un bloc et sont disposés verticalement en séquence avec des blocs frères au même niveau, avec des côtés gauche et droit complets.

Les éléments en ligne s'étendent généralement sur plusieurs balises. Disposé horizontalement, l'extrémité la plus à droite enveloppe automatiquement

les divs peuvent contenir des styles span, mais pas l'inverse, c'est-à-dire que span ne peut pas contenir de divs.

2. Espacement des blocs

Espacement horizontal des éléments en ligne = marge droite de l'élément gauche Marge gauche de l'élément droit

bloc Espacement vertical des éléments de niveau Espacement vertical = max (marge-bas de l'élément supérieur, marge-haut de l'élément inférieur) C'est ce qu'on appelle le principe d'effondrement La petite marge s'effondre dans la grande marge

Le La marge du div imbriqué et la marge du div enfant sont placées dans la zone de contenu du div parent. Dans une situation raisonnable et idéale,

la marge est définie sur une valeur négative. distance entre la bordure et la bordure extérieure. Définissez margin-left sur -50px ;Déplacez la boîte entière vers la gauche de 50px;

Ce qui précède est le contenu d'une recherche approfondie CSS (. 2) Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.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