CSS ネイティブレイアウトメソッドとは何ですか?-jsチュートリアル-php.cn

前書き

実際、インターネット上には Web ページのネイティブレイアウトのメソッドが多数あり、おそらく Flow (フローレイアウトモデル)、Float (フローティングレイアウトモデル)、Layer (階層レイアウトモデル) が考えられます。

フローレイアウト

フローレイアウトモデルは、実際にはデフォルトの Web ページレイアウトモードです。つまり、デフォルト状態の Web ページの HTML Web 要素は、フローモデルに従って Web ページのコンテンツを配信します。
フローレイアウトには 2 つの典型的な特徴があります。
まず、ブロックレベルの要素は、デフォルトではすべて 100% であるため、最も近い親コンテナ要素内で上から下に垂直に配置されます。、親要素の幅の 100%)。実際、ブロック要素は行の形式で位置を占めます。次のコードに示すように、

<html><body><h1>我是h1</h1><div>我是div</div></body></html>

ログイン後にコピー

上記のコードに示すように、外部スタイルの影響がなければ、h1 と div の幅は 100% (ページのデフォルトの幅) になります。
2 番目に、フローモデルでは、インライン要素は最も近い親コンテナ要素内で左から右に水平に表示されます。

<html><body><a>我是a</a><span>我是span</span></body></html>

ログイン後にコピー

インライン要素は、ブロックレベル要素のように単独で行を占有しません。

フロートレイアウト

デフォルトでは、どの要素もドキュメントフロー全体に含まれており、フローティングされません。要素に float を設定すると、その要素を現在のドキュメントフローから外してフローティング要素にすることができます。
次のコードは、2 つの div を並べて表示できるように div 要素に float を設定します。

div{width:200px;height:200px;border:2px red solid;float:left;
}

ログイン後にコピー

rree

ここで注意すべき点は、div に設定した float が float: right の場合、div1 は右側に、div2 は div1 の左側にアタッチされることです。

レイヤーレイアウト

階層レイアウトモデルとは何ですか?

階層レイアウトモデルは、画像ソフトウェアPhotoShopの非常に人気のあるレイヤー編集機能のようなもので、各レイヤーを正確に配置して操作できますが、Webデザインの分野では、Webページのサイズの流動性により、階層レイアウトが使用されます。モデルは人気がありません。ただし、Web ページ上で階層レイアウトをローカルに使用すると、依然として便利です。
アプリケーションの階層レイアウトでは、多くの場合、位置決め属性の連携が必要です。 CSSには、

絶対配置（位置：絶対）
相対配置（位置：相対）
固定配置（位置：固定）

絶対配置

ifの3つの配置タイプがあります。要素の階層レイアウトモデルで絶対位置を設定する場合は、position:absolute (絶対位置を示す) を設定する必要があります。このステートメントの機能は、要素をドキュメントフローの外にドラッグし、左側のボタンを使用することです。、右、上、下属性を基準にして、位置決め属性を持つブロックを含む最も近い親が絶対的に配置されます。そのような包含ブロックが存在しない場合、それは body 要素に対して相対的、つまりブラウザウィンドウに対して相対的になります。

相対位置

階層レイアウトモデルで要素の相対位置を設定したい場合は、position:relative (相対位置を示す) を設定する必要があります。これにより、左側を通る通常のドキュメントフロー内の要素のオフセットが決まります。、右、上、下属性。相対位置決めのプロセスでは、まず静的 (フロート) モードで要素を生成し (要素はレイヤーのように浮遊します)、次に前の位置に対して相対的に移動します。移動の方向と振幅は左と右によって決まります。、top、bottom 属性では、オフセット前の位置は変更されません。
相対位置決めと絶対位置決めの最大の違いは、前者は現在のドキュメントフローから離脱していないのに対し、後者はすでに現在のドキュメントフローから離脱していることです。現在のドキュメントフローから切り離されるということは、位置とオフセットを計算するときに、要素の前後の要素が要素のサイズと位置を計算しなくなることを意味します。

固定位置

