Maison > interface Web > tutoriel CSS > Introduction au modèle de boîte CSS

Introduction au modèle de boîte CSS

高洛峰
Libérer: 2017-03-13 16:18:52
original
2207 Les gens l'ont consulté

Quel est le modèle de boîte CSS ? Le modèle de boîte CSS doit nous permettre de bien comprendre la fonction de positionnement du modèle p css Le modèle de boîte est un modèle qui doit être appris lors de l'apprentissage de la méthode de mise en page p css

1. Qu'est-ce que c'est. CSS ?

CSS (Cascading Style Sheet) : La feuille de style en cascade est un langage qui sépare le contenu et le style d'une page Web, c'est-à-dire la conception de pages Web en aspx ou html contenu, définition du style de la page Web en CSS, etc.

2. Qu'est-ce que le modèle de boîte CSS ?

Noms d'attribut couramment entendus dans la conception Web : contenu, remplissage (padding), bordure (border ), bordure (marge), le modèle de boîte CSS possède tous ces attributs. Ces propriétés sont les mêmes que celles des boîtes dans notre quotidien. Le contenu est ce qui se trouve à l'intérieur de la boîte ; le remplissage est le matériau antisismique ajouté pour éviter d'endommager le contenu de la boîte ; le cadre fait référence à la boîte elle-même, ce qui signifie qu'il faut laisser un certain espace ; entre les caissons pour maintenir la ventilation.

3. Deux modèles de boîte

1. Modèle de boîte standard

Introduction au modèle de boîte CSS

2. Modèle de boîte IE                                                                      Ces deux images sont exactement les mêmes, mais quand vous regardez attentivement, vous découvrirez les similitudes et les différences entre eux. Les deux modèles de boîte incluent quatre attributs : contenu, remplissage, bordure et marge, mais la partie contenu du modèle de boîte IE inclut le remplissage et la bordure. Généralement, afin d'être compatible avec plusieurs navigateurs, nous utilisons le modèle de boîte standard et n'avons besoin que d'ajouter la déclaration DOCTYPE.

1), la forme abrégée de la valeur d'attribut

Introduction au modèle de boîte CSS① Si deux valeurs d'attribut sont données, la première représente les attributs supérieur et inférieur, et la seconde représente les attributs gauche et droit.

②Si trois valeurs d'attribut sont données, la première représente l'attribut supérieur, la valeur du milieu représente les attributs gauche et droit et la seconde représente l'attribut inférieur.

③Si quatre valeurs d'attribut sont données, cela signifie les attributs du haut, de la droite, du bas et de la gauche. Autrement dit, triez dans le sens des aiguilles d'une montre.

2) Flux standard : le flux standard peut être compris comme la disposition des balises. La conception de la disposition des balises produit des éléments de niveau bloc et des éléments en ligne.

3). Classification des éléments :

①Éléments de niveau bloc : Chaque élément de niveau bloc occupe une ligne de hauteur par défaut. Méthode de représentation

.

②Éléments en ligne : par rapport aux éléments de niveau bloc, les éléments en ligne peuvent être compris comme une ligne peut accueillir plusieurs éléments. La représentation est .

4. A quoi sert le modèle boîte ?

Le modèle de boîte en CSS est destiné à nous permettre de bien comprendre la fonction de positionnement du modèle p css. Il utilise le modèle de boîte pour remplacer la disposition traditionnelle de

table

, donc le modèle de boîte. Le modèle de boîte est un modèle qui doit être appris lors de l'apprentissage de la méthode de mise en page p css. Grâce à ce modèle, vous pouvez comprendre comment les positions relatives entre p et p dans la page Web sont disposées. Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

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