基本的なページレイアウト div+css_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:59:45

オリジナル

1021 人が閲覧しました

記事が役に立った場合は、「いいね」とフォローをしていただければ、それが私の最大のモチベーションになります。

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 レイアウトで最も基本的で一般的に使用される属性であり、

関数を実装するために使用されます。タグはデフォルトでは 1 行に 1 つしか表示できませんが、Float 属性を使用すると 1 行を実現できます。複数の div を表示する機能を説明する最も直接的な方法は、テーブルレイアウトの複数列機能を実現することです。

3.3.3.clear

float 属性を使用して行 (複数の列) に複数の div を設定した後、次の処理を開始する前に、clear 属性を使用して float をクリアするのが最善です。そうしないと、上記のレイアウトが以下に影響します。共通属性:clear:left/right/both は、それぞれ、左側、右側、左側に対応します。

浮動要素は両側に表示できません。