ホームページ > 記事 > ウェブフロントエンド > CSS の一般的なレイアウトは何ですか? 5 つの一般的なレイアウトの紹介
CSS の一般的なレイアウトは何ですか? 5 つの一般的なレイアウトの紹介
- 青灯夜游転載
- 2018-11-10 17:06:114642ブラウズ
この記事でわかることは、CSS の一般的なレイアウトとは何なのかということです。 5 つの一般的なレイアウトの紹介。困っている友人は参考にしていただければ幸いです。
この記事では、次の 5 つの一般的なレイアウトを紹介します。
単一列レイアウト
2 列columns アダプティブ レイアウト
Shengfei レイアウトと複翼レイアウト
擬似輪郭レイアウト
# Glue レイアウト
1. 単一列レイアウト
# #1. 一般的な単一列レイアウト:
- ヘッダー、コンテンツ、フッターの幅が等しい単一列レイアウト
- ヘッダーとフッター幅が同じでコンテンツがわずかに狭い単一列レイアウト
2 実装方法
最初のタイプでは、まずヘッダー、コンテンツ、フッターの幅を一律に 1000px または max-width: 1000px に設定します (両者の違いは、画面が 1000px より小さい場合、前者はスクロールバーはスクロールバーではなく、実際の幅が表示されます); 次に、中央揃えを実現するために margin:auto を設定します。<p></p> <p></p> <p></p>
.header{
margin:0 auto;
max-width: 960px;
height:100px;
background-color: blue;
}
.content{
margin: 0 auto;
max-width: 960px;
height: 400px;
background-color: aquamarine;
}
.footer{
margin: 0 auto;
max-width: 960px;
height: 100px;
background-color: aqua;
}2 番目のタイプでは、ヘッダーとフッターのコンテンツの幅は設定されておらず、ブロック レベルの要素が画面全体に表示されますが、ヘッダー、コンテンツ、およびフッターのコンテンツ領域は同じ幅で、margin:auto によって中央に配置されます。
<p> </p><p></p> <p></p> <p></p>
.header{
margin:0 auto;
max-width: 960px;
height:100px;
background-color: blue;
}
.nav{
margin: 0 auto;
max-width: 800px;
background-color: darkgray;
height: 50px;
}
.content{
margin: 0 auto;
max-width: 800px;
height: 400px;
background-color: aquamarine;
}
.footer{
margin: 0 auto;
max-width: 960px;
height: 100px;
background-color: aqua;
}
2. 2 列アダプティブ レイアウト
2 列アダプティブ レイアウトとは、1 つの列がコンテンツによって拡張され、もう 1 つの列が拡張されることを意味します。 width レイアウトメソッド1.float overflow:hidden
通常の2カラムレイアウトの場合、通常の要素のマージンをfloat で実装することもできますが、アダプティブ 2 列レイアウトの場合は float overflow:hidden を使用して実装できます。このメソッドは主にオーバーフローを通じて BFC をトリガーします。 、BFC は浮動要素と重なりません。 overflow:hidden を設定しても IE6 ブラウザの haslayout 属性はトリガーされないため、zoom:1 は IE6 ブラウザと互換性を持たせるように設定する必要があります。具体的なコードは次のとおりです。 <p>
</p><p>
</p><p>left</p>
right
right
.parent {
overflow: hidden;
zoom: 1;
}
.left {
float: left;
margin-right: 20px;
}
.right {
overflow: hidden;
zoom: 1;
} 注: サイドバーが右側にある場合は、レンダリング順序に注意してください。つまり、HTML では、最初にサイドバーを記述し、次にメイン コンテンツを記述します
#2. フレックス レイアウトフレックス レイアウト (フレキシブル ボックスとも呼ばれます) layout を使用すると、わずか数行のコードでさまざまなページのレイアウトを実現できます。
//html部分同上
.parent {
display:flex;
}
.right {
margin-left:20px;
flex:1;
}
3.グリッド レイアウトグリッド レイアウトは、ユーザー インターフェイスのデザインを最適化するために設計された 2 次元のグリッド ベースのレイアウト システムです。
//html部分同上
.parent {
display:grid;
grid-template-columns:auto 1fr;
grid-gap:20px
}
3 列レイアウト
機能: 中央の列の幅を調整し、両側の幅を固定します、 3 列レイアウトを実装するにはさまざまな方法があります (いくつかの方法をクリックして 3 列レイアウトを実現できます)。この記事では、Holy Grail レイアウトとダブル ウィング レイアウトに焦点を当てます。
1. 聖杯レイアウト
① 特徴特別な 3 列のレイアウト、同じです。両側は固定幅で、中央は適応型です。唯一の違いは、中央の列を最初にロードできるように、DOM 構造を最初に中央の列に記述する必要があることです。
.container {
padding-left: 220px;//为左右栏腾出空间
padding-right: 220px;
}
.left {
float: left;
width: 200px;
height: 400px;
background: red;
margin-left: -100%;
position: relative;
left: -220px;
}
.center {
float: left;
width: 100%;
height: 500px;
background: yellow;
}
.right {
float: left;
width: 200px;
height: 400px;
background: blue;
margin-left: -200px;
position: relative;
right: -220px;
}
<article> <p> </p> <p>圣杯布局</p> <p></p> <p></p> </article>② 実装手順
- 3 つの部分はすべて左フローティングに設定されます。
- そうしないと、左側と右側のコンテンツが表示されません。アップロードされるため、中央の列と同じ行に
を指定することはできません。次に、中央の幅を 100% に設定します (中段のアダプティブコンテンツを実現します)。このとき、左右の部分は次の行にジャンプします。
margin-left を負の値に設定すると、左右の部分が中央部分と同じ行に戻ります
親コンテナのpadding-leftとpadding-rightを設定することで、左右に隙間を空けます。
- #③ デメリット
如果其中一列内容高度拉长(如下图)，其他两列的背景并不会自动填充。(借助伪等高布局可解决)
④ 伪等高布局
等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高。
此处我们通过伪等布局便可解决圣杯布局的第二点缺点，因为背景是在padding区域显示的，设置一个大数值的padding-bottom，再设置相同数值的负的margin-bottom，并在所有列外面加上一个容器，并设置overflow:hidden把溢出背景切掉。这种可能实现多列等高布局，并且也能实现列与列之间分隔线效果，结构简单，兼容所有浏览器。新增代码如下：
.center,
.left,
.right {
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.container {
padding-left: 220px;
padding-right: 220px;
overflow: hidden;//把溢出背景切掉
}
2.双飞翼布局
① 特点
同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。而且任何一栏都可以是最高栏，不会出问题。
.container {
min-width: 600px;//确保中间内容可以显示出来，两倍left宽+right宽
}
.left {
float: left;
width: 200px;
height: 400px;
background: red;
margin-left: -100%;
}
.center {
float: left;
width: 100%;
height: 500px;
background: yellow;
}
.center .inner {
margin: 0 200px; //新增部分
}
.right {
float: left;
width: 200px;
height: 400px;
background: blue;
margin-left: -200px;
}
<article> <p> </p> <p>双飞翼布局</p> <p></p> <p></p> </article>
② 实现步骤(前两步与圣杯布局一样)
三个部分都设定为左浮动，然后设置center的宽度为100%，此时，left和right部分会跳到下一行；
通过设置margin-left为负值让left和right部分回到与center部分同一行；
center部分增加一个内层p，并设margin: 0 200px；
③ 缺点
多加一层 dom 树节点，增加渲染树生成的计算量。
3.两种布局实现方式对比:
两种布局方式都是把主列放在文档流最前面，使主列优先加载。
两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
两种布局方式的不同之处在于如何处理中间主列的位置：
圣杯布局是利用父容器的左、右内边距+两个从列相对定位；
双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整
四、粘连布局
1.特点
有一块内容
<main></main>，当<main></main>的高康足够长的时候，紧跟在<main></main>后面的元素<footer></footer>会跟在<main></main>元素的后面。当
<main></main>元素比较短的时候(比如小于屏幕的高度),我们期望这个<footer></footer>元素能够“粘连”在屏幕的底部
当main足够长时
当main比较短时
具体代码如下：
<p> </p><p> main <br> main <br> main <br> </p> <p>footer</p>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;//高度一层层继承下来
}
#wrap {
min-height: 100%;
background: pink;
text-align: center;
overflow: hidden;
}
#wrap .main {
padding-bottom: 50px;
}
#footer {
height: 50px;
line-height: 50px;
background: deeppink;
text-align: center;
margin-top: -50px;
}
2.实现步骤
(1)footer必须是一个独立的结构，与wrap没有任何嵌套关系
(2)wrap区域的高度通过设置min-height，变为视口高度
(3)footer要使用margin为负来确定自己的位置
(4)在main区域需要设置 padding-bottom。这也是为了防止负 margin 导致 footer 覆盖任何实际内容。
以上がCSS の一般的なレイアウトは何ですか? 5 つの一般的なレイアウトの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。