Comment utiliser le mode d'affichage CSS

Cette fois je vais vous montrer comment utiliser le mode d'affichage CSS et quelles sont les précautions d'utilisation du mode d'affichage CSS Voici un cas pratique, jetons un oeil.

1. Tag supplément div et pan

2 Qu'est-ce que span ?

Fonction : Généralement utilisée pour modifier certaines informations locales dans la page Web avec CSS

3. Quelle est la différence entre div et span ?

3.1.div occupera une ligne seule, mais span n'occupera pas seule une ligne

3.2.div est un conteneur. -balise de niveau, et span est une balise de niveau texte

4. Quelle est la différence entre les balises de niveau conteneur et les balises de niveau texte ?

Les balises de niveau conteneur peuvent être imbriquées avec tous autres balises

Les balises au niveau du texte ne peuvent être imbriquées qu'avec du texte/des images/des hyperliens

Balises au niveau du conteneur

Balises au niveau du texte

Remarque :

div h ul ol dl li dt dd ...

Quelles balises sont au niveau du texte et quelles balises sont au niveau des conteneurs, nous n'avons pas besoin de nous en souvenir délibérément. Dans le développement d'entreprise, l'imbrication est généralement effectuée dans des divs ou imbriquée en fonction de balises de groupe. 🎜>

2. Mode d'affichage des éléments

span p buis strong em ins del ...

En HTML, HTML divise toutes les balises en deux catégories, à savoir le niveau conteneur et le niveau texte

En CSS, CSS divise également. toutes les balises en deux catégories, à savoir les éléments de niveau bloc et les éléments en ligne

1. Qu'est-ce qu'un élément de niveau bloc et qu'est-ce qu'un élément en ligne Les éléments de niveau bloc occuperont un ? ligne par eux-mêmes

Les éléments en ligne n'occuperont pas une ligne par eux-mêmes

Balises de niveau conteneur

Balises de niveau texte

Éléments de niveau bloc

div h ul ol dl li dt dd ...

Éléments en ligne (tous les éléments de texte sauf p sont des éléments en ligne)

span buis strong em ins del

span p buis stong em ins del ...

2 Quelle est la différence entre les éléments de niveau bloc. et les éléments en ligne ?

p div h ul ol dl li dt dd

2.1 Les éléments de niveau bloc

occupent une ligne

Si la largeur n'est pas définie, elle aura la même largeur que l'élément parent par défaut

Si la largeur et la hauteur est définie, elle sera affichée comme définie

2.2 Les éléments en ligne

n'occuperont pas de ligne exclusive

Si la largeur n'est pas définie, alors la largeur par défaut est la même que le contenu
Les éléments en ligne ne peuvent pas définir la largeur et la hauteur

2.3 Éléments de niveau bloc en ligne

Afin de permettre aux éléments de fonctionner à la fois sans occuper une ligne exclusive, vous pouvez également définissez la largeur et la hauteur, puis il y aura des éléments de niveau bloc en ligne (tels que : balise img)

Conversion du mode d'affichage de trois éléments CSS

1 .Comment convertir le mode d'affichage des éléments CSS ?

Définir l'attribut d'affichage de l'élément

2 valeur d'affichage

block block level

inline inline

inline-. bloquer le niveau de bloc en ligne

3. Touches de raccourci

di display: inline;

db display: block;
dib display: inline-block;

croire Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Comment charger HTMLString dans iOS webView

Quelques petits exercices sur les expressions régulières

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!