ハン・シュンピン_PHPの入門から習熟まで_ビデオチュートリアル_講義19_ウェブサイトの推奨_ポジショニング_学習ノート_ソースコードの図解

ハン・シュンピン_PHPの入門から習熟まで_ビデオチュートリアル_講義19_ウェブサイトの推奨_ポジショニング_学習ノート_ソースコードの図解_PPT文書の構成

WBOY

リリース： 2016-06-13 13:05:14

オリジナル

956 人が閲覧しました

ハン・シュンピン_PHPの入門から熟練まで_ビデオチュートリアル_講義19_ウェブサイトの推奨事項_ポジショニング_学習ノート_ソースコードの図解_PPT文書の構成
本やビデオが何冊あっても、 自分でプロジェクトを1つ作成する方が良いです。 経験を積むことができます。
オープンソースプロジェクトの場合は、実行し、理解して、2 回変更します。模倣 -------->革新、核心を掴む。

CSS コアコンテンツ - 配置
ポジショニング - 基本的な考え方
CSS 配置プロパティを使用すると、要素を配置できます。位置決め属性値:
static (デフォルト値): 要素ボックスは通常どおり生成されます。ブロックレベル要素はドキュメントフロー/標準フローの一部として長方形のボックスを作成し、インライン要素は親要素内に配置される 1 つ以上のラインボックスを作成します。
relative: 要素ボックスは特定の距離だけオフセットされます。この観点からは、要素は事前に配置された形状を保持しており、元のスペースも保持されているため、要素がまだドキュメントフロー/標準フロー内にあるように見えます。
absolute: 要素ボックスはドキュメントフローから完全に削除され、そのボックスを含むブロックに対して相対的に配置されます。包含ブロックは、文書内の別の要素または最初の包含ブロックである場合があります。通常のドキュメントフローで要素が以前に占めていたスペースは、その要素が存在しないかのように閉じられます。この要素は、通常のフローで最初に生成されたボックスのタイプに関係なく、配置後にブロックレベルのボックスを生成します。
修正: 要素ボックスは位置を絶対に設定するように動作しますが、そのボックスを含むブロックはウィンドウ自体です。

これらの位置付けを理解するのは特に簡単ではないため、ケースを使用して理解することができます。
一般的な配置は 4 つあります
1.静的位置決め (デフォルト値)
2.relative 相対位置 (誰との相対)
3.絶対的な絶対位置（誰を基準とするか）
4.固定固定位置

(1) 静的測位についてはこれ以上説明しません。前に話したのは静的測位です。

(2) 位置決め - 相対位置決め:相対

コンテンツ 2 は元のドキュメントフローから分離されていますが、その位置が他のものによって占められることは期待されていません。私は去ってしまいましたが、その地位はまだ私のものです、 私は無給休暇中です。

コンテンツ 2 の位置を変更
誰に対して相対的ですか? 元の位置を基準にして再配置されます。

ここで、いわゆる相対配置とは、要素が表示されるべき左上隅を基準にして再配置することを指しますが、そのスペースを占有することはできません。

relative.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="relative.css" />
		<title>relative 相对定位</title>
	</head>
	<body>
		<div class="div1">内容1</div>
		<div class="div1" id="spe">内容2</div>
		<div class="div1">内容3</div>
		<div class="div1">内容4</div>
	</body>
</html>

ログイン後にコピー

相対.css

.div1{
	width: 70px;
	height: 30px;
	background: silver;
	float: left;
	margin-left: 5px;
}

#spe{
	position: relative;
	left: 40px;
	top: 100px;
}

ログイン後にコピー

(3) 位置決め - 絶対位置決め絶対

===

上の図から、 のいわゆる絶対配置は、親要素がない場合 (または親要素がある場合)、 が標準フローから離脱した要素に最も近い要素を配置することを意味します。ただし、親要素は標準フローから離脱していません)。本文の左上隅を基準にして配置されます。

絶対位置、どの点が配置されるか。

absolute.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="absolute.css" />
		<title>绝对定位</title>
	</head>
	<body>
		<div class="div1">内容1</div>
		<div class="div1" id="spe">内容2</div>
		<div class="div1">内容3</div>
		<div class="div1">内容4</div>
	</body>
</html>

ログイン後にコピー

絶対.css

*{
	margin: 0px;
	padding: 0px;
}

.div1{
	width: 70px;
	height: 30px;
	background: silver;
	float: left;
	margin-left: 5px;
}

#spe{
	position: absolute; /*绝对定位(究竟对谁)*/
	left: 40px; /*left为正，则向右移动*/
	top: 100px; /*top为正，则向下移动*/
}

ログイン後にコピー

「標準的なフローから外れた要素に最も近い要素の配置」を中心にコンテンツ2をdivで囲みます

absolute2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="absolute2.css" />
		<title>绝对定位2</title>
	</head>
	<body>
		<div class="div1">内容1</div>
		<div class="div1">内容3</div>
		<div class="div1">内容4</div>
		<div class="div2">测试
			<div class="div1" id="spe">内容2</div>	
		</div>
	</body>
</html>

ログイン後にコピー

絶対2.css

*{
	margin: 0px;
	padding: 0px;
}

.div1{
	width: 70px;
	height: 30px;
	background: silver;
	float: left;
	margin-left: 5px;
}

#spe{
	position: absolute;/*绝对定位(究竟对谁)*/
	left: 40px; /*left为正，则向右移动*/
	top: 100px; /*top为正，则向下移动*/
}

.div2{
	width: 200px;
	height: 150px;
	background: pink;
	float: left;
}

ログイン後にコピー

(1) 以下の図に示すように、コンテンツ 2 を div2 でラップし、元のコンテンツ 2 を削除します。コードは上記のとおりです。 div2 は依然として標準フローであるため、コンテンツ 2 は依然として本文の左上隅を基準にして配置されます。

(2) div2 を標準フローから外すと、下図のように表示されます。次に、コンテンツ 2 は本文ではなく、それを含む div2 に従って配置されます。これは、div2 が標準フロー外のコンテンツ 2 に最も近い要素であるためです。「標準の流れから外れた要素に最も近い要素の配置」

div2 の対応する CSS 属性は次のように変更されます

.div2{
	position: relative;
	left: 100px;
	top: 100px;
	width: 200px;
	height: 150px;
	background: pink;
	float: left;
}

ログイン後にコピー

动手操作就明白。

（4）定位――fixed定位（绝绝对对）
把内容2修改为绝对定位，则显示如下图所示。不管谁包我还是不包我，我永远对视窗的左上角，body的左上角定位，绝绝对对。

相应的内容2的css属性修改如下

#spe{
	/*position: absolute;*/ /*绝对定位(究竟对谁)*/
	position: fixed;
	left: 40px; /*left为正，则向右移动*/
	top: 100px; /*top为正，则向下移动*/
}

ログイン後にコピー

所谓fixed定位就是不管怎样，总是以视窗的左上角定位。

注意：left和top对static没有效果的，★★★static静态定位的左右移动用的margin★★★

z-index
设置对象的层叠顺序

z-index的值越小，越在下面

用于设置对象（div）显示时候，层叠的属性，z-index值越小，则越在下层显示。

韩顺平_php从入门到精通_视频教程_学习笔记_源代码图解_PPT文档整理_目录