ホームページ  >  記事  >  ウェブフロントエンド  >  CSS の配置の問題 (2): float と display_html/css_WEB-ITnose の使用

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

WBOY
WBOYオリジナル
2016-06-21 08:49:541593ブラウズ

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

自分が正しいと思うことを実行し、それが間違っている可能性がある場合は、自分が許容できると思うことを実行してください。 個人ホームページ · 私の記事 · 3 ·

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事:Spot.js次の記事:Spot.js