css3 レイアウト_html/css_WEB-ITnose について話す-htmlチュートリアル-php.cn

float 属性またはposition 属性レイアウトを使用するデメリット

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style type="text/css">        div {            width: 20em;            float: left;        }        #div1 {            margin-right: 2em;        }        #div3 {            width: 100%;            background-color: yellow;            height: 200px;        }    </style></head><body>    <div id="div1">        <p>                        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        </p>    </div>    <div id="div2">        <p>            示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        </p>    </div>    <div id="div3">        页面中其它内容    </div></body></html>

ログイン後にコピー

上記のコードを使用すると、ページは次のように表示されます。上記の例例えば、画像を追加すると

その場合、表示されるページの効果は次のようになります(つまり、2つの要素の位置合わせを求めることができません)

それでは、この問題をどのように解決するか

複数列レイアウトが CSS3 に追加されました。複数列レイアウトを使用すると、要素内のコンテンツを複数の列に分割して表示し、各列のコンテンツの下部を確実に揃えることができます。主に次の属性を使用できます

column-count: 表示する列の数

column-width: 現在表示されている列の幅

column-gap: 複数の列間の間隔

column-rule : 列の間にスペーサー線を追加し、スペーサー線の幅や色などを設定します

一般的なボックスレイアウト

一般的なページレイアウトは、次の例のように左、中央、右に分かれています

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style type="text/css">        #left-sidebar {            float: left;            width: 200px;            padding: 20px;            background-color: orange;        }        #contents {            float: left;            width: 300px;            padding: 20px;            background-color: yellow;        }        #right-sidebar {            float: left;            width: 200px;            padding: 20px;            background-color: limegreen;        }        #left-sidebar, #contents, #right-sidebar {            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;        }    </style></head><body>    <div id="container">        <div id="left-sidebar">            <h2>左侧边栏</h2>            <ul>                <li><a href="#">超链接</a></li>                <li><a href="#">超链接</a></li>                <li><a href="#">超链接</a></li>                <li><a href="#">超链接</a></li>                <li><a href="#">超链接</a></li>            </ul>        </div>        <div id="contents">            <h2>内容</h2>            <p>                示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。        示例文字。相对来说比较长的示例文字。            </p>        </div>        <div id="right-sidebar">            <h2>右侧边栏</h2>            <ul>                <li><a href="#">超链接</a></li>                <li><a href="#">超链接</a></li>                <li><a href="#">超链接</a></li>            </ul>        </div>    </div></body></html>

ログイン後にコピー

コードの実行最終的なインターフェース効果は次のとおりです:

float 属性またはposition 属性を使用すると、左右または複数の列の div 要素の下部が揃っていないことがわかります

ボックスレイアウトを使用します

以下のボックスレイアウトを使用します下部を揃えるには、上記の CSS を次のように変更します:

        #container {            display:-moz-box;            display:-webkit-box;        }        #left-sidebar {                      width: 200px;            padding: 20px;            background-color: orange;        }        #contents {                       width: 300px;            padding: 20px;            background-color: yellow;        }        #right-sidebar {            width: 200px;            padding: 20px;            background-color: limegreen;        }        #left-sidebar, #contents, #right-sidebar {            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;        }

ログイン後にコピー

実際、これは、最も外側の div で display:box を使用し、その div の float:left 属性を削除することを意味します。インターフェイス実行時の効果図は次のとおりです:

ちなみに、ボックスを使用する場合と複数列レイアウトを使用する場合の違いは次のとおりです: 1. 複数列レイアウトの各列の幅2. 複数段レイアウトの場合、どの列に何を表示するかを指定することはできません。コンテンツ、つまり複数段レイアウトは、記事の内容を表示するのに適しており、さまざまな要素の構造を配置するのには適していません。 Web ページ全体の幅です

アダプティブウィンドウのフレキシブルボックスレイアウトを使用します

上記の例では、必要に応じて、これら 3 つの div の合計幅はブラウザウィンドウの幅と等しくなります。つまり、幅に応じて変化します。

実際には、 -webkit-box を真ん中の div に追加するだけで十分です。 CSS コードは次のとおりです:

        #container {          display:-moz-box;          display:-webkit-box;        }        #left-sidebar {                      width: 200px;            padding: 20px;            background-color: orange;        }        #contents {                -webkit-box-flex:1;            -moz-box-flex:1;                   width: 300px;            padding: 20px;            background-color: yellow;        }        #right-sidebar {            width: 200px;            padding: 20px;            background-color: limegreen;        }        #left-sidebar, #contents, #right-sidebar {            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;        }

ログイン後にコピー

インターフェイスの操作効果は次のとおりです:

要素の表示順序を変更します

では、要素の表示順序を変更するにはどうすればよいですか? たとえば、左側が必要です。一番右に表示する列と、左に表示するコンテンツ列をどうすればよいでしょうか？

css3 には、各要素の表示順序を変更するための属性 box-ordinal-group が用意されています。CSS を見ると、その中の各 div に box-ordinal-group を追加するだけで、簡単に表示を変更できます。順序

        #container {            display: -moz-box;            display: -webkit-box;        }        #left-sidebar {            -moz-box-ordinal-group: 3;            -webkit-box-ordinal-group: 3;            width: 200px;            padding: 20px;            background-color: orange;        }        #contents {            -moz-box-ordinal-group: 1;            -webkit-box-ordinal-group: 1;            -webkit-box-flex: 1;            -moz-box-flex: 1;            width: 300px;            padding: 20px;            background-color: yellow;        }        #right-sidebar {            -moz-box-ordinal-group: 2;            -webkit-box-ordinal-group: 2;            width: 200px;            padding: 20px;            background-color: limegreen;        }        #left-sidebar, #contents, #right-sidebar {            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;        }

