【CSSを0から1まで学ぶ】配置問題2（floatとdisplayの使い方）_html/css

【CSSを0から1まで学ぶ】配置問題2（floatとdisplayの使い方）_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:43:42

オリジナル

1032 人が閲覧しました

display 属性は、要素が生成するボックスのタイプを指定します。

この属性は、レイアウトの作成時に要素によって生成される表示ボックスのタイプを定義するために使用されます。 HTML などのドキュメントタイプの場合、表示を不用意に使用すると、HTML ですでに定義されている表示階層に違反する可能性があるため危険です。 XML の場合、XML にはこの種の階層が組み込まれていないため、すべての表示が絶対に必要です。

ブラウザのサポート:
すべての主要なブラウザは、display 属性をサポートします。

注: Internet Explorer のどのバージョン (IE8 を含む) も、「inherit」、「inline-table」、「run-in」、「table」、「table-caption」、「table-cell」、「table」をサポートしていません。「 -column」、「table-column-group」、「table-row」、「table-row-group」の属性値。

ブロックレベル要素に display: inline-block を設定すると、float と同じ効果を達成できるためです。つまり、ブロックレベル要素の末尾には改行文字がありません。では、float をいつ使用するのか、display: inline-block をいつ使用するのか?

ほとんどの場合、float はテキストの折り返しを処理するように見えます。そのため、float を使用してテキストの折り返しを実装し、非テキストの折り返しを処理する場合は、主に display: inline-block を使用します。

1.1float 実装ナビゲーションバー

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>floatNav</title>    <style type="text/css"> body, ul{margin:0;padding:0;} #body-div{ background-color:#eaebea; height:40px; /*设置当浏览器窗口变短时li换行显示*/ overflow:hidden; /*这里主要是让父级div跟据内容自动伸长*/ float:left; } ul li { list-style:none; float:left; border-right:1px solid #d2d5d2; line-height:40px; padding: 0 10px; } ul li a{ text-decoration:none; } a:link, a:visited{color:#3f3b3c;} a:hover{color:#fd687f;} </style></head><body>    <div id="body-div">        <ul>            <li><a href="">首页</a></li>            <li><a href="">内容1</a></li>            <li><a href="">内容2</a></li>            <li><a href="">内容3</a></li>            <li><a href="">内容4</a></li>            <li><a href="">内容5</a></li>            <li><a href="">内容6</a></li>            <li><a href="">内容6</a></li>        </ul>    </div></body></html>

ログイン後にコピー

chrome、firefox、IE での表示効果は次のとおりです:

1.2display: inline-block 実装ナビゲーションバー

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>inlineNav</title>    <style type="text/css"> body, ul{margin:0;padding:0;} #body-div{ background-color:#eaebea; height:40px; /*这里主要是让父级div跟据内容自动伸长*/ display:inline-block; /*设置当浏览器窗口变短时li换行显示*/ overflow:hidden; margin:0 auto; } ul li { list-style:none; display:inline-block; border-right:1px solid #d2d5d2; line-height:40px; padding:0 10px; } ul li a{ text-decoration:none; } a:link, a:visited{color:#3f3b3c;} a:hover{color:#fd687f;} </style></head><body>    <div id="body-div">        <ul>            <li><a href="http://www.baidu.com" target="_blank">首页</a></li>            <li><a href="">内容1</a></li>            <li><a href="">内容2</a></li>            <li><a href="">内容3</a></li>            <li><a href="">内容4</a></li>            <li><a href="">内容5</a></li>            <li><a href="">内容6</a></li>            <li><a href="">内容7</a></li>        </ul>    </div></body></html>

ログイン後にコピー

このコードは chrome、firefox、IE で表示されます(>=8) の効果は次のとおりです:

IE (

IE (