バックエンド プログラマーのフロントエンドへの道 06 レイアウト モデル、色の値、長さの値_html/css_WEB-ITnose

ディレクトリ

レイアウトモデル

フローモデル(Flow)

フロートモデル(Float)

レイヤーモデル(Layer)

色の値

長さの値

1. レイアウトモデル

Web ページのレイアウトモデル: 個人的な理解では、HTML 内のさまざまな要素を配置することです。配置方法はフローモデル、フローティングモデル、レイヤーモデルの3種類に分けられます。

2. フローモデル

これは、Web ページのデフォルトのレイアウト モードです。

機能:

1. ブロック要素 は、デフォルト状態ではブロック要素の幅が 100% であるため、 を含む要素 内で上から下に垂直に分散されます。 (1行のみ)
2. インライン要素は、含まれる要素内で左から右に水平方向に表示されます。 (他のインライン要素と同じ行に)

3. フローティング モデル

たとえば、2 つのブロック レベル要素を同じ行に配置したい場合に使用します。 、フローティング モデルを使用できます。

特定のマニフェスト: CSS の float 属性を使用して要素のフローティングを制御できます。

4. レイヤーモデル

Photoshop のレイヤー編集機能と同様に、各 HTML 要素を Web ページ上に正確に配置できます。

具体的な操作: CSS のposition 属性を使用してレイヤーモデルをサポートします。有型レイヤー モデルには 3 つの形式があります:

1、絶対配置: 絶対

要素をドキュメント ストリームの外にドラッグし、Left、RIGHT、TOP、BOTTOM の属性を最も近いものに使用します

最も近い 位置決め属性

を持つブロック

を含む 親が位置決めされます。このようなブロックが在にない場合、それは Body 要素に対して相対的です。つまり、 ブラウザ ウィンドウ

と比較されます。

2、相対位置（位置：relative）

前の位置に対してオフセットを行います

。移動の方向と振幅は左、右、上、下の属性によって決定され、オフセット前の位置が保持されます。

3. 固定位置 (位置: 固定)

絶対と似ていますが、ビュー自体 (画面内の Web ページウィンドウ

) に対して相対的です。ビュー自体は固定されているため、

ブラウザウィンドウの画面位置を画面上で移動するか、ブラウザウィンドウの表示サイズを変更しない限り、ブラウザウィンドウのスクロールバーがスクロールしても変化しません , したがって、固定位置要素は常にブラウザ ウィンドウ内のビューのどこかに配置され、ドキュメントの流れの影響を受けません。

4. 絶対と相対の組み合わせ

上記の絶対の重要なポイントを確認してください: 1. 参照: その親要素 2. そして、参照は位置決めされた要素である必要があります。 RELATIVE の重要なポイント: 1. 参考:

したがって、サブ要素を親要素に対して相対的に配置する必要がある場合は、Relative を使用して親要素を位置決め要素に変更できます。子要素は絶対を使用します。位置決めされました。

5. カラー値

Web ページのカラー設定は、フォントの色 (color)、背景の色 (background-color)、境界線の色 (border) などを含めて非常に重要です。色を設定する方法もたくさんあります。 :

1. 英語コマンド color

例: p{color:red;} は色を赤に設定します。

2. RGB カラー

これは Photoshop の RGB カラーと一致しており、R (赤)、G (緑)、B (青) の 3 つの色の比率によって一致します。

 p{color:rgb(133,45,200);}

各項目の値は、0 ～ 255 の整数、または 0% ～ 100% の割合です。例:

 p{color:rgb(20%,33%,25%);}

3. 16 進数の色

         这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是RGB设置，但是其每一项的值由 0-255 变成了十六进制00-ff。         

     p{color:#00ffff;}

<strong>六、长度值</strong><br /> 目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。　　<br /> 1、像素<br />       像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。<br />    2、em<br />      就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：

p{font-size:12px;text-indent:2em;}

         上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。

         特殊情况：当给 font-size 设置单位为 em 时，此时计算的标准以 它的父元素的 font-size 为基础。

         3、百分比          

p{font-size:12px;line-height:130%}

        设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。

<br /><br /><br /><br />