Tutoriel détaillé sur la conversion entre les éléments en ligne et au niveau du bloc-tutoriel HTML-php.cn

Le 5 janvier 2015, je me suis rendu dans une start-up Internet à Pékin pour un entretien. J'ai ressenti l'atmosphère des jeunes qui y travaillaient ensemble. La rubrique de recrutement disait qu'ils recherchaient des personnes ayant plusieurs années d'expérience. expérience de travail front-end Web. Je me suis appuyé sur mon peu de capacité pour aller de l'avant sans surestimer mes capacités. En conséquence, l'intervieweur m'a posé de nombreuses questions auxquelles j'avais été exposé. Cependant, malheureusement, je n'avais qu'une compréhension générale de ces points de connaissance, mais je connaissais très peu de choses sur l'application réelle de ces points de connaissance. Pendant l'entretien, j'étais gêné parce que j'avais toujours l'impression de faire perdre le temps aux gens.

Cette question a été posée lorsque l'intervieweur m'a posé des questions sur le boîte modèle puisque j'ai besoin de parler des marges supérieure, inférieure, gauche et droite, dans. Afin de mieux l'expliquer, j'ai donné un exemple d'éléments en ligne et d'éléments de niveau bloc, mais les gens demandent toujours "Quelles méthodes peuvent être utilisées pour convertir des éléments en ligne et des éléments de niveau bloc ?" J'ai seulement répondu à <a href="http://www.php.cn/wiki/927.html" target="_blank">display<code><a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>, alors j'ai cherché des livres pertinents, j'ai regardé au code source de plusieurs sites Web, puis je l'ai résumé.

Les éléments de niveau bloc et les éléments en ligne

Les éléments de niveau bloc s'étendront à la même largeur que l'élément .
Les éléments en ligne "emballent sous film rétractable" leur contenu, en l'enveloppant aussi étroitement que possible.
(Les deux résumés ci-dessus sont tirés du livre "CSS Design Guide")

Le style CSS par défaut

La hauteur d'un élément au niveau du bloc est la hauteur de son contenu, et sa largeur s'étendra jusqu'à la même largeur que l'élément parent. Par conséquent, l'élément de niveau bloc occupera sa propre ligne et ne pourra pas accueillir d'autres éléments de niveau bloc et éléments en ligne derrière lui.
La hauteur d'un élément en ligne est la hauteur de son contenu, et sa largeur réduit son contenu. Ce qui est étrange : il y a une certaine distance entre les éléments en ligne lors de la visualisation à l'aide de la console, cette distance n'est pas comptée comme un modèle de boîte. J'utilise <a href="http://www.php.cn/wiki/931.html" target="_blank">margin<code><a href="http://www.php.cn/wiki/931.html" target="_blank">margin</a>:0;padding:0:0;padding:0 et ce ne sera pas le cas effacer Cette distance ? ? S'il vous plaît laissez-moi savoir!

modification CSS

