css+div Webデザイン(2) レイアウトとポジショニング_html/css

css+div Webデザイン(2) レイアウトとポジショニング_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:00:18

オリジナル

1645 人が閲覧しました

Web デザインでは、ページ上の各モジュールの位置を制御できることが非常に重要です。従来のテーブル配置とは異なり、css+div 配置方法はより柔軟です。このブログでは css+div を紹介します。 . レイアウトと配置。

1. ボックスモデル

図からわかるように、ボックスモデルのスコープにはマージン、ボーダー、パディング、およびコンテンツが含まれます。

1 つ指摘する必要があるのは、IE のボックスモデル表現が Firefox のものと若干異なることです。

IE ボックスモデルのコンテンツ部分には、ボーダーとパディングが含まれます。

Firefox のボックスモデルのコンテンツ部分には、ボーダーとパディングが含まれません。

2. 要素の配置

1. Float の配置

float は浮動を意味し、CSS レイアウトで非常に重要な役割を果たします。

<span style="font-size:18px;"><html><head><title>float属性 clear</title><style type="text/css"><!--body{	margin:5px;	font-family:Arial;	font-size:13px;}.block1{	padding-left:10px;	margin-right:10px;	float:left;					/* 块1向左浮动 */}h3{	background-color:#a5d1ff;	/* 标题的背景色 */	border:1px dotted #222222;	/* 标题边框 */	 clear:left;					/*清除float对左侧的影响 */}--></style>   </head><body>	<div class="block1"><img src="building2.jpg" border="0"></div>		<div>对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。本章从CSS的基本概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，并对CSS进行初步的体验。</div>	<h3>CSS的概念</h3>	<div>CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</div></body></html></span>

ログイン後にコピー

この時の結果

float:left をコメントアウトすると、結果は次のようになります:

2. 位置の位置決め

a,静的 | いいえ位置決め

Position: static は、すべての要素の位置決めのデフォルト値です。

<span style="font-size:18px;">#div-1 { position:static;}</span>

ログイン後にコピー

b、position:relative

を使用する場合は、通常、指定する必要はありません。 Position:relative の場合、要素の位置を決定するには、top、bottom、left、right4 属性が必要です。
div-1 レイヤーを下に 20 ピクセル、左に 40 ピクセル移動させたい場合:

<span style="font-size:18px;">#div-1 { position:relative; top:20px; left:40px;}</span>

ログイン後にコピー

c,position:absolute|絶対配置

絶対配置を使用しているレイヤーの前または後ろのレイヤーは、このレイヤーが存在しないため、まったく影響しません。

3. z-index の配置:

z-index 属性は、オーバーラップするときに上部と下部の位置を配置するために使用されます。

<span style="font-size:18px;"><html><head><title>z-index属性</title><style type="text/css"><!--body{	margin:10px;	font-family:Arial;	font-size:13px;}#block1{	background-color:#fff0ac;	border:1px dashed #000000;	padding:10px;	position:absolute;	left:20px;	top:30px;	z-index:1;					/* 高低值1 */}#block2{	background-color:#ffc24c;	border:1px dashed #000000;	padding:10px;	position:absolute;	left:40px;	top:50px;	z-index:0;					/* 高低值0 */}#block3{	background-color:#c7ff9d;	border:1px dashed #000000;	padding:10px;	position:absolute;	left:60px;	top:70px;	z-index:-1;					/* 高低值-1 */}--></style>   </head><body>	<div id="block1">AAAAAAAA</div>	<div id="block2">BBBBBBBB</div>	<div id="block3">CCCCCCCC</div></body></html></span>

ログイン後にコピー

結果は以下の通りです:

以上が css+div のレイアウトと配置です次回のブログでは、css と javascript の混合使用について紹介します。 css と jquery、 css と ajax 。