以前は、CSS レイアウトには 2 列、3 列、等しい幅、等しい高さなどが含まれることしか知りませんでした。レイアウトについてある程度意識し始めたのは Sina.com を見てからでしたが、ウェブサイトを模倣したり、設計図を復元したりするときは、まず全体の構造を観察し、それから同じ部分を見つけるために一般化します。コーディングを段階的に分割する方法について考えています。Zhang Xinxu のブログを参照するのが好きです。彼には非常に栄養価の高い内容がたくさんあります。また、彼からのフロー レイアウトも見て、いくつかの情報をランダムにチェックしました。もう一度レイアウトを出します。これは完全に個人的なメモです。必要に応じて参照してください。「CSS の習得」には、より詳細な情報が記載されています。それらの多くは私たちが考える価値があります。 Web ページのレイアウトには、固定幅レイアウト、流動レイアウト、およびフレキシブル レイアウトがありますが、より一般的に使用されるのは固定幅レイアウトです。その理由は非常に単純で、シンプルでラフで使いやすいからです。流動的で柔軟なレイアウトは、フォーラム Web サイトや個人のブログでよく使用されます。モバイル側で急速に発展した、制限のある柔軟なレイアウトも広く使用され始めています。rem の導入により、em の使用も修正され、改善されました。
固定レイアウトは主にピクセル モードを使用します。流体レイアウトを使用する場合、サイズはピクセルの代わりにパーセンテージを使用して設定されます。これにより、ウィンドウが変化するにつれて、流体レイアウトが拡大したり縮小したりすることができます。列幅も広くなります。逆に、ウィンドウが小さくなると、列の幅も小さくなります。流動的なレイアウトにより、スペースを非常に効率的に使用できます。ただし、流動的なレイアウトにも問題があるはずです。ウィンドウの幅が小さいと、行が非常に狭くなり、読みにくくなります。したがって、レイアウトが狭くなりすぎないように、最小幅をピクセルまたは em 単位で追加する必要があります。ただし、min-width の設定が大きすぎる場合は、固定幅レイアウトと同じ制限が発生します。
CSS3で導入された新機能のうち、メディアクエリはメディアを操作することでレスポンシブレイアウトを完成させるために使用されます。いわゆる応答性とは、Web サイトが複数の端末と互換性があることを意味します。柔軟なレイアウトは、要素の幅を (ブラウザーの幅ではなく) フォント サイズに応じて設定し、幅を em 単位で設定します。これにより、フォント サイズが大きくなるにつれてレイアウト全体が拡張されます。これにより、行が読みやすいサイズに保たれます。
もちろん、他のレイアウトと同様に、フレキシブル レイアウトにも固定幅レイアウトと同じ問題がいくつかあり、利用可能なスペースを最大限に活用できません。また、テキストのフォント サイズを大きくすると全体のレイアウトが大きくなるため、フレックス レイアウトがブラウザ ウィンドウよりも広くなり、水平スクロール バーが表示されます。この状況を防ぐには、コンテナ div に max-width を 100% に追加する必要がある場合があります。IE6 と互換性を持たせたい場合は、
拡張機能: 柔軟なレイアウト
上の図を見てください。これは固定幅レイアウトです。この図をもとにレイアウトを説明します。もちろん、この完全なページの作成方法を包括的に紹介するわけではありません。重要なポイントのみを説明します。
実際、柔軟なレイアウトを作成するのは比較的簡単ですが、このレイアウトはシンプルですが、このレイアウトの本質は詳細を把握することです。伸縮性のあるレイアウトにはこのような優れた利点がありますが、次のような致命的な欠陥があります。
1. このレイアウトに最小幅が設定されていない場合、ユーザーがウィンドウを十分に小さいサイズに縮小すると、致命的な影響が生じます。レイアウト上。レイアウトズレに重大な影響を与えます。
2. ページを柔軟にレイアウトすると、中の写真に大きな影響を与えます。なぜなら、これまでのところ、パーセンテージによる画像の拡大縮小の問題は解決されていないからです。
したがって、この記事ではレイアウトについてはあまり説明せず、上記の 2 つの問題を解決することについて説明します。上記 2 つの問題が解決されていれば、このレイアウトは比較的簡単になると思います。
1. 最小幅を解決します
CSS に詳しい友人なら、次の 4 つの属性があることを知っています:
1) Min-width: 最小幅
2) Max-width: 最大幅
3) Min-height: 最小の高さ
4) Max-height: 最大の高さ
これら 4 つのプロパティだけでこの問題を解決できます。満足していますか?この問題は解決できますが、ユーザーが最も使用しているブラウザである IE6 ではこれらの属性がサポートされていないという重大な問題があります。最もユーザー数の多いブラウザを捨てるわけにはいきません。
現在、IE6 にこれら 4 つの属性をサポートさせる問題を解決するには、インターネット上で 4 つの一般的な方法があります。
1）在CSS中expression来设置最小宽度，比较费内存。
2）用嵌套DIV,然后用margin偏移模仿实现，多冗余结构。
3）用JQ框架实现，为一个属性加一个JS框架，有点不划算。
4）用纯JS代码实现。
前面三种都有劣势，请各自选择最合适的方法，我偏重于最后一种，这是国外的一个牛人实现的，相关例子可以看这儿： http://www.doxdesk.com/software/js/minmax.html
有了这个JS文件，你只需要在头部调用这个JS文件就可以了。
PS:在演示模型中为了方便，我将这个JS作为内部引用的方式调用，你们在实际应用中将这个JS文件新建为一个JS外部文件，如下方式调用：
我们在样式表中将min-width应用到#wrapper和#footer这两个容器就行了，并分别设置它们宽度为100%，OK，现在我们解决了最小宽度的问题。
我们看看上面哪张图片，要做成弹性布局，就要解决页头图片的动态缩放。而这是一张图片，我们都知道图片是没有办法随比例缩放的，该怎么办呢？
我们可以换一个思维方式，将这张图片在PS中做一点改动，我们可以将这张图片分割成左右两部分，并将它们合并成一张图片。如下图所示：
第一图片在容器中以背景定位的方式左上定位，而第二张片则右下定位，用两个容器分装两张图片，内层的图片级别比外层图片级别高，它会浮动到第一张图片上盖住它，当然这第二张要做成透明底色的png或gif图片，因为png-24位透明图片在IE6下不受支持，所以我们改成PNG-8位的透明图片，这样虽说图片质量上有点影响，但可以保证在IE6中畅通无阻。
所以页头的结构层应该是如下的样子：
页头内容
そのような構造の場合、次のスタイルを書くことができます:
外部スタイル:
#header{height:150px;width:100%;background:#000 url(image/header-bg.png) no-repeat left top;}内部スタイル:
#inhead{height:150px;width:100%;background:url(image/header-bg.png) no-repeat right bottom;text-align:center;color:#fff;}その後改良により、ページヘッダーは柔軟な画像になり、ブラウザでは次のように表示されます。
このようにして、基本的に柔軟なレイアウトが完成します。最終的な効果は以下のとおりです:
最後に、このレイアウトには制限があり、すべての Web ページに適しているわけではないことを言及しなければなりません。このように配置されます。流体弾性レイアウト自体に欠陥があるためです。あまりに豪華なデザインや写真が豊富なページには、上記画像のように後退できない写真もあるため、使用できません。このため、このレイアウトの広範な普及が制限されていると思います。
コード ボックスの実行
页头背景可平铺整个浏览器宽度，而正文内容则始终居中显示，不管分辩率是多大。
このページでは、最小幅と伸縮性のある画像という 2 つの重要なテクニックを説明します。
フレキシブル レイアウトは min-width 属性を使用しますが、この属性は IE6 ではサポートされていないため、外国人による JS スクリプトが追加されました。このスクリプトにより、IE6 は幅 (高さ) の最小値と最大値の 4 つの属性もサポートできるようになります。 ).
実際、伸縮性のあるレイアウトで最も難しいのはレイアウトではありません。内部の写真がどのように適応できるかについて、つまり写真も柔軟にできるということです。このレイアウトを行う場合、これが最も優先されます。
ヘッダー画像は弾性画像の典型的な応用例です。ウィンドウを縮小してご覧ください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
