ホームページ  >  記事  >  ウェブフロントエンド  >  CSSの一般的な操作分類方法を詳しく解説

CSSの一般的な操作分類方法を詳しく解説

高洛峰
高洛峰オリジナル
2017-03-26 11:13:131520ブラウズ

この記事では主に一般的な CSS 操作の分類方法を詳しく説明していますので、興味のある方は参考にしてください

1. サイズ操作

height 要素の高さを設定します

line-height 行の高さを設定します

.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 を設定します要素の最大の高さを設定します

max-width 要素の最大の幅を設定します

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

min-width 要素の最小の幅を設定します

min-height 要素の最小の高さを設定します

width Set要素の幅

2. 分類操作

クリア 要素の横に他の浮動要素を許可するかどうかを設定します

カーソル 要素をポイントするときに表示されるポインタの種類を指定します

p{
    cursor: auto;
}
p{
    cursor: alias;
}
p{
    cursor: cell;
}

表示するかどうかを設定します要素をいつ表示するか

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

float 要素が浮動する方向を定義します

Position 要素を静的、相対、絶対、固定位置に配置します

Visibility 要素が表示されるか非表示になるかを設定します

li{
    display: inline;
    visibility: hidden;
}
li{
    display: inline;
    visibility: visible;
}

以上がCSSの一般的な操作分類方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。