Maison > interface Web > tutoriel CSS > le corps du texte

Une introduction à la différence entre les éléments en ligne et les éléments de niveau bloc en CSS

高洛峰
Libérer: 2017-03-06 11:24:30
original
1734 Les gens l'ont consulté

Cet article présente principalement la différence entre les éléments en ligne et les éléments de niveau bloc, qui ont une bonne valeur de référence. Jetons-y un coup d'œil avec l'éditeur ci-dessous

1 Les différences entre les éléments en ligne. éléments et éléments au niveau du bloc Différences

1. Les éléments en ligne n'occuperont pas toute la ligne, mais seront disposés en ligne droite, tous sur la même ligne, disposés horizontalement

Les éléments au niveau du bloc occuperont une ligne, disposés verticalement.

 2. Les éléments de niveau bloc peuvent contenir des éléments en ligne et les éléments de niveau bloc ; les éléments en ligne ne peuvent pas contenir d'éléments de niveau bloc.

3. La différence entre les attributs des éléments en ligne et des éléments au niveau du bloc est principalement due aux attributs du modèle de boîte. Les éléments en ligne sont définis pour avoir une largeur invalide, une hauteur invalide (la hauteur de ligne peut être définie), marge haut et bas invalide, et remplissage haut et bas invalide.

2. Conversion entre les éléments en ligne et les éléments de niveau bloc

Les éléments en ligne sont convertis en éléments de bloc : display:block;

Les éléments de bloc sont converti en éléments en ligne : display:inline;

3. Extension du problème

Description du problème : Pourquoi la largeur et la hauteur des éléments en ligne tels que img et input peuvent-elles être définies ?

Réponse détaillée :

L'élément est la base de la structure du document. En CSS, chaque élément génère une boîte (box, également traduite par "box") qui contient le contenu de l'élément. Mais différents éléments seront affichés différemment. Par exemple,

et

sont différents, et Différents types sont spécifiés pour différents éléments dans la définition du type de document (DTD), ce qui est l'une des raisons pour lesquelles la DTD est importante pour les documents.

 

1. Éléments remplaçables et non remplaçables

À partir des caractéristiques de l'élément lui-même, il peut être divisé en éléments remplaçables et non remplaçables. éléments.

 

a) Élément de remplacement

  L'élément de remplacement signifie que le navigateur détermine le contenu d'affichage spécifique de l'élément en fonction de sa balise et de ses attributs.

Par exemple, le navigateur lira les informations sur l'image et les affichera en fonction de la valeur de l'attribut src de la balise , mais si vous affichez le code HTML (X), vous ne pouvez pas voir le contenu réel de l'image ; autre exemple Selon l'attribut type de la balise ,

décide d'afficher ou non une zone de saisie, un bouton radio, etc.

 (X), ,