CSS の配置の問題 (2): float と display_html/css_WEB-ITnose の使用-htmlチュートリアル-php.cn

CSS の配置の問題 (2): float と display_html/css_WEB-ITnose の使用

WBOY

リリース： 2016-06-21 08:49:54

オリジナル

1633 人が閲覧しました

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

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

ブラウザのサポート: すべての主要なブラウザが表示属性をサポートします。

注: 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: インラインブロックによって実装されたナビゲーションバー

<!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 (

著者について: zhiqiang21