CSSの一般的な操作分類方法を詳しく解説-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

高洛峰

Mar 26, 2017 am 11:13 AM

css

この記事では主に一般的な 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 までご連絡ください。

Draggin＆＃039;ドロップピン＆＃039;反応でApr 17, 2025 am 11:52 AM

React Ecosystemは、すべてがドラッグアンドドロップの相互作用に焦点を合わせている多くのライブラリを提供します。 React-Dnd、React-Beautiful-Dnd、

高速ソフトウェアApr 17, 2025 am 11:49 AM

最近、高速ソフトウェアについて素晴らしい相互接続されたことがいくつかありました。

バックグラウンドクリップ付きのネストされたグラデーションApr 17, 2025 am 11:47 AM

バックグラウンドクリップをすべて頻繁に使用すると言うことができます。私は、日々のCSS作業ではほとんど使用されていない＆＃039; dを賭けています。しかし、私はステファン・ジュディスの投稿でそれを思い出しました、

ReackAnimationFrameを使用してReact Hooksを使用しますApr 17, 2025 am 11:46 AM

RequestAnimationFrameでアニメーション化するのは簡単なはずですが、Reactのドキュメントを徹底的に読んでいない場合は、おそらくいくつかのことに遭遇するでしょう

ページの上部にスクロールする必要がありますか？Apr 17, 2025 am 11:45 AM

おそらく、それをユーザーに提供する最も簡単な方法は、要素上のIDをターゲットにするリンクです。だから...

Best（GraphQL）APIはあなたが書くものですApr 17, 2025 am 11:36 AM

聞いてください、私はGraphQLの専門家ではありませんが、私はそれで働くことを楽しんでいます。フロントエンド開発者としてデータを公開する方法はかなりクールです。メニューのようなものです

毎週のプラットフォームニュース：テキスト間隔のブックマークレット、トップレベルの待望、新しいアンプロードインジケーターApr 17, 2025 am 11:26 AM

今週のラウンドアップ、タイポグラフィを検査するための便利なブックマークレットである。

ボーダー半径を保存しながら箱を拡張するためのさまざまな方法Apr 17, 2025 am 11:19 AM

私は最近、Codepenの興味深い変化に気づきました。ホームページにペンをホバリングすると、丸い角が背面に拡大する長方形があります。

See all articles

ホットAIツール

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。