ホームページ >ウェブフロントエンド >htmlチュートリアル >これは、CSS アダプティブ レイアウト_html/css_WEB-ITnose の最も包括的な概要である可能性があります。
これは、CSS アダプティブ レイアウト_html/css_WEB-ITnose の最も包括的な概要である可能性があります。
- WBOYオリジナル
- 2016-06-21 08:48:20998ブラウズ
タイトルは新しい広告法に厳密に準拠しています。どんなに不満があっても、私は法律に違反していません。これ以上ナンセンスなことはやめて、本題に入りましょう。
いわゆるレイアウトには、実際にはサイズと位置という 2 つの意味が含まれています。つまり、サイズと位置に関連するすべてのプロパティをレイアウトに使用できます。
一般的に、レイアウトでは次のものが使用されます: サイズ関連のボックス モデル、3 つの位置決め機構 (通常のフロー、フローティング、および絶対位置決め)、CSS3 の変換、フレキシブル ボックス モジュール、および実験でのグリッド モジュール。庭に行くとフローティングレイアウト、インラインブロックレイアウト、フレキシブルボックスレイアウトという言葉をよく見かけます。レイアウトが少し理解できたので、それをまとめるためにまとめを作成します。たくさんの情報を読んだものの、実際にレイアウトを行うときにレイアウトがわからない場合は、この記事がアイデアを明確にするのに役立つことを願っています。
注意: レンダリングが表示されたら、急いでコードを入力しないでください。まず、ページの構造を明確に考え、さまざまなデバイスでどのように表示する必要があるかを明確にし、最適なレイアウト計画を立てます。本当に時間は必要ありません。
サイズ関連
なぜ最初にサイズについて話す必要があるのでしょうか?サイズはレイアウトにおいて非常に中心的な役割を果たすため、レイアウトの配置は要素間の関係を変更するだけであり、サイズがなければ意味がありません。たとえば、通常はマージンを使用して他の要素との距離を制御します。これがレイアウトです。
width と margin は簡単すぎて、すでにマスターしていると思う人も多いでしょう。私も最初に CSS を学び始めたときはこのような考えを持っていましたが、CSS は理解するのが簡単で簡単だと思っていましたが、後になって実際には多くのことを習得していないことに気づきました。 Zhang Xinxu が教えた政治的教訓を見てみましょう: http://www.zhangxinxu.com/wordpress/2012/07/bottleneck-css-study/
パーセント について話しましょうこの機能は非常に便利で、アダプティブ レイアウトでよく使用されます。ブラウザのサイズの変更は、ルート ノード html の長さと幅の変更であり、% を使用してブラウザのサイズと要素のサイズを接続し、適応性を実現できます。
もう 1 つの興味深いものは auto です。 auto は多くのサイズ値のデフォルト値であり、ブラウザによって自動的に計算されます。 1 つ目は、ブロックレベル要素の水平方向の自動です。ブロックレベル要素のマージン、ボーダー、パディング、およびコンテンツの幅の合計は、親要素の幅と等しくなります。 auto 属性を使用すると、親要素の幅が変更されると、それに応じて要素の幅も変更されます。
ただし、要素が float に設定されている場合、要素の幅はコンテンツの幅になり、コンテンツによって引き伸ばされます。これをラッピングと呼びます。 Overflow | Position:absolute | float:left/right はすべて折り返しを生成でき、置換要素も折り返しを持つことができます。 ラッピング要素で width: auto; を使用して、要素の幅をブラウザの幅に適合させることはできません。
高さ方向：余白が重なり、余白自動は0になります。 この2点に注意が必要です。執筆方向などについては、比較的接点が少ないので割愛します。
では、なぜ margin:auto ペアは垂直方向の値を計算できないのでしょうか?非常に単純ですが、垂直方向は無限に拡大できるように設計されており、コンテンツが増えれば増えるほど、ブラウザは拡大するためのスクロール バーを生成します。そのため、垂直方向には false が返され、0 になります。 。
使用法: 幅と高さを使用してサイズを制御し、各方向のマージン値を使用して境界線または配置用の他の要素からの距離を制御します。
フロート
現在、ほとんどの PC ウェブサイトはフロート レイアウトを使用しています コストを考慮すると、大幅な変更が行われる可能性は非常に低いため、フローティングが無駄だとは言わないでください。 、チャンスは必ずあります。 代表的なウェブサイト: タオバオ、テンセント、百度、BAT はすべてここにあります。
フローティングについてはよく聞きますし、ブログでもフローティング レイアウトの使用についてたくさん紹介されています。フローティングはもともとテキストの折り返しに使用されていましたが、これは運命です。私の理解: フローティング レイアウトの核心は、要素を通常のフローから取り出し、幅/高さ、マージン/パディングを使用して要素を配置することです。通常の流れから切り離された要素は、地球の重力から切り離されたのと同じであり、通常の流れと同レベルではありません。これはレイヤーの概念に似ています。高さが異なるため、他の要素と重なったり、負のマージンを使用して親要素の外側に配置したりすることができます。これを理解すると、フローティング レイアウトを理解するのが簡単になります。
これを理解した後、他のレイアウトはより単純になります:
左、幅は固定、そして高さは固定または拡張できます。コンテンツは
右に展開されます。幅は固定です。高さはコンテンツ
中央によって固定または拡張できます。ブラウザの幅に適応できます。高さはコンテンツによって固定または拡張できます。
HTML と CSS:
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>宽度自适应布局</title> <style> .wrap { background-color: #D66464; } .clearfix:after { content: ""; clear: both; display: block; } .left { float: left; width: 100px; background: #00f; height: 180px; } .right { float: right; width: 150px; background: #0f0; height: 200px; } .center { background: #FFFFFF; margin-left: 110px; margin-right: 160px; height: 150px; } </style> </head> <body> <div class="wrap clearfix"> <div class="left">left，宽度固定，高度可固定也可以由内容撑开。</div> <div class="right">right，宽度固定，高度可固定也可以由内容撑开。</div> <div class="center">center，可以自适应浏览器宽度，高度可固定也可以由内容撑开。</div> </div> </body></html>View Code 原理は非常に単純です。左側と右側のサイドバーは固定幅で、中央のコンテンツ領域は最後に配置され、デフォルトの幅は自動で、対応するマージンが設定されます。左右のサイドバーが上に浮くようにします。注: 子要素を float に設定すると、親オブジェクトの高さが折りたたまれます。親オブジェクトの高さを float 子要素でサポートできるように、親オブジェクトの後に要素を設定する必要があります。 。
もちろん、なぜ親オブジェクトの高さが崩れるのかという疑問も持たなければなりません。 前述したように、浮遊要素は通常の流れから分離されており、親オブジェクトが存在する通常の流れは地表に見立てられ、浮遊要素はすでに空に到達しています。しかし、親オブジェクトはまだ表面上にあります。宇宙から見ると、浮遊要素は親オブジェクトの内部にありますが、実際には親オブジェクトを開くにはどうすればよいでしょうか。幅を設定しない場合、親オブジェクトが空であるため、幅と高さは実際には 0 になります。
拡張する方法は 2 つだけです。 1 つ目は、親オブジェクトを空に上げる方法です (... 空に上がってみませんか)。 2 つ目は、フローティング要素の境界線をプルダウンすることです。
親オブジェクトも空に持ち上げられている (つまり、浮いている) 場合、幅の適応は達成できません。 float 要素の width:auto はコンテンツをラップするため、前述の説明を参照してください。
方法 2 は、次の要素に明確なステートメントを追加することです。この件に関してはクリアとBFCの話になるので恥ずかしくないです。ポータル: https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear
この 3 列のレイアウトには、ダブルフライング (二重飛行の翼) もあります。何を考えていますか?つまり、HTML では、中央部分、つまりコンテンツ領域が最初に記述されます。つまり、コンテンツが最初に表示されます。ネットワークが良くないときは、左右の翼が出てくるかどうかは関係ありません。メインコンテンツを先に出させてください。このような考え方は当然優秀なエンジニアの考え方ですが、両翼は宣伝です。広告がなければ、どうやってお金を稼いであなたのようなエンジニアをサポートできるでしょうか?ダブルキャリアを提案した余叔父さんがタオバオを去ったのはそのためですか? ? ? (まったくの猥褻です。本当ならナンセンスとして扱ってください、ハハハ!)
最初のコード:
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>宽度自适应布局</title> <style> .wrap { background-color: #FBD570; margin-left: 100px; margin-right: 150px; } .clearfix:after { content: ""; clear: both; display: block; } .left { float: left; width: 100px; background: #00f; height: 180px; margin-left: calc(-100% - 100px); } .right { float: right; width: 150px; background: #0f0; height: 200px; margin-right: -150px; } .center { background: #B373DA; height: 150px; float: left; width: 100%; } </style> </head> <body> <div class="wrap clearfix"> <div class="center">center，可以自适应浏览器宽度，高度可固定也可以由内容撑开。</div> <div class="left">left，宽度固定，高度可固定也可以由内容撑开</div> <div class="right">right，宽度固定，高度可固定也可以由内容撑开</div> </div> </body></html>View Code アイデア:
1 ) HTML では中央を前に配置する必要があるため、左を中央より前に配置するには中央もフローティングにしなければなりません。そうしないと、ブロック要素であるため 2 行に分割されます。
2) フローティング後、中央の幅は 100% のみに設定する必要があります。実際には、親要素の幅は 100% に設定されます。親オブジェクトはadaptiveであり、centerはコンテンツの幅を継承するだけです。
3) 左側にマイナスのマージンを使用して、それらを上に浮かせます。
コードでは calc() を使用しました。CSS3 によってもたらされたこの計算関数はとてもクールです。この例では、calc 関数を使用しない場合は、左マージンを 0 にラップし、左マージンを -100% にラップしてから、中央にサブブロック DIV の追加レイヤーを追加して margin-left を設定する必要があります。 : 100px で同じ効果が得られます。適応要件を達成するには、計算関数とパーセンテージを組み合わせるだけで十分です。現在のすべてのアダプティブ レイアウトはブラウザを使用してサイズを計算しますが、calc を使用すると独自のルールを作成できます。考えただけでイキそうになりますよね？
概要: レイアウトにフロートを使用する場合、大きな問題はフロートをクリアすることです。これは、after 疑似クラスを使用してクリアできます。さらに大きな問題は、フロートが水のように上に流れて掴みにくいことです。要素の数が多く、要素の高さやサイズが異なる場合、フローティングを使用するだけでは上部の位置合わせしか実現できず、複数のデバイスのレイアウトに適応するには不十分です。現在の手法は、内容の一部を犠牲にして要素を等高に配置する方法ですが、見た目にももちろん優れており、不均等に配置するよりも美しくなります。
通常のフローレイアウト
通常のフローレイアウト: 表示: inline-block!これは、フロート レイアウトの伝説的な代替品です。いくつかのウェブサイトを見てみると、PC 版は主にフローティングであり、モバイル版はあまり使用されていません。世界を席巻すると約束されている flex を使用しているものはどうでしょうか。
inline-block を使用する前に、小さな障害に対処する必要があります。inline-block 要素には約 4px の隙間があります。これは、コードを記述するときに改行文字が原因です。
解決策は簡単です。 inline-block の親要素でスタイル font-size: 0; Letter-spacing: -4px; を設定します。 inline-block の兄弟要素 -size:value;letter-spacing:value px; 通常の表示に戻します。
もう 1 つ注意すべき点は、inline-block はデフォルトでベースラインに揃えられており、inline-block のベースラインはテキストのベースラインと一致しているため、コンテンツが水平である場合は水平にすることはできません。アライメントが異なります。上/下/中央の配置を明示的に宣言するには、vertical-align を使用するだけです。ここでベースラインの内容を追加しましょう。これはあなたが思っているほど単純ではありません。テキストありとテキストなしの 2 つの状況があります:
1) テキストなし: コンテナーのマージン下の下端。コンテナ内の要素とは何の関係もありません。
2) テキストがあります: テキストの最後の行の下端は、テキスト ブロック (p、h など) のマージンやパディングとは何の関係もありません。これが最後の行であることに注意してください。テキストがサブオブジェクト コンテナ内のどこにあるかは関係ありません。ブラウザはテキストの最後の行を見つけて下に配置します。
你们感受一下：
警示： inline-block的基线是最后一行文字的底部， flex里面的基线是第一行文字的底部（请看下文阮老师的文章）
满满的都是泪啊。。。既然都叫baseline，何必呢？
使用inline-block进行圣杯布局：
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>宽度自适应布局</title> <style> .wrap { background-color: #FBD570; font-size: 0; letter-spacing: -4px; /*用于兼容safari，根据不同字体字号或许需要做一定的调整*/ margin-left: 100px; margin-right: 150px; } .wrap * { font-size: 1rem; letter-spacing: normal; } .left { display: inline-block; vertical-align: top; width: 100px; background: #00f; height: 180px; margin-left: -100px; } .right { display: inline-block; vertical-align: top; width: 150px; background: #0f0; height: 200px; margin-right: -150px; } .center { display: inline-block; vertical-align: top; background: #B373DA; height: 150px; min-width: 150px; width: 100%; } </style> </head> <body> <div class="wrap"> <div class="left">left，宽度高度固定</div> <div class="center">center，可以自适应浏览器宽度，高度固定。</div> <div class="right">right，宽度高度固定</div> </div> </body></html>View Code 这里也没什么好说的，用到的也是width：auto和width：100%这两点，简单知识点的简单用法。
双飞的话，代码跟圣杯的基本相同，注意在html的顺序变为center>right>left，只改左栏移动的margin-left: calc(-100% - 100px)到预定位置即可。不能用calc的话可以在center里面再加一层，跟浮动一样的处理方式。更简单的方法是使用CSS3带给我们的box-sizing属性。请看代码：
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>宽度自适应布局</title> <style> .wrap { background-color: #FBD570; font-size: 0; letter-spacing: -4px; /*用于兼容safari，根据不同字体字号或许需要做一定的调整*/ margin-right: 150px; } .wrap * { font-size: 1rem; letter-spacing: normal; } .left { display: inline-block; vertical-align: top; width: 100px; background: #00f; height: 180px; margin-left: -100%; } .right { display: inline-block; vertical-align: top; width: 150px; background: #0f0; height: 200px; margin-right: -150px; } .center { display: inline-block; vertical-align: top; background: #B373DA; height: 150px; min-width: 150px; width: 100%; box-sizing: border-box; padding-left: 100px; background-origin: content-box; background-clip: content-box; } </style> </head> <body> <div class="wrap"> <div class="center"> center，可以自适应浏览器宽度，高度固定。 </div> <div class="right">right，宽度高度固定</div> <div class="left">left，宽度高度固定</div> </div> </body></html>View Code 总结： 相比浮动inline-block更加容易理解，也更符合我们的认知，结合盒子模型的几个控制属性就可以进行布局了。对于元素高度不同的情况，目前浮动布局的做法都是将元素做成等高元素进行展现，这从美学上看也符合整齐的要求，不过牺牲了一部分内容。但inline-block有vertical-align属性，可以很好地解决元素高度不同而带来的布局问题。用过之后，你也会喜欢上inline-block的。。。至少我会！
绝对定位
前面的浮动和普通流中其实定位都是靠盒子模型控制的，与我们常说的定位还是有差别的。而绝对定位就是我们平常所说的定位，给定参考坐标系+坐标确定位置。关于绝对定位的资料太多，我就不说了。提一点就是absolute定位的基准是最近的非static定位父对象，而fixed是相对html根节点的定位。两种定位都会脱离普通流，跟之前说的浮动一样，上天了。
当然，他们跟浮动在空间中的位置还是有差别的，项目中有遇到这个问题的请参考张大婶的文章： http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 还是要结合项目来看，否则看过也只是看过而已，并不会存到你的脑子里，毕竟还是相当抽象相当理论性的东西。借用张大神的一个总结图：
使用绝对定位（特指absolute）做自适应布局跟前面两种方式没太大差别，宽度自适应还是在auto和100%上做文章，而位置则由top/bottom/left/right等控制。还是以圣杯布局来举例：
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>宽度自适应布局</title> <style> .wrap { position: relative; background-color: #FBD570; margin-left: 100px; margin-right: 150px; height: 250px; } .left { position: absolute; top: 0; left: -100px; width: 100px; background: #00f; height: 180px; } .right { position: absolute; top: 0; right: 0; width: 150px; background: #0f0; height: 200px; margin-right: -150px; } .center { position: absolute; top: 0; left: 0; background: #B373DA; height: 150px; min-width: 150px; width: 100%; } </style> </head> <body> <div class="wrap"> <div class="center"> center，可以自适应浏览器宽度，高度固定。 </div> <div class="left">left，宽度高度固定</div> <div class="right">right，宽度高度固定</div> </div> </body></html>View Code 父元素为relative，子元素为absolute，这样的话，又会出现跟浮动一样的问题：父对象高度坍塌，子元素不能撑起父对象。原因也跟浮动一样，解决办法的话目前我知道的只有给父对象指定一个确定height值，大家如果有更好的办法，请联系我！
总结： 单纯使用绝对定位进行自适应布局的情况很少，一般绝对定位都用在尺寸固定的元素定位上。而且fixed定位的渲染效率很低，因为它会频繁触发浏览器的重排。另外提一点：CSS3的transform会对绝对定位产生影响哦~比如说让fixed定位不再固定在浏览器视窗的黑魔法： http://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/
弹性盒子
CSS3中对布局影响最大的莫过于弹性盒子模块了，这是一套区别于以往盒子模型布局的全新方案。上面几种方法你可以看到，为了实现自适应我们用的都是width：auto和100%的嵌套以及各种边距的移动定位，这套规则并不符合我们的认知。为什么不能开拓出一块区域，横竖排列都可以，内部所有元素的尺寸可以按照一个规则和这个区域的大小联系起来？终于CSS3做出了改变，引入了 flex弹性布局方案，弹性盒布局有如下优势： 1.独立的高度控制与对齐。 2.独立的元素顺序。 3.指定元素之间的关系。 4.灵活的尺寸与对齐方式。
在MDN上有非常简单易懂的基础教程 ： https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
上面也已经给出了圣杯布局的自适应布局方案，所以代码就不贴了 不过这个例子实现的是3栏成比例缩放，左右栏如果需要固定值的话可以写成 flex: 0 0 150px; 的样式。
但是上面的教程没有给出各个属性的详细解释，建议看看阮一峰的博文，详细易懂而且配图超漂亮的有木有： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
要約: モバイル端末でのフレキシブル ボックスの適用はますます一般的になり、このモデルは研究する価値があります。文法規則は人間の性質に非常に近く、非常に柔軟で、もちろんブラウザの互換性も非常に優れています。隆盛を極める国産モバイルブラウザの大きな落とし穴とは何でしょうか。様子見してみます〜
その他
他には CSS3 のposition:relativeやtransformなどで位置決めが実現できますが、やはり本来の通常のフローの穴を占有するため、あまり使用されません。 . 何かをレイアウトすること。 Transform は非常に優れたもので、平らなマテリアルを使用してさまざまな 3D 効果を作成でき、JS を使用せずに実行できます。この記事はすでに非常に長いので、詳細は省略します。彼女の話については、今後詳しく記事を書きます。
以上です！文字数が多すぎるのでバランスを整えるために写真を載せます～～～良いと思ったらいいねお願いします！何かおかしいと思ったら、私に連絡してください！
(画像出典:有名写真家シャオヤン、転載の際は出典を明記してください)
オリジナル記事、転載の際は出典を明記してください！この記事へのリンク: http://www.cnblogs.com/qieguo/p/5421252.html