position: 固定、固定位置を示し、絶対位置タイプと似ていますが、その相対移動座標はビュー (画面内の Web ページウィンドウ) そのものです。ビュー自体は固定されているため、画面上でブラウザウィンドウの画面位置を移動したり、ブラウザウィンドウの表示サイズを変更したりしない限り、ブラウザウィンドウのスクロールバーがスクロールしてもビューが変化することはありません。常にブラウザウィンドウ内のビューの特定の位置にあり、ドキュメントの流れの影響を受けません。これは、background-attachment:fixed 属性と同じ機能を持ちます (背景画像の位置を指定するために使用されます)。。
固定位置は、ページスクロールバーの影響を受けることなく、ページ上の特定の位置に特定の要素を固定して表示する必要がある特定のシナリオで役立ちます。たとえば、一般的な「トップに戻る」ボタンです。

混合使用

最新の Web ページレイアウトでは、より柔軟な目的を達成するために、相対配置と絶対配置が混合されることがよくあります。次のコードの

<div id="div1">我是div1</div>
<div id="div2">我是div2</div>

ログイン後にコピー

は、box2 が box1 を基準にして絶対的に配置されていることを意味します。 box1 の位置が変更されても、box1 内の子要素はすべて box1 を基準にして絶対的に配置されるため、変更されません。

一般的なレイアウト方法(2カラム)

2カラムの場合、左側の幅を暫定的に100PXとします

方法1:

<style>#box1{width:200px;height:200px;position:relative; /* 前辈元素的定位必须设置为relative */
}#box2{position:absolute; /* 相对于最近的一个定位设置为relative的前辈元素的绝对定位 */top:20px;left:30px;
}</style><div id="box1"><div id="box2">相对参照元素进行定位</div></div>

ログイン後にコピー

方法2:

 float + calc().right {width: calc(100% - 100px);
}

ログイン後にコピー

2カラムレイアウトの場合、左側は右側は固定で、右側は適応型です。

1. 左側はフロート、右側は margin-left を使用、左側は長さの固定幅、幅は 100% です

2.利用的是创建一个新的BFC（块级格式化上下文）来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响。它可以通过以下任何一种方式来创建：

float的值不为none
position的值不为static或者relative
display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个
overflow的值不为visible

三列布局左右固定中间自适应

圣杯

思路

首先有三行，头部和尾部各占一行，中间内容区一行，头尾不重要
中间内容分为三列对应三个div,为了先展示中间的主要内容所以把中间那列放前面，然后是左和右对应的div
中间内容自适应宽度为100%，此时已经把3个div所在的父容器占满了，所以想办法让左右2个div放置在左右侧，
左侧采取margin-left取-100%让其在最左侧，

右侧同理取值-200px(像素值为宽度大小)，保证刚好占满自身宽度
这时候测试发现已经有自适应效果了，但是缩小到一定程度页面就出问题了，左右不在了，
所以加上最低宽度就是左右2个DIV的宽度（另外得考虑浏览器默认的body下的margin为8px,做了样式重置不考虑）
这时候发现中间的内容文字被左右遮挡了，对父容器用pading左右值为左右元素宽度，
为什么不对中间的DIV设置padding,我发现设置了不起作用，具体的原因我暂时也搞不懂来龙去脉，
发现padding后左右有留白，这个时候左边需要用 left: -200px;position: relative;来设置DIV位置，
办法确实巧妙。右边实现同理。

这时候发现已经大致有了点样子了，效果也看的到，此时典型的三栏布局，左右固定，中间内容自适应已经完成。

总结：

其实这个布局已经有点年头（圣杯布局），通过左右两块DIV来遮挡了中间div宽度为100%的区域，
然后压缩了三个DIV共有的父容器，来实现对中间内容展示的完善，也使左右2个不在遮挡中间了。
然后我又趁机试了下z-index属性，这里有个小问题要注意（要让z-index起作用有个小小前提，
就是元素的position属性要是relative，absolute或是fixed）
我之前的想法是让中间的内容置于顶层，不受div会因为某种hack导致位置变更遮挡了中间内容。
只需要设置下z-index属性值即可，左右可不设置，也可以设置以防万一，不同浏览器对z-index的默认值解析不同，可能会导致问题。
基本的布局架构就是如此，根据实际项目需求在此架构上完善，或者以后遇到这种类似的问题能打开思路，便算是有点收获了。

