#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; } #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; } #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; }
css3 レイアウト_html/css_WEB-ITnose について話す
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; }ログイン後にコピー
#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; }ログイン後にコピー
#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; }ログイン後にコピー
#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里面放入图像也是可以实现水平和垂直方向居中的）
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1662
14
1418
52
1311
25
1261
29
1234
24
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTML、CSS、およびJavaScript：Web開発者に不可欠なツール
Apr 09, 2025 am 12:12 AM
HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
HTML：構造、CSS：スタイル、JavaScript：動作
Apr 18, 2025 am 12:09 AM
Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。
HTMLの未来：ウェブデザインの進化とトレンド
Apr 17, 2025 am 12:12 AM
HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。
HTML対CSS対JavaScript：比較概要
Apr 16, 2025 am 12:04 AM
Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。
HTML、CSS、およびJavaScriptの未来：Web開発動向
Apr 19, 2025 am 12:02 AM
HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。
