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

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像素的空间，也就是将元素向右移动。

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>CSS</title>