核心代码

  <style>body {/*因为浏览器默认body为margin:8px所以多加了16px*/min-width: 616px;
        }header {width: 100%;height: 40px;background-color: darkseagreen;
        }.container {/*height: 200px;*//*overflow: hidden;*/padding: 0 200px;
        }.middle {width: 100%;height: 200px;background-color: deeppink;float: left;/*position: relative;*/
        }.left {width: 200px;height: 200px;background-color: blue;float: left;margin-left: -100%;left: -200px;position: relative;
        }.right {width: 200px;height: 200px;background-color: darkorchid;float: left;margin-left: -200px;right: -200px;position: relative;
        }footer {clear: both;width: 100%;height: 30px;background-color: darkslategray;
        }</style>

ログイン後にコピー

<header><h4>Header内容区</h4></header><div class="container"><div class="middle"><h4>中间弹性区</h4><p>
                我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容</p></div><div class="left"><h4>左边栏</h4></div><div class="right"><h4>右边栏</h4></div></div><footer><h4>Footer内容区</h4></footer>

ログイン後にコピー

双飞翼

思路

双飞翼布局的方式跟圣杯在前部分是一样，不同之处主要在于如何处理中间的内容块被遮挡的问题
圣杯用padding的思路，使之压缩，但是父容器压缩，左右DIV位置变更，只能用相对位置进行left
设置位移为元素宽度来调整
而双飞翼的路线为采用的方式相比圣杯的父容器padding，
改变的是中间内容的内层div的外边框，相对来说对布局的破坏不大，
但是要采用这种方式又不破坏页面结构，就只能在中间内容div内部的再加个DIV设置margin或padding.
使之内容变相“压缩”等同padding效果，并且不会改变中间内容DIV外部的结构，只是内部的。
细心的人留意下我注释的代码，这里其实还有个CSS浮动的样式问题，出现这种情况有各种方式清除浮动，
我就不多讲解。大概有6种。

清除浮动(常用)

1.一般目前常用就是用：after伪元素给使用的浮动的父容器设置。

     新浪使用方式.clearfix:after{ content: &#39;&#39;;display: block;clear: both;height: 0;visibility: hidden;
        }.clearfix:after{  /*最简方式*/content: &#39;&#39;;display: block;clear: both;
        }

ログイン後にコピー

2.给父元素定高

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>.outer{border: 1px solid black;width: 300px;height: 50px;
        }.inner{width: 50px;height: 50px;background-color: #ff4400;margin-right: 20px;float: left;
        }.footer{background-color: #005FC3;width: 200px;height: 100px;
        }</style></head><body><div class="outer"><div class="inner"></div><div class="inner"></div><div class="inner"></div></div><div class="footer"></div></body></html>

ログイン後にコピー

3.利用 overflow:hidden 属性

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>.outer{border: 1px solid black;width: 300px;overflow: hidden;zoom: 1;/*兼容 IE*/
        }.inner{width: 50px;height: 50px;background-color: #ff4400;margin-right: 20px;float: left;
        }.footer{background-color: #005FC3;width: 200px;height: 100px;
        }</style></head><body><div class="outer"><div class="inner"></div><div class="inner"></div><div class="inner"></div></div><div class="footer"></div></body></html>

ログイン後にコピー

核心代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>双飞翼</title><style>header {width: 100%;height: 40px;background-color: darkseagreen;
        }.container {/*height: 200px;*//*overflow: hidden;*/
        }.middle {width: 100%;height: 200px;background-color: deeppink;float: left;word-break: break-all;
        }.left {width: 200px;height: 200px;background-color: blue;float: left;margin-left: -100%;
        }.right {width: 200px;height: 200px;background-color: darkorchid;float: left;margin-left: -200px;
        }footer {width: 100%;height: 30px;background-color: darkslategray;clear: both;
        }.div-middle {margin: 0 200px;/*padding: 0 200px;*/
        }</style></head><body><header><h4>Header内容区</h4></header><div class="container"><div class="middle"><div class="div-middle"><h4>中间弹性区</h4><p>
                    我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容</p></div></div><div class="left"><h4>左边栏</h4></div><div class="right"><h4>右边栏</h4></div></div><footer><h4>Footer内容区</h4></footer></body></html>

ログイン後にコピー