コンピューター, 情報技術
トップはめ込みCSS:目次ランキング
CSSレイアウトは常に長方形となっています。 任意の滑らかなライン - 開発者の能力。 スタイルルールは、画面の解像度内スムーズなページのフォームを与えるために十分なオプションを提供します。 しかし、任意のレイアウト要素 - それは、常に位置情報は、CSSのルールによって支配されている長方形です。
すべての側面にパディングは、それが絶対的に配置されたときにページ上のすべての要素のために重要であり、上マージンは、それが様々な要素、特に小文字のために重要である、特にので、CSSによって決定されます。
基本的な位置決めルール
ブロック部材は、内部要素のための一般概して、(マージン)である素子の側面から逸脱するくぼみ(パディング)とを使用することもできる枠(ボーダー)の幅を有しています。
特に重要なのは、上マージンです。 ユニット内のCSSルールは絶対及び相対そのブロック内の要素を配置内部パディング規則を接続します。
CSS-ルールの通常の練習:あなたは、トップ/ボトムおよび左/右または個別に各側に対になって、平等にすべての側面に余白を指定することができます。 たとえば、
- マージン:10pxの;
- パディング:10px20px。
- パディング:10px20px30px40px。
第1ケース部材に、それが配置されている外側容器の側面からオフセットインストールされています。 上部と下部の余白が10pxのある第二のケースでは、左及び右 - 20ピクセル。 第三の場合には、すべての側面でのパディングの寸法:上、右、下と左。
これらすべてのケースでは、 トップマージンCSSは10ピクセルです。
要素の位置を変更ルール
レイアウト要素が絶対的に配置されていない場合、それは一般的な注文フォームのページです。
我々はCSS scCurrInfo要素で上マージンを定義する場合達成、およびLiのレベルであればされる-なし。
この例では、パディング規則の使用:40ピクセル。 これは、適切なルールが80pxに幅と高さを減らすことが必要です。 それ以外の場合はscCurrInfoブロックサイズは、外部ユニットを超えて取得します。
あなたは記述ルールscCurrInfoからパディングを削除するが、リスト項目のスタイル、のみ上マージンの説明では20ピクセルの値と、それを追加した場合。 CSSは、他の当事者にこの値を適用しません。
当然のことながら、インデントルールのような使用は、各要素のLiに適用されます。
一般診療内容のフォーマット
一部の開発者は完璧、マイルに達し、半分のページは、要素をブロックします。 テーブルから始まり、ブロックの上に、独自の教育プロセスを終了-どうやら、これは古典的な方法です。
ブロックレイアウトに固有の自由度、魅惑、および想像の開発者は、厳格な平板ルールに限定することができないだけだけ水平方向および垂直方向にのみ細胞融合をランク付けします。 本来のリレーショナルアイデアは何もありません。
また、テーブルは、別に明らかな欠点から、多くの質的な利点があります。 トップにインデントを作成、CSSは(下から-これは特別な瞬間です)右に、左にパディングすることができます。 ルールは、あなたが両方の垂直および水平に整列表のセルを制御することができます。 セルのスタイルでそれらを組み合わせて、スタイルのシリーズを使用すると、コンテンツの複雑なプレゼンテーションを形成することができます。
長方形の形でページの習慣的な表現 (ブロックレイアウト) テーブルでそれを妨げるものではありません。 また、これは矩形であるが、彼らは、つまり、また表のセルであるブロックのルールを補完する独自のルールを持っています。
絶対位置
; ブロックルールPOSITION: 絶対; それが配置されているブロックに対して、その座標で指定された場所に配置されます。
CSSルールの特徴- 「練習-真実の最高基準」ほとんどの場合、クロスブラウザの互換性とレイアウトが手作業で行われ、特に、カスケードスタイルシートのための好ましいハイグレード研究マニュアル。
テーブルを使用すると、多くの場合、内容のバイアスの問題をセルにつながります。 ブロックでの同様のシフトは必ずしもなく、すべての項目の影響を与えます。 実験することで、所望の結果を達成することができます。 些細なタスク: トップマージンを削除する方法、CSSは常に些細な方法では解決しません。
それは人気のあるコンテンツ管理システムのウェブサイトのいずれかの内部のページ要素を課すことが必要であるとき、いくつかのケースでは、あなたはまだ実験的な練習にだけでなく、注意を払う必要があります、だけでなく、同僚の経験を参照してください。
Similar articles
Trending Now