ログイン後にコピー

インターフェースのレンダリングは次のとおりです (すごいですね):

要素の配置方向を変更する

要素の配置方向を変更したい場合は、box-orient を使用できますCSS3では複数の要素の配置方向を指定します。 box-orient 属性を最も外側の div に追加するだけです。 CSS コードは次のとおりです:

        #container {            display: -moz-box;            display: -webkit-box;            -moz-box-orient:vertical;            -webkit-box-orient:vertical;        }        #left-sidebar {            -moz-box-ordinal-group: 3;            -webkit-box-ordinal-group: 3;            width: 200px;            padding: 20px;            background-color: orange;        }        #contents {            -moz-box-ordinal-group: 1;            -webkit-box-ordinal-group: 1;            -webkit-box-flex: 1;            -moz-box-flex: 1;            width: 300px;            padding: 20px;            background-color: yellow;        }        #right-sidebar {            -moz-box-ordinal-group: 2;            -webkit-box-ordinal-group: 2;            width: 200px;            padding: 20px;            background-color: limegreen;        }        #left-sidebar, #contents, #right-sidebar {            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;        }

ログイン後にコピー

インターフェースはすぐに完全に変更されました

要素の幅と高さの適応性

ボックスレイアウトを使用する場合、要素の幅と高さは適応的です。つまり、要素の幅が配置方向の変更に応じて高さと高さも変更できます

以下の例を見てください。HTML インターフェイスコード全体は次のとおりです:

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <style type="text/css">        #container {            display: -moz-box;            display: -webkit-box;            border: 5px solid blue;            -moz-box-orient: horizontal;            -webkit-box-orient: horizontal;            width: 500px;            height: 300px;        }        #text-a {            background-color: orange;        }        #text-b {            background-color: yellow;        }        #text-c {            background-color: limegreen;        }        #text-a, #text-b, #text-c {            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;        }    </style></head><body>    <div id="container">        <div id="text-a">示例文字A</div>        <div id="text-b">示例文字B</div>        <div id="text-c">示例文字C</div>    </div></body></html>

ログイン後にコピー

インターフェイスの効果は次のとおりです:

When we上記のコードコンテナを変更します。内部の CSS は次のとおりです (つまり、垂直方向に配置を変更します):

        #container {            display: -moz-box;            display: -webkit-box;            border: 5px solid blue;            -moz-box-orient: vertical;            -webkit-box-orient: vertical;            width: 500px;            height: 300px;        }

ログイン後にコピー

インターフェイスのレンダリングは次のとおりです:

フレキシブルボックスレイアウトを使用して、白い部分を削除しますスペース

上の効果を見てください。コンテナには常に大きな空白領域が残っていると考えているはずです。それを削除するにはどうすればよいでしょうか?実際、これは CSS3 のフレキシブルボックスレイアウトを使用することで解決できます。つまり、配置に参加する複数の要素の幅と高さの合計が常にコンテナーの幅と高さに等しくなります

上記のコードを変更してみましょう(配置方向を horizontal に設定し、中央のサブディビジョンに box-flex 属性を追加します)

CSS スタイルは次のとおりです:

        #container {            display: -moz-box;            display: -webkit-box;            border: 5px solid blue;            -moz-box-orient: horizontal;            -webkit-box-orient: horizontal;            width: 500px;            height: 300px;        }        #text-a {            background-color: orange;        }        #text-b {            background-color: yellow;            -moz-box-flex:1;            -webkit-box-flex:1;        }        #text-c {            background-color: limegreen;        }        #text-a, #text-b, #text-c {            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;        }

ログイン後にコピー

インターフェイスの表示効果は次のとおりです

もちろん、できますまた、配置方向を垂直に設定すると、インターフェイスは次のようになります

複数の要素で box-flex 属性を使用します

今度は、box-flex を中央のサブディビジョンに追加するだけでなく、最初のサブディビジョンに box-flex を実行すると、結果はどうなるでしょうか

        #container {            display: -moz-box;            display: -webkit-box;            border: 5px solid blue;            -moz-box-orient: vertical;            -webkit-box-orient: vertical;            width: 500px;            height: 300px;        }        #text-a {            background-color: orange;            -moz-box-flex: 1;            -webkit-box-flex: 1;        }        #text-b {            background-color: yellow;            -moz-box-flex: 1;            -webkit-box-flex: 1;        }        #text-c {            background-color: limegreen;        }        #text-a, #text-b, #text-c {            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;        }

ログイン後にコピー

如果三个子div都加上box-flex属性，那么每个div高度等于容器的高度除以3，也就是效果图所示所示：

其实box-flex:1就是让其占据刚刚好的宽度，也就是说除去其它的部分，它刚好占满全部

你动手去尝试一下用box-flex:2，会发现box-flex:2并非box-flex:1的两倍就是这个道理，1只是代表单位像素，也就是刚刚好的宽高，并非代表数值

指定水平方向与垂直方向的对齐方式

在css2中，如果想方案水平居中就只能用text-align:center，但是却不能让文字垂直居中，在css3中，只要让div元素使用box-align属性就行了。

示例代码

        div {            display: -moz-box;            display: -webkit-box;            -moz-box-align: center;            -webkit-box-align: center;            -moz-box-pack: center;            -webkit-box-pack: center;            width: 200px;            height: 100px;            background-color: pink;        }

ログイン後にコピー

如果在div容器中放入“示例文字”这几个字，界面运行效果就会如下所示：（同样，如果我们在div里面放入图像也是可以实现水平和垂直方向居中的）