CSS徹底研究(3)-floating,positioning_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS徹底研究(3)-floating,positioning_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

リリース： 2016-06-24 11:20:18

オリジナル

1211 人が閲覧しました

CSS 徹底学習(3) - float、位置決め

一 . Float float

I . 定義とルール

float のデフォルトは none で、標準的なフロー状況に対応します。 float: left; の場合、要素は親要素の左側に近づき、標準のフローから外れます。同時に、幅は親コンテナを満たすように伸びることはなく、親要素に基づいて決定されます。独自のコンテンツ。

II. デモのルール

コードを準備します

<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> body { margin: 0; padding: 0; } #father { background-color: cyan; /*父级div 没有定位 造成子div的margin-top传递给父级*/ position: absolute; } #father * { margin: 10px; padding: 10px; border: 1px dashed red; } #son1 { } #son2 { } #son3 { } </style></head><body> <div id="father"> <div id="son1">#son1</div> <div id="son2">#son2</div> <div id="son3">#son3-son3son3son3</div> <p> 这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字 </p> </div></body></html>

ログイン後にコピー

表示効果は
1と2が標準ストリームから外れ、標準ストリームのson3が外れていることがわかります。 Son3 が元の Son1 の位置を置き換え、son1 の左境界線、son2 の右境界線が Son3 の左境界線と右境界線と一致します
テキストは浮動 div を囲みます
左に3フロート、右に2フロートするとのように表示されます

ブラウザウィンドウの幅が狭くなります。息子 2 さん、誰が狭くなるでしょうか?

答えはまだson3です。ルールは、htmlファイルの最後に書かれているものが絞り出されるというものです。htmlファイルではson3がson2の後にあるため、son3が常に最初に絞り出されます。
3 つの子として表示されます親 div 内の div はすべて標準フローから外れ、親 div は 1 行に縮小されます。これを修正するには、clear を使用できます
margin-padding-border をすべて 0 にして空の div を追加し、両方をクリアします。親 div をサポートするには

をクリアします

前に float がある場合、 :left 要素は、上の例の p などの次の要素に影響します。 p 要素に clear : left を書きます。同様に、clear:

二

位置の値には、静的絶対相対固定

1 が含まれます。

これはデフォルト、つまり標準的な配置方法です。

2. 固定

一部のフォーラムの [トップに戻る] ボタンは固定で構成されています。

一番上に戻ってプレイする練習をする

<div id="backToTop">    回到顶部</div>

ログイン後にコピー

#backToTop{    width: 100px;    height: 50px;    background-color: red;    color: white;    cursor: pointer;    border-radius: 25px 0 0 25px;    padding-left: 20px;    text-align: center;    line-height: 50px;    position: fixed;    bottom: 80px;    right: 0;}

ログイン後にコピー

表示効果

3. 相対相対位置決め

自分のバイアスに対して相対基準の流れから逸脱せずに移動し、上/下左/右を使って移動します。オフセットを指定します