戦闘へのWebフロントエンドの取得:CSSポジショニング

位置決めされているものまず、

ページ上の要素の位置を変更します

第二に、分類の位置付け

1、普通流定位

2、浮动定位

3、相对定位

4、绝对定位

5、固定定位

第三に、通常のストリームのポジショニング

ページモードの要素のデフォルトの位置、左から右へ、上から下への既定のドキュメントフロー、

1、各要素は、ページ内に独自の空間を有し

図2に示すように、各要素は、親要素の左上隅から表示されます

図3に示すように、ブロック要素は、上から下に向かって漸進的方法で要素ごとに別々の行に配置されています

図4に示すように、線要素は行の複数の表示要素である、左から右に一つずつ配置されています

第四に、フロート位置

図1に示すように、フロート要素が設けられている場合、充填ビットの後ろにある要素の前に流れから既定のドキュメント要素。現在の要素は、現在の行にあること、または左から右になります

フロート:左、右、なし

特長:

(1)は、浮動要素と、それは、ドキュメントフローのうちで、前面と背面に席を埋める、ページ上のスペースを占有しません

(2)フロートは、親要素/右側の左側に位置するであろう、または他のフローティング要素はエッジを有します

(3)は、行のブロックレベルの表示複数のフローティング要素の問題を解決することです

図2に示すように、フローティング開始剤の特別なケース

優先的に続く左/右を浮動:浮動要素は、フィットラップいくつかのディスプレイ、ラップ表示のルールではないでしょう以下のすべての親要素よりもが表示され、(1)

(2)浮动元素占位,浮动元素会根据浮动方向,占据方向上的位置,不让其他后面浮动元素占用

幅が定義されていない場合Bは、フローティング要素と、幅が標準となります

FLOATED要素、ブロックレベル要素となり、幅及び高さを設けてもよい一旦C、上下の余白を設けてもよいです

ブロック浮動要素内のD、テキスト、インライン要素、行要素が下方に押圧されることはありません。しかし、巧みに表示され、それらの要素の周りに浮いすべての浮動要素を回避

E、透明フロート:浮動要素、それは何らかの影響後続の要素(フロントで席を埋めるために、後続の要素)を持って、後続の要素が前方席を埋めるためにしたくない場合は、その後、後続の要素を明確に設定し、もたらしフロートの前でクリアされます後影響を及ぼす

クリア:左/右/両方

、何の高い親要素をブロック要素の高さが提供されていない場合は、標準の内部要素の高さを高さをつぶさないが、内部の要素は浮動要素であれば、浮動要素は、ページ上のスペースを占有しないF、

解决方案:

    1、直接为父元素设置高度,弊端:不知到父元素高度

    2、父元素也浮动,弊端:浮动会影响后续元素

    3、overflow:hidden,弊端:当元素真的需要显示溢出内容时,就显示不出来了

    4、在父元素中追加一个空的块级元素,并设置clear:both

3、ディスプレイ

1、ディスプレイ

表示

ページの表示素子の形態で(ブロックレベル、ブロック内の行線)

値:

(1)なし:非表示にするには、要素を表示しない、位置を占めません。

(2)ブロック:同じ要素及び形態のブロックレベル要素をしようが、機能:別のライン、幅及び高さは、垂直方向の余白を設けてもよいです

(3)インライン:要素共通線を複数、幅及び高さは、垂直マージンを設定することができない。機能などの要素とインライン要素をう

(4)インラインブロック:行の表示素子の複数が、設定された高と広い垂直のマージンとすることができる。同じ行内う症状およびブロック要素が、特徴

(5)表:メーク表式と同じ特徴の要素:ノルムにサイズ、別の行の各要素は、サイズを変更することができます

2、ディスプレイ

可視

visible:默认可见

hidden:隐藏

表示:差が隠さ::なしと文書フローから隠された視認性の表示、ページのスペースを占有しない、文書の流れから逸脱することなく、視認性、スペースがページによって占められ

3、透明性

不透明度

値:0から1まで小さくより透明

不透明度とRGBAの違い:透明色の範囲で、要素の不透明度の行為、関連する要素が続くが、RGBAだけで現在の要素の透明度を変更、サブ要素に適用することができ、それは他の要素に影響を与えません。

図4に示すように、垂直配向

垂直ALIGN

値:トップ/ミドル/ボトム

使用します。

(1)table标签中,控制文字的垂直对齐,取值:top/middle/bottom

(2)img标签,控制图片与前后文字的垂直对齐方式,取值:top/middle/bottom/baseline

5、カーソル

カーソル:

値:

(1)default:箭头

(2)pointer:手

(3)text:I

(4)crosshair:十字

(5)wait:沙漏或者转圈

(6)help:问号

第五に、ポジショニング

図1に示すように、位置決め特性

ポジション:

値:

(1)static: 默认值,静态,默认文档流

(2)relative:相对定位

(3)absolute:绝对定位

(4)fixed:固定定位

    专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)

要素が相対位置に設定されている/絶対/任意の値に固定され、要素は、標的要素と呼ばれ

Offsetプロパティ

トップ/ボトム/左/右

左:100pxに100pxにににシフトすることにより

2、の相対位置

元の位置に要素の相対距離をオフセット、デフォルトドキュメントフローから逸脱することなく、ページ上の位置は、席を埋めるために他の要素ではありません

構文:位置:相対;オフセット性で使用します

用途:祖先絶対配置要素として、

(1)位置微调

図3に示すように、絶対位置

要素が前方の席を埋めるだろう後に絶対配置要素は、既定のドキュメントの流出する、絶対配置要素は、本体に対してではなく、すべての祖先要素が配置されている場合は、最近、ローカリゼーションを達成するように配置している彼の先祖からの相対になりますローカリゼーションを達成するために

プロパティ:位置:絶対;を使用してオフセット性

カスケード効果があります:機会

図4に示すように、固定された位置

要素は、要素がスクロールバーの位置を超える変更しないページ上の特定の位置に固定されていますが、エリア内に固定されています

構文:

位置:フィックス;を使用してオフセット性

注意:

(1)固定定位脱离文档流,不占页面空间

(2)固定定位元素变为块级元素

(3)相对于body实现位置的偏移

重なり順

要素位置の要素になってきた、私が重なり順を変更したい、そこに積層してもよいです

Zインデックス

値:ユニット番号、大きな子供は常に位置決め要素の上に、親要素の要素になります番号、ディスプレイ上の複数の要素、父と息子の間の要素の無効のz-indexが、唯一のzインデックスを使用する必要があります

おすすめ

転載: blog.51cto.com/14592820/2464371
おすすめ