ホームページ > 記事 > ウェブフロントエンド > CSSレイアウトシリーズ - 上段・下段応用シナリオ_html/css_WEB-ITnose
CSSレイアウトシリーズ - 上段・下段応用シナリオ_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:48:541255ブラウズ
今日は、上下の列レイアウトの適用シナリオについて説明します。その前に、box-sizing 属性について簡単に説明します。この属性には、content-box|border-box|inherit の 3 つの値があります。
ボックス サイズ設定プロパティを使用すると、特定の方法で特定の領域に一致する特定の要素を定義できます。
通常、実際に設定する高さと幅はコンテンツの高さと幅を指し、境界線の高さと幅は含まれません。 box-sizing: content-box にボックスのコンテンツの高さと幅のみが含まれ、境界線の高さと幅は含まれない場合、デフォルトはこのアルゴリズムになります (図 1)。設定した高さと幅の範囲内に境界線を含めたい場合は、box-sizing: border-box (図 2) を設定するだけです。そうすると、コンテンツの高さと幅が 180*180 になり、計算式が計算されることがわかります。は:
コンテンツの幅 = 幅 - (境界線の幅 * 2 + パディング * 2); コンテンツの高さ = 高さ - (境界線の高さ * 2 + パディング * 2);
(図 1) (写真 2)
この属性について詳しく知りたい場合は、ご自身で検索してください。ぜひ一緒に議論してください。実際には、上下の列の適用シナリオは数多くあります。これまでのレイアウト シリーズの総合適用における上下の列のレイアウトは一例です。実は私が日々の仕事で最もよく使っているパネルが一つありまして、そこら中にパネルがあります。実際には次のような extjs および ligerui パネル コンポーネントもあります。レンダリングを見てください:
次に、パネルのレイアウトと実装原理を分析します:
パネルは通常、タイトル バーとコンテンツ バーの 2 つの部分に分かれています
タイトル バーの高さを固定し、コンテンツ バー 内部サポートは、パネルの最も外側のコンテナの高さからタイトル バーの高さを引いたもので、コンテンツ バーの高さに等しいです。コンテンツが多すぎる場合は、コンテンツにスクロール バーが表示されます。バー。
コード:
<style type="text/css">*{margin: 0;padding: 0;} body{font-size: 14px;}.container{position: relative;border: solid 1px red;width: 400px;box-sizing: border-box;margin-left: 20px;margin-top: 20px;text-align:justify;text-justify:inter-word;}.header{height: 30px;line-height: 30px;background-color: rgb(218,255,241);}.content{background-color: #ccc;}</style></head><body> <div class="container"> <div class="header"> 外撑面板</div> <div class="content"> 我是内容栏我是内容栏 </div> </div></body></html> 内部サポートレンダリング:
コード:
<style type="text/css">*{margin: 0;padding: 0;}body{font-size: 14px;}.container{position: relative;border: solid 1px red;width: 400px;height:400px;box-sizing: border-box;margin-left: 20px;margin-top: 20px;text-align:justify;text-justify:inter-word;}.header{height: 30px;line-height: 30px;background-color: rgb(218,255,241);}.content{background-color: #ccc;position:absolute;top:30px;left:0;right:0;bottom:0;}</style></head><body> <div class="container"> <div class="header"> 内撑面板</div> <div class="content"> 我是内容栏我是内容栏 </div> </div></body></html>