Balises CSS au niveau du bloc, balises en ligne et conversion de balises de bloc en ligne-tutoriel CSS-php.cn

Balises CSS au niveau du bloc, balises en ligne et conversion de balises de bloc en ligne

高洛峰

Libérer： 2017-02-20 13:38:38

original

2190 Les gens l'ont consulté

Étiquette au niveau du bloc CSS, étiquette en ligne et conversion de l'étiquette du bloc interne

Dans Basic 1, j'ai parlé en détail des attributs communs du CSS, de plusieurs sélecteurs différents. caractéristiques pour mieux apprendre et maîtriser les compétences de développement associées.

Classification des balises HTML

Lorsque nous parlons de classification des balises, en tant que débutants, lorsque nous utilisons les balises pour la première fois, nous constaterons que certains attributs ne fonctionnent pas sur certaines balises, comme la largeur, la hauteur, Centrage horizontal, en fait, l'utilisation de cet attribut ne fonctionne que lorsqu'il est utilisé sur des balises au niveau du bloc. Personnellement, je pense que c’est quelque chose que les débutants peuvent facilement négliger, alors je l’ai noté !

Tout d'abord, nous pouvons diviser les balises HTML en balises de niveau bloc, balises en ligne et balises de bloc en ligne selon différents affichages, nous les présenterons séparément maintenant ;

Balise au niveau du bloc

Caractéristiques : Elle occupe une ligne exclusive et prend effet sur les valeurs d'attribut réglables de hauteur, de largeur, de hauteur de ligne et de marges supérieure et inférieure si ; aucune largeur n'est donnée, l'élément au niveau du bloc sera La valeur par défaut est la largeur du navigateur, qui est de 100 % de largeur

Les balises typiques au niveau du bloc sont :

, série h,

Étiquette en ligne

Caractéristiques : plusieurs étiquettes peuvent exister sur une seule ligne, mais la hauteur, la largeur, la hauteur de ligne et le haut de l'étiquette en ligne ne peuvent pas être définis directement. Et la marge inférieure, la largeur et la hauteur dépendent entièrement du contenu !

Les balises en ligne typiques sont : , , , , , , ,

Balise de bloc en ligne :

Caractéristiques : Combinant des fonctionnalités en ligne et au niveau du bloc, elle peut non seulement prendre effet sur les valeurs des attributs de largeur et de hauteur, mais également plusieurs balises peuvent être affiché sur une seule ligne ;

Les balises en ligne typiques sont : Balises CSS au niveau du bloc, balises en ligne et conversion de balises de bloc en ligne ,

Ensuite, certains étudiants penseront : ne puis-je pas contrôler la largeur et la hauteur de la portée ou police ? Oui, laissons de côté le flottement et le positionnement cette fois, et convertissons-les les uns aux autres via l'attribut display :

1. Convertissez les balises de niveau bloc en balises en ligne : display: inline;

2. Convertir les balises en ligne en balises de niveau bloc : display:block;

3. Convertir en balises de bloc en ligne : display: inline-block;

Tant que vous utilisez l'attribut d'affichage pour la balise correspondante et prenez la valeur correspondante, vous pouvez convertir les modes d'affichage les uns aux autres.

Veuillez consulter l'exemple suivant ci-dessous :

1 : Convertir les balises en ligne en balises de niveau bloc

<!DOCTYPE html>
<html>
    <head>
        <title>行内标签转块级标签</title>
        <style type="text/css">
            a{
                width: 200px;
                height: 200px;
                background-color: red;
                display: block; 
            }
        </style>
    </head>
    <body>  <!--正常情况a标签作为一个行内标签你设置长和宽是没有效果的-->
        <a href="https://www.baidu.com">百度</a>
    </body> <!--而当你用display: block;代表行内标签转为块级标签-->
</html>

Copier après la connexion

Les résultats en cours sont les suivants : cliquez sur n'importe quelle zone ; rouge pour passer à Baidu, afin qu'il puisse élargir la portée des liens.

Balises CSS au niveau du bloc, balises en ligne et conversion de balises de bloc en ligne

2 : Convertir les balises en ligne en balises de bloc en ligne

La différence entre les balises en ligne au niveau du bloc et les balises au niveau du bloc a été mentionnée ci-dessus, et j'ai Je le soulignerai à nouveau. : Les balises au niveau du bloc et les balises au niveau du bloc en ligne peuvent être définies en longueur et en largeur, mais après avoir défini la balise au niveau du bloc

, elle s'enroulera automatiquement et vous ne pourrez pas le faire. mettez autre chose sur cette ligne. Les balises au niveau du bloc en ligne peuvent placer plusieurs balises en ligne sur la même ligne. J'ai un cas à expliquer spécifiquement.

<html>
    <head>
        <title>块级和行内块级</title>
        <style type="text/css">
            a{
                width: 100px;
                height: 100px;
                background-color: green;
                display: inline-block;  
            }
            div{
            width:100px;
            height:100px;
           background-color: red;
           margin-top:10px;  /* margin-top是来设置上下两个块的上下间距，关于盒子下一节我单独来讲*/
           }
        </style>
    </head>
    <body>
        <a href="https://www.baidu.com">百度</a>   <!--通过 display: inline-block;就可以将行内标签转为行内块级标签-->
        <a href="https://www.baidu.com">百度一下</a>
        <div>我是div1</div>   <!--这个是一般的块级标签，会上下分行-->
        <div>我是div2</div>
    </body>
</html>

Copier après la connexion

Résultats en cours d'exécution :

Balises CSS au niveau du bloc, balises en ligne et conversion de balises de bloc en ligne

3. Convertir les balises au niveau du bloc en balises en ligne

<!DOCTYPE html>
<html>
    <head>
        <title>块级标签转行内标签</title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                background-color: red;
                display: inline;
            }
        </style>
    </head>
    <body>
         <div>谷歌</div>  <!--按道理div是块级可以设置长和宽当通过display: inline;它已经是行内标签了，所以长和宽失效-->
         <div>https://www.google.com</div>
    </body>
</html>

Copier après la connexion

L'effet est le suivant :

Balises CSS au niveau du bloc, balises en ligne et conversion de balises de bloc en ligne

J'écrirai ici en premier sur les balises au niveau du bloc, les balises en ligne et les balises au niveau du bloc en ligne. bienvenue également pour me donner plus de conseils après l'avoir lu. Merci.

Pour plus d'articles liés à la conversion des balises CSS au niveau des blocs, des balises en ligne et des balises de bloc en ligne, veuillez faire attention au site Web PHP chinois !