ホームページ > 記事 > ウェブフロントエンド > 基本的なページ レイアウト div+css_html/css_WEB-ITnose
基本的なページ レイアウト div+css_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:59:451001ブラウズ
記事が役に立った場合は、「いいね」とフォローをしていただければ、それが私の最大のモチベーションになります。
1. ボックス モデルを理解する
1.1 ボックス モデルとは
図に示すように:
アップロード/ attachment/zhishi/upload /20160115/5698a2b319b6a.jpg
1.2. ボックスモデルナレッジポイント分析
1.2.1.content
ドキュメントの主要部分テキスト画像にすることもできます。または
1.2.2.padding
タグです。これはコンテンツと境界線の間の距離です。パディング距離は、パディングと省略することもできます。 10px 20px 5px 15px 上から時計回りに上下 右 左
1.2.3.border
ボーダーはこのボックスのシェルです もちろん、これも独自のものです。 width 共通のスタイル: 1.width: 1px---- ---枠線の幅 2.style:solid-----枠線のスタイル、一般的なものは実線(実線)/破線(破線)です。 )/dotted (点線) 3.border-color:red------ -----ボーダーカラー
1.2.4.margin
ボックスモデル間の距離マージン距離には、マージンの略語も使用できます: 上部の時針から右上、左下、10px、20px、5px、15px
1.3 ボックス モデルの高さと幅
height (hright) width (width) 1.3.1.css で定義される
は、パディングの Height と width 内の領域、つまりコンテンツの高さと幅を指します。
1.3.2. ボックスの実際の高さと幅
ボックスの高さ=(margin-top)+(padding-top)+content+(padding-bottom)+(margin-bottom) box width =(margin-left)+(padding-left)+content+(padding-right)+(margin-right)
2. 要素レイアウトモデル
2.1. フローモデル)
2.1.1. フロー モデルの概要
は、デフォルトの Web ページ レイアウト モードです。つまり、デフォルトでは、Web ページはフロー モデルに基づいて Web コンテンツを配布します。
2.1.2. フロー モデルとは何ですか?
フロー モデルには次の特徴があります: 1) ブロック要素は親要素内で上から下に順番に拡張されます。は 1 行に排他的です)。これは、ブロック要素のデフォルト幅が 100% であるためです。 2) インライン要素は親要素内で左から右に水平に配置されます。
2.2. フローティングモデル (float)
2.2.1 フローティングモデルの定義
float 属性は、要素がどの方向にフローティングするかを定義します。
2.2.2 フローティングモデルが必要な理由
フローモデルでは、ブロック要素を 2 つ並べて表示したい場合、次のようにする必要があります。フローティングモデルを使用します。
2.2.3 Float モデルの使用法
使用法: float:left/right/inherit-----要素は左と右に浮動します。それぞれ、 、および親要素から継承します。
2.3. レイヤー モデル
2.3.1. レイヤー モデルとは
レイヤー モデルは、Photoshop のレイヤー編集機能のようなもので、レイヤーごとに正確に行うことができます。位置決め操作。レイヤー モデルには 3 つの形式があります: 1). 絶対位置決め: 絶対 2). 相対位置決め: 相対 3). 固定位置決め: 固定
2.3.2 絶対位置決め (絶対)
コード:
div{ position:absolute; left:20px; top:30px;} この div 要素は、最も近い親要素内に絶対的に配置されるため、その左の値 は直接 に 20px に設定され、上の値は 30px に直接設定します。
2.3.3. 相対配置 (relate)
定義: 通常の位置を基準にして相対的に配置された要素を生成します。したがって、left:20 は、要素 ;
2.3.4. 固定位置 (固定)20px を追加します。 🎜> 定義 : ブラウザ ウィンドウに対して相対的に配置される、絶対配置要素を生成します。したがって、bottom:0; を設定すると、要素は常にブラウザの下部に表示されます。 3. div を使用してページをレイアウトします
3.1. div 要素を使用して各領域を表します:
<body> <div id="container"> <div id="header">头部</div> <div id="sidebar">侧栏</div> <div id="content">文本主体</div> <div id="footer">尾部</div </div></body>3.2. CSS を使用して領域のサイズを設定します (ここでは区別するために枠線が使用されています):
<style type="text/css"> body{ margin: 0px; } div#container{ overflow: auto;-------------容器大小自适应 } div#header{ width: 1421px; border: 1px solid red; height:100px; } div#sidebar{ width:300px; height:520px; border: 1px solid red;------------简写 float: left; } div#content{ width:1119px; height:520px; border: 1px solid green; float: right;-------------浮动 } div#footer{ height: 89px; border: 1px solid yellow; clear: both;--------------清除左右侧浮动 }</style> 図に示すように
Upload/attachment/zhishi/upload/20160115/5698a899378c3.jpg
3.3. div コード内のナレッジポイントの分析
3.3.1.border
ここでの境界線: 1px の赤は省略形であり、
と同等です。
border-width:1px; border-style:solid; border-color:red;3.3.2 .float
float 属性は、div レイアウトで最も基本的で一般的に使用される属性であり、
3.3.3.clear
float 属性を使用して行 (複数の列) に複数の div を設定した後、次の処理を開始する前に、clear 属性を使用して float をクリアするのが最善です。そうしないと、上記のレイアウトが以下に影響します。共通属性:clear:left/right/both は、それぞれ、左側、右側、左側に対応します。
浮動要素は両側に表示できません。