CSS実践チュートリアル (3)

12． BOX のスタイルを制御する

スタイル シートは、オブジェクトの操作可能なすべてのスタイルを保存するコンテナー BOX を指定します。これには、オブジェクト自体、境界線の空白、オブジェクトの境界線、およびオブジェクトのギャップの 4 つの側面が含まれます。



これらの属性の意味と属性間の関係をより深く理解するために、次の図を見てください:

1.ボーダーブランク(MARGIN)

図に示すように、BOXモデルの最外層に位置し、4つの属性を含みます。

形式は次のとおりです:

・margin-top: 上マージン距離

・margin-right: 右マージン距離

・margin-bottom: 下マージン距離

・margin-left: 左マージン距離

空白 距離は長さの単位をもつ数値として表現できます。

上記の属性の簡略化された方法である margin を使用する場合、長さの単位を持つ 4 つの連続する数値を追加して、それぞれ margin-top、margin-right、margin-bottom、および margin-left を表すことができます。それぞれの間にはギャップがあります。番号はスペースで区切ります。

2.オブジェクトボーダー(BORDER)

図に示すように、ボーダーブランクとオブジェクトギャップの間に位置し、7つの属性を含みます。

形式は次のとおりです:

・border-top: 上枠の幅

・border-right: 右枠の幅

・border-bottom: 下枠の幅

・border-left: 左枠の幅

・border -width: すべてのボーダーの幅

・border-color: ボーダーの色

・border-style: ボーダーのスタイルパラメータ

このうち、border-widthはすべてのボーダーの幅を一度に設定でき、border-colorはセットになります4 つの枠線の色を同時に書き、スペースで区切って 4 色を連続して書くことができます。上記連続的に設定されるボーダーは、ボーダー上、ボーダー右、ボーダー下、ボーダー左の順となる。

Border-style は、複数の境界線スタイル パラメータも含まれるため、他の属性より少し複雑です:

·none: 境界線なし。

・点線: 境界線は点線です。

・破線: 境界線は長短の線です。

・solid: 境界線は実線です。

・double：枠線が二重線になります。

・groove: 色属性に応じて異なる効果の3D境界線を表示

・ridge: カラー属性に応じて異なる効果の3D境界線を表示

・inset: 色属性に応じて異なる効果の3D境界線を表示

・outset:色の属性に応じて異なる効果を持つ3D境界線を表示します 異なる効果を持つ3D境界線を表示します

3.オブジェクトギャップ (PADDING)

図に示すように、オブジェクトの境界とオブジェクトの間に位置し、4 つの属性が含まれます。

基本的な形式は次のとおりです:

・padding-top: 上のギャップ

・padding-right: 右のギャップ

・padding-bottom: 下のギャップ

・padding-left: 左のギャップ

MARGIN と同様, PADDING は、パディングを使用してすべてのオブジェクトのギャップを一度に設定することもできます。形式は MARGIN と似ているため、1 つずつ列挙しません。
13。表示制御のスタイル

基本的な形式は以下の通りです:

display: パラメータ

パラメータ値の範囲:

・block (デフォルト): オブジェクトの前後で改行

・inline: オブジェクトの前後で改行なしオブジェクト

・list-item: オブジェクトの前後に改行、箇条書き記号を追加

・none: 表示なし

14。ホワイトスペース制御スタイル

基本的な形式は次のとおりです:

ホワイトスペース属性は、要素内のスペースの処理方法を決定します。

white-space: パラメータ

パラメータ値の範囲:

normal: 複数のスペースを1つに置き換えて表示

PRe: 入力されたスペースを忠実に表示

nowrap: 改行を禁止

ただし、write-space であることに注意してください。もブロックレベルの属性です。

.全文完成

上記は CSS 実践チュートリアル (3) の内容です。その他の関連記事については、PHP 中国語 Web サイト (www.php.cn) に注目してください。