Élément de remplacement : L'élément de remplacement signifie que le navigateur est basé sur la balise de l'élément et attribut pour déterminer le contenu d'affichage spécifique de l'élément. Par exemple, le navigateur lira les informations <img>image et les affichera en fonction de la valeur de l'attribut src, mais si vous affichez le code HTML (X), vous ne pourrez pas voir le contenu réel de l'image ; un autre exemple est par <input>L'attribut type détermine s'il faut afficher la zone de saisie, ou bouton radio, etc. Cités d'ici
Éléments non remplaçables : tels que p a span p, c'est-à-dire que leur contenu est directement affiché à l'utilisateur (comme un navigateur).
Par conséquent, les éléments en ligne sont divisés en éléments de remplacement en ligne img input et éléments de non-remplacement en ligne span a... Il existe une différence dans la modification CSS entre les deux.
Éléments en ligne non remplacés : leurs paramètres de largeur et de hauteur ne sont pas valides. Vous pouvez définir les marges et bordures intérieures et extérieures, mais les paramètres verticaux n'affecteront pas la disposition du flux de documents, donc. définir les marges verticales intérieures et extérieures. Les marges n'ont aucun effet. Les bordures verticales nous sont visibles, mais elles n'occupent pas le flux du document. Par conséquent, l'élément en ligne ci-dessus définit une bordure d'une largeur de 10 px, ce qui n'entraînera pas le déplacement de l'élément inférieur vers le bas.
Éléments de remplacement en ligne, en plus d'avoir les caractéristiques de juxtaposition d'éléments en ligne, il peut définir les marges intérieures et extérieures, la largeur et la hauteur qui affectent la disposition du flux de documents. Et définir la hauteur équivaut à définir la hauteur de la ligne, qui sera centrée verticalement
line-height Bien que les éléments en ligne non remplacés n'aient pas de largeur et la hauteur, ils peuvent être utilisés avec line-height Définir la hauteur, mais ce qui est étrange est que bien que la hauteur de la ligne puisse affecter la disposition du flux de documents des éléments en ligne, sa bordure enveloppera toujours son contenu, ignorant le blanc supérieur et inférieur espace causé par la hauteur de la ligne.
margin La marge des éléments en ligne, qui ne seront pas fusionnés (remplacés mais pas remplacés). Contrairement aux éléments de niveau bloc, les marges supérieure et inférieure, gauche et droite seront combinées.
Les éléments au niveau du bloc peuvent définir leur hauteur et leur largeur, ainsi que leurs bordures, marges intérieures et extérieures, et leurs paramètres affectent la disposition du flux de documents.
Notez que la modification de la largeur ne fera pas déplacer les éléments en ligne situés en dessous vers le haut.
Éléments en ligne La hauteur des éléments en ligne peut-elle être définie ? Bien sûr que non! Cette réponse est bien sûr trop absolue.
les éléments sont divisés en éléments remplacés et éléments non remplacés. Presque tous les éléments remplacés sont des éléments en ligne.

Conversion entre éléments en ligne et éléments de niveau bloc

display:none; L'élément ne sera pas affiché et la position du flux documentaire occupée initialement par l'élément ne sera pas conservée.
display:block;Convertir en éléments de niveau bloc.
display:inline; Convertir en élément en ligne.
display:inline-block;Convertir en élément de niveau bloc en ligne.
Les quatre ci-dessus sont ceux que j'utilise couramment. En fait, il y en a beaucoup d'autres

En utilisant display:block; et display:inline;, vous pouvez facilement convertir entre les deux types d'éléments. formes de réalisation.
Cependant, il arrive souvent que nous devions utiliser display:inline-block; pour convertir des éléments en ligne ou des éléments au niveau du bloc. Cependant, cet élément est un nouvel attribut de css2. Cet attribut n'est pas pris en charge pour les versions inférieures à IE7, certaines méthodes compatibles sont donc nécessaires. J'écrirai bientôt un article
display
Les éléments de niveau bloc sont affichés par défaut : block ; éléments de non-remplacement en ligne (a, span) affichés par défaut ; :inline; La valeur par défaut pour les éléments de remplacement en ligne (entrée) est display:inline-block;
<a href="http://www.php.cn/%20wiki/919.html%20" target="_blank">float<code><a href="http://www.php.cn/wiki/919.html" target="_blank">float</a>
Après avoir défini float:left/right sur un élément en ligne, l'attribut display de l'élément en ligne will Il se voit attribuer une valeur de bloc et possède la propriété float. Les éléments en ligne suppriment l'espace blanc inexplicable entre eux,
<a href="http://www.php.cn/wiki/902.html" target="_blank ">position<code><a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>
Lors du positionnement d'éléments en ligne, position:absolute et position:fixed. Fera en sorte que les éléments en ligne d'origine deviennent des éléments de niveau bloc.

[Remarque] Grâce aux paramètres ci-dessus, vous pouvez définir la largeur, la hauteur et les marges intérieures et extérieures des éléments en ligne non remplacés. Cependant, lors du remplacement, vous devez faire attention au fait que la conversion en éléments au niveau du bloc n'est qu'un effet secondaire du flotteur et de la position. Leurs propres effets interféreront également avec l'effet de mise en page.
Quand j'ai introduit les éléments de niveau bloc auparavant, j'ai dit que la largeur d'un élément de niveau bloc hériterait de son élément parent. Cependant, cet effet ne se produira que si display:block; est défini pour les éléments en ligne. Les autres conversions n'apporteront pas cet effet par défaut.

Il est recommandé aux amis de taper et de comparer eux-mêmes dans l'éditeur pour faire une profonde impression.