HTMLで位置決めを実装する方法-htmlチュートリアル-php.cn

HTMLで位置決めを実装する方法

零到壹度

リリース： 2018-03-29 11:54:48

オリジナル

3299 人が閲覧しました

この記事は主に HTML での位置決めの実装方法に関する記事を共有するものであり、参考になると思います。編集者をフォローして見てみましょう。

1. CSS の位置決め (Posotioning) 属性を使用すると、要素を配置できます。

static (デフォルト値): 要素ボックスは通常どおり生成されます。ブロック要素はドキュメントフロー/標準フローの一部として長方形のフレームを生成します。インライン要素は 1 つ以上のラインボックスを作成し、それらを親要素に配置します。

相対: 要素ボックスは特定の位置から外れ、要素は残ります。配置前の形状、元々占有していたスペースはまだ保持されているこの観点から、変更された要素はまだドキュメントフロー/標準フロー内にあるように見えます

絶対: 要素はドキュメントフローから完全に削除され、相対的になります。その収容位置に。包含ブロックは、文書内の別の要素または最初の包含ブロックである場合があります。通常のドキュメントフローで要素が元々占有していたスペースは、その要素が存在しないかのように閉じられ、通常のフローで元々どのようなタイプのボックスであったかに関係なく、要素はブロックレベルのボックスに配置されます。

修正: 要素のパフォーマンスは、含まれているブロックがウィンドウ自体 (ボディ) であることを除いて絶対と同様です

2. 相対の概要

この属性値を使用する要素は、座標を基準にして上と左を使用して配置されます元の位置の左上隅の

コード:

 <style type="text/css">
       #main{
	      width:800px;
		  height:400px;
		  margin:0 auto;
		  border:1px solid blue;
	   }
	   .p{
	     width:110px;
		 height:100px;
		 background:yellow;
		 margin-left:10px;
		 float:left;
	   }
   
   </style>
 </head>
 <body>
    <p id="main">
	    <p class="p">p1</p>
		<p class="p">p2</p>
		<p class="p">p3</p>
		<p class="p">p4</p>
	</p>
 </body>

ログイン後にコピー

レンダリング: