CSS基礎学習十七：CSSの位置づけ Layout_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS基礎学習十七：CSSの位置づけ Layout_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:32 AM

CSS レイアウトの学習を始める前に、まずドキュメントフローの概念を理解しましょう。ドキュメントフローは HTML のレイアウトメカニズムです。ブロックレベルの要素は 1 行を占めますが、

inline 要素は 1 行を占めません。フォームを上から下の行に分割し、各行の要素を左から右に配置します。 CSS の位置決めとフローティングの概要

CSS の位置決め属性を使用すると、要素を見つけることができます。 CSS には、位置決めとフローティングのためのいくつかのプロパティが用意されており、これらのプロパティを使用すると、列レイアウトを作成したり、レイアウトの一部を別の部分に重ねたり、長年にわたって通常は複数のテーブルを使用する必要があったタスクを実行したりできます。位置決めの基本的な考え方はシンプルで、通常の位置、または親要素、別の要素、またはブラウザウィンドウ自体を基準にして要素のボックスを表示する場所を定義できます。明らかに、この機能は非常に強力で驚くべきものです。フローティングは正確な位置決めではありませんが、通常のフローレイアウトでもないことは確かです。

(1) すべては箱です

div、h1、または p 要素は、ブロックレベル要素と呼ばれることがよくあります。これは、これらの要素がコンテンツのブロック、つまり「ブロックボックス」として表示されることを意味します。対照的に、span や Strong

などの要素は、そのコンテンツが 1 行の「インラインボックス」内に表示されるため、「インライン要素」と呼ばれます。 display 属性を使用して、生成されたボックスのクラス

を変更できます。つまり、表示属性を block に設定すると、インライン要素 ( 要素など) をブロックレベルの要素のように動作させることができます。

を使用して表示を none に設定すると、生成された要素にフレームがまったく含まれないようになります。こうすることで、ボックスとそのすべての内容が表示されなくなり、文書内のスペースを占有しなくなります。

ただし、場合によっては、明示的な定義がなくてもブロックレベルの要素が作成されます。これは、ブロックレベルの要素 (div など) の先頭にテキストを追加すると発生します。テキストが段落として定義されていない場合でも、段落として扱われます。

<div>some text<p>Some more text.</p></div>

ログイン後にコピー

この場合、ボックスは、特別に定義された要素に関連付けられていないため、名前のないブロックボックスと呼ばれます。

ブロックレベル要素のテキスト行でも同様の状況が発生します。 3 行のテキストを含む段落があるとします。テキストの各行は名前のないボックスを形成します。スタイルを適用する場所がないため、名前のないブロックやラインボックスにスタイルを直接

適用することはできません (ラインボックスとインラインボックスは 2 つの概念であることに注意してください)。ただし、画面に表示されるものはすべて、ある種のボックスを形成していることを理解するのに役立ちます。 S c (2) CSS の位置決めメカニズム

CSS には、通常のフロー、フローティング、絶対位置の 3 つの基本的な位置決めメカニズムがあります。特に指定がない限り、すべてのボックスは通常のフロー内に配置されます。つまり、通常のフローにおける要素の位置は、(X)HTML における要素の位置によって決まります。

1ブロックレベルのボックスが上から下に順番に配置され、ボックス間の垂直距離はボックスの垂直マージンによって計算されます。

2列のインナーボックスが横一列に配置されています。それらの間隔は、水平方向のパディング、境界線、およびマージンを使用して調整できます。ただし、垂直パディング、境界線、

マージンはインラインボックスの高さには影響しません。ラインによって形成される水平ボックスは、ラインボックス (ラインボックス) と呼ばれます。ラインボックスの高さは、常に、それに含まれるすべてのインライン

ボックスを収容するのに十分です。ただし、行の高さを設定すると、このボックスの高さが大きくなる可能性があります。 S c (3) CSS の配置属性

Position 属性を使用すると、要素フレームの生成方法に影響する 4 種類の配置を選択できます。 4 つのposition 属性値の意味は次のとおりです。

1static: 通常表示 (デフォルト)

要素ボックスは通常どおり生成されます。ブロックレベル要素はドキュメントフローの一部として長方形のボックスを作成しますが、インライン要素は

親要素内に配置される 1 つ以上の行ボックスを作成します。

2relative: 相対配置

設定要素は、初期位置に基づいて一定の距離だけオフセットされ、配置前の形状が保持され、元々占有されていたスペースも保持されます。テキスト

ストリームからの分離はありません。

要素ボックスは一定の距離だけオフセットされます。要素は、配置されていない形状と元のスペースを保持します。要素の位置は通常のフロー内の位置を基準にしているため、相対位置決めは実際には通常のフロー

位置決めモデルの一部とみなされます。

3absolute: 絶対位置決め

