ホームページ > 記事 > ウェブフロントエンド > CSS徹底研究(3)-floating,positioning_html/css_WEB-ITnose
CSS徹底研究(3)-floating,positioning_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:20:181147ブラウズ
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> - 位置のない親 div のマージントップの受け渡しの問題を解決するために、position:absolute を中央の #father に追加します。 http://blog.sina.com.cn / を参照してください。 s/blog_6bec36f9010110w9.html
- 表示効果は
1と2のfloatをそれぞれ左右にすると、 -
1と2が標準ストリームから外れ、標準ストリームのson3が外れていることがわかります。 Son3 が元の Son1 の位置を置き換え、son1 の左境界線、son2 の右境界線が Son3 の左境界線と右境界線と一致します
1、2、3 がすべて左に浮動する場合 -
テキストは浮動 div を囲みます
左に1,2フロート、右に3フロート ウィンドウの幅を減らすと3が下に絞られます -
左に3フロート、右に2フロートすると のように表示されます
ブラウザ ウィンドウの幅が狭くなります。息子 2 さん、誰が狭くなるでしょうか?
答えはまだson3です。ルールは、htmlファイルの最後に書かれているものが絞り出されるというものです。htmlファイルではson3がson2の後にあるため、son3が常に最初に絞り出されます。
son1 の高さを上げます。son3 を押し下げると、そこに引っかかります -
ボックス内のテキストを削除すると、3 つの子 div がすべて左にフローティングされます -
3 つの子として表示されます親 div 内の div はすべて標準フローから外れ、親 div は 1 行に縮小されます。これを修正するには、clear を使用できます
margin-padding-border をすべて 0 にして空の div を追加し、両方をクリアします。親 div をサポートするには
III. clear は float
前に 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. 相対相対位置決め
自分のバイアスに対して相対 基準の流れから逸脱せずに移動し、上/下左/右を使って移動します。オフセットを指定します
4. 絶対配置
他の配置要素に基づいて配置し、標準的なフローから脱却するために絶対ルールを適用します他の要素:
前の祖先要素が配置できない場合は、最も近くに配置されます。配置済み: 位置が設定されており、静的ではないことを意味します。つまり、位置の値が静的でない場合は、要素が位置が設定されていない場合、または静的に設定されている場合は、配置されていないとみなされます。
トリック
3. 表示
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。