Maison > Article > interface Web > Explication détaillée des méthodes courantes de classification des opérations CSS

Explication détaillée des méthodes courantes de classification des opérations CSS

高洛峰original: 2017-03-26 11:13:131538parcourir

Cet article explique principalement en détail les méthodes de classification des opérations CSS courantes. Les amis intéressés peuvent se référer à

1 Opération de taille

hauteur Réglage de la hauteur de l'élément

line-height Définir la hauteur de la ligne

.p1{
    width: 400px;
    line-height: normal;
}
 
.p2{
    width: 400px;
    line-height: 200%;
}
 
.p3{
    width: 400px;
    line-height: 50%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对齐</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <p class="p1">This is my web page
        This is my web page
        This is my web page
        This is my web page
        This is my web page
        This is my web page
    </p>
 
    <p class="p2">This is my web page
        This is my web page
        This is my web page
        This is my web page
        This is my web page
        This is my web page
    </p>
 
    <p class="p3">This is my web page
        This is my web page
        This is my web page
        This is my web page
        This is my web page
        This is my web page
    </p>
</body>
</html>

max-height Définir la hauteur maximale de l'élément

max-width Définir la largeur maximale de l'élément

.p1{
    line-height: normal;
    max-width: 250px;
}

min-width Définir la largeur minimale de l'élément

min-height Définir la hauteur minimale de l'élément

width Définir la largeur de l'élément

2. Opération de classification

clear Définit si d'autres éléments flottants sont autorisés sur le côté d'un élément

curseur Spécifie le type de pointeur affiché lorsque l'on pointe sur un élément

p{
    cursor: auto;
}

p{
    cursor: alias;
}

p{
    cursor: cell;
}

display Définir si et quand afficher l'élément

li{
    display: inline;
}
<ul>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
</ul>

float Définir la direction dans laquelle le élément flotte

position Positionne l'élément à une position statique, relative, absolue, fixe

Visibilité Définit si l'élément est visible ou invisible

li{
    display: inline;
    visibility: hidden;
}

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!

Déclaration：

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

Article précédent：Explication détaillée des opérations courantes de la barre de navigation CSSArticle suivant：Explication détaillée des opérations courantes de la barre de navigation CSS

Articles Liés

Voir plus