要素は、位置決め属性を持つ外側の要素に基づいて一定の距離だけオフセットされます。これは、外側の要素が位置決め属性を持つ要素に対してです

と同等です。存在しないことへ。文書の流れから抜け出します。

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素

原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在

正常流中生成何种类型的框。

4fixed：固定定位

元素会基于视窗(浏览器窗口)偏移某个距离，且固定不随着网页移动而移动。它原来所占的空间不保留。脱离文

档流。元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。

(4)偏移距离

偏移距离：结合定位一起用。设置元素在水平方向(x)或竖直方向(y)的偏移距离。

常用属性有四个：top，bottom，left，right。同一个方向，使用一个即可。

我们就来拿一个top属性来简单了解一下：

top：设置元素基于最初位置的顶部在竖直方向的偏移距离

可能的值：

xpx 正值表示向下移动，负值表示向上移动

xem 同上

x% 基于外层元素的高度的百分

看了这些我们可能不是很明白，我们具体有了实例，就会觉得这很简单，下面讲述具体的定位时，会有这些属性

值的出现，注意他们移动的方向和距离，加深自己对定位和偏移距离的理解。

(5)CSS定位属性允许对元素进行定位的属性：

二相对定位

CSS相对定位：设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间

仍保留。相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，

可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

我们看一张图就能明白：

实例：如果将top设置为20px，那么框将在原位置顶部下面20像素的地方。如果left设置为30像素，那么会在元素

左边创建30像素的空间，也就是将元素向右移动。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS相对定位演示</title><style type="text/css">body {  margin:0px;}div {  height:100px;  width:200px;}#test {  border:#FF00FF solid 1px;  width:700px;  height:400px;}#div_1 {  background-color:#0000FF;}#div_3 {  background-color:#FFFF00;}#box_relative {  background-color:#00FF00;  position: relative;  left: 30px;  top: 20px;}</style></head><body><div id="test">	<div id="div_1">区域1</div>	<div id="box_relative">区域2</div>	<div id="div_3">区域3</div></div></body></html>

ログイン後にコピー

运行的结果为：

注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它

框。

三绝对定位

CSS绝对定位：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另

一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位

后生成一个块级框，而不论原来它在正常流中生成何种类型的框。绝对定位使元素的位置与文档流无关，因此不占据

空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流

中的位置。

普通流中其它元素的布局就像绝对定位的元素不存在一样，看下面的图：

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最

初的包含块。

实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS绝对定位演示</title><style type="text/css">body {margin:0px;}div {  height:100px;  width:200px;}#test {  border:#FF00FF 1px solid;  width:700px;  height:400px;}#div_1 {  background-color:#0000FF;}#div_3 {  background-color:#FFFF00;}#box_relative {  background-color:#00FF00;  position:absolute;  left:30px;  top:20px;}</style></head><body><div id="test">	<div id="div_1">区域1</div>	<div id="box_relative">区域2</div>	<div id="div_3">区域3</div></div></body></html>

ログイン後にコピー

运行的结果为：

对于定位的主要问题是要记住每种定位的意义。相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相

对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

根据用户代理的不同，最初的包含块可能是画布或HTML元素。因为绝对定位的框与文档流无关，所以它们可以

覆盖页面上的其它元素。可以通过设置z-index属性来控制这些框的堆放次序。

三固定定位

CSS固定定位：设置元素会基于视窗(浏览器窗口)偏移某个距离，且固定不随着网页移动而移动。它原来所占的

空间不保留。脱离文档流。元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。

这个我们应该在浏览网页的时候经常见，比如一些广告并不会随着我们向下看内容而消失，它们一直处于基于视

窗的某个位置不动。我们打开新浪首页可以看到：

实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS固定定位演示</title><style type="text/css">body {  margin:0px;}#test {  height:1500px;  width:750px;  margin:auto;  background-color:#999999;  border:#FF00FF solid 1px;}#AD {  background-color:#FFFF00;  width:200px;  height:300px;  position:fixed;  right:0px;  top:100px;}</style> </head><body><div id="test">    <div id="AD">这里我们可以放置一个广告</div></div></body></html>

ログイン後にコピー

运行的结果为：

总结一下：

1相对定位不会失去文档流中的位置，而绝对定位和固定定位都会失去原来在文档流中的位置而被下面的替代；

2无论是相对、绝对还是固定定位，当偏移量超出上面、左边浏览器窗体（或者说超出可视区域）的时候，超出

的内容都会被隐藏；而超出下面和右边的时候，相对定位和固定定位会隐藏超出的部分内容，而绝对定位会出现滚动

条。

3相对、绝对和固定定位都会浮在正常文档流的上面，如果遮盖了正常显示的文档流，可以设置z-index来消除。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。