ホームページ > 記事 > ウェブフロントエンド > CSS ネイティブ レイアウト メソッドとは何ですか?
CSS ネイティブ レイアウト メソッドとは何ですか?
- 零下一度オリジナル
- 2017-06-26 09:14:451059ブラウズ
前書き
実際、インターネット上には Web ページのネイティブ レイアウトのメソッドが多数あり、おそらく Flow (フロー レイアウト モデル)、Float (フローティング レイアウト モデル)、Layer (階層レイアウト モデル) が考えられます。
fc430c7db1eecf4621f4fc8a5479f894
フロー レイアウト
フロー レイアウト モデルは、実際にはデフォルトの 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: '';display: block;clear: both;height: 0;visibility: hidden;
}.clearfix:after{ /*最简方式*/content: '';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>End
本篇只做阶段性的初级总结，原谅我没有贴出代码的效果图，以后有机会再扩展并进行效果图片展示，希望大家自己在编辑器下尝试效果。
学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流
以上がCSS ネイティブ レイアウト メソッドとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。