CSSのディメンションとは何ですか? (コード例)

青灯夜游
リリース: 2018-09-14 17:59:59
オリジナル
2636 人が閲覧しました

この章では、CSS の Dimension とは何ですか?について説明します。 (コード例) .困っている友人は参考にしていただければ幸いです。

1. はじめに

CSS Dimension プロパティを使用すると、要素の高さと幅を制御できます。同様に、行間を広げることもできます。

2. ディメンション (サイズ) 属性値

CSSのディメンションとは何ですか? (コード例)

3.

(1) 例 1: さまざまな要素の高さを設定します

img.normal
{
    height:auto;
}
img.big
{
    height:120px;
}
p.ex
{
    height:100px;
    width:100px;
}
ログイン後にコピー

(2) 例 2: パーセント値を使用して要素の高さを設定します

html {height:100%;}
body {height:100%;}
img.normal {height:auto;}
img.big {height:50%;}
img.small {height:10%;}
ログイン後にコピー

(3) 例 3: ピクセル値を使用して要素の幅を設定します

img {width:200px;}
ログイン後にコピー

(4) 例 4: 要素の最大高さを設定します

p{
    max-height:50px;
    background-color:yellow;
}
ログイン後にコピー

(5) 例 5: パーセント値を使用して要素の最大幅を設定します

p{
    max-width:20%;
    background-color:yellow;
}
ログイン後にコピー

(6) 例 6: 要素の最小高さを設定します

p{
    min-height:100px;
    background-color:yellow;
}
ログイン後にコピー

(7) 例7: 要素の最小幅をピクセル値

p{
    min-width:150px;
    background-color:yellow;
}
ログイン後にコピー
で設定します

以上がCSSのディメンションとは何ですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!