ホームページ > 記事 > ウェブフロントエンド > これは、history_html/css_WEB-ITnose にある CSS アダプティブ レイアウトの最も包括的な概要かもしれません。
これは、history_html/css_WEB-ITnose にある CSS アダプティブ レイアウトの最も包括的な概要かもしれません。
- WBOYオリジナル
- 2016-06-24 11:20:041043ブラウズ
このタイトルは新しい広告法に厳密に準拠しています。あなたがどんなに不満を抱いていても、私は法律には違反していません。これ以上ナンセンスなことはやめて、本題に入りましょう。
いわゆるレイアウトには、実際にはサイズと位置という 2 つの意味が含まれています。つまり、サイズと位置に関連するすべてのプロパティをレイアウトに使用できます。
一般に、サイズ関連のボックス モデル、3 つの位置決めメカニズム (通常のフロー、フローティング、および絶対位置決め)、CSS3 の変換、フレキシブル ボックス モジュール、実験ではグリッド モジュールがレイアウトで使用されます。庭に行くとフローティングレイアウト、インラインブロックレイアウト、フレキシブルボックスレイアウトという言葉をよく見かけます。レイアウトが少し理解できたので、整理するためにまとめを作成します。たくさんの情報を読んだものの、実際にレイアウトを行うときにレイアウトがわからない場合は、この記事がアイデアを明確にするのに役立つことを願っています。
一つ言っておきたいのは、レンダリングが表示されたら、急いでコードを入力しないでください。まず、ページの構造を明確に考え、さまざまなデバイスでどのように表示する必要があるかを明確にし、最適なレイアウト計画を立てます。本当に時間は必要ありません。
サイズ関連
なぜ最初にサイズについて話す必要があるのですか?サイズはレイアウトにおいて非常に中心的な役割を果たすため、レイアウトの配置は要素間の関係を変更するだけであり、サイズがなければ意味がありません。たとえば、通常はマージンを使用して他の要素との距離を制御します。これがレイアウトです。
幅とマージンは簡単すぎて、すでにマスターしていると思う人も多いでしょう。私も最初に 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 ウェブサイトはフロート レイアウトを使用しています コストを考慮すると、大幅な変更が行われる可能性は非常に低いため、フローティングが役に立たないとは言わず、いつでも変更できる可能性があります。それを維持してください！代表的なウェブサイト：タオバオ、テンセント、JD.com、百度など。
フローティングについてはよく聞きますし、ブログでもフローティング レイアウトの使用についてたくさん紹介されています。フローティングはもともとテキストの折り返しに使用されていましたが、レイアウトにも引き継がれました。これは運命です。私の理解: フローティング レイアウトの核心は、通常のフローから要素を取得し、幅/高さ、マージン/パディングを使用して要素を配置することです。通常の流れから切り離された要素は、地球の重力から切り離されたのと同じであり、通常の流れと同レベルではありません。これはレイヤーの概念に似ています。高さが異なるため、他の要素と重なったり、負のマージンを使用して親要素の外側に配置したりすることができます。これを理解すると、フローティング レイアウトを理解するのが簡単になります。
これを理解すると、他のレイアウトがより簡単になります:
左、幅は固定、高さはコンテンツによって固定または拡張できます
右、幅は固定され、高さは調整可能です。コンテンツによって固定または拡張できます
中央、ブラウザの幅に適応でき、高さはコンテンツによって固定または拡張できます。
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> 原理非常简单，左右侧边栏定宽并浮动，中部内容区放最后不浮动、默认width：auto并设置相应外边距，让左右侧边栏浮动到上面。注意：子元素设置为浮动之后，父对象的高度就坍塌了，需要设置父对象后的元素清除浮动，这样父对象的高度才能被浮动子元素撑起来了。
当然，我们也要问一下，为啥父对象高度会坍塌呢？上面也说过了，浮动元素已经脱离了普通流，父对象所在的普通流比喻成地表，那浮动元素就已经上天了。但是父对象还在地表啊，从外太空看浮动元素在父对象里面，但是其实并不在，又怎么能撑开父对象呢？宽度如果我们不设置的话，其实也是为0的，因为父对象里面空空如也，所以宽高为0。
要撑开的办法就两个，1是让父对象也上天（。。。你咋不上天呢），2是把浮动元素的边框边界拉下来。
父对象也上天（即浮动）的话，那就不能实现宽度自适应了。因为float元素的width：auto是包裹内容的，参考前面说的！
办法2就是在后面的元素里加一个clear语句。说到这个问题就要扯到clear与BFC了，我就不献丑了。传送门：https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear
这个三列布局还有个双飞（是双飞翼！想啥呢）的变种，就是在HTML中center部分也就是内容区提到最前面，也就是内容先行渲染。在网络不好的时候，左右双翼能不能出来不要紧，先让主体内容出来！这种想法，明显的优秀工程师思维，但，尼玛的双翼都是广告啊。广告不出来，哪能赚钱养你们这群工程师？所以提出双飞的玉伯才离开了淘宝？？？（纯属意淫，如真属实，当我扯淡，哈哈哈！）
先上码：
<!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> 思路：
1)既然HTML里面要让center放前面，为了让left跑到center前面，那center也必须浮动了，否则因为都是块元素他们会分两行。
2)浮动之后还要让center宽度自适应，那明显width只能100%，然后在父元素中设width:auto，还有两侧margin，其实也就是父对象宽度自适应，center只是继承content的宽度。
3)对left使用负的margin让他们浮动到上方去。
代码里面我用到了一个calc()，这个CSS3带来的计算函数简直酷毙了！本例里如果不使用calc函数，那么就需要wrap左边距为0，left左边距-100%，然后center多加一层子块DIV设置margin-left：100px，可以达到同样的效果！calc函数与百分比配合就足以实现自适应的要求！目前所有的自适应布局都在利用浏览器来为我们计算尺寸，但是有了calc之后我们就可以自己制定规则！单是想想都高潮了吧？
总结：使用浮动来进行布局，一个比较大的问题是清除浮动。这个可以使用一个after伪类来清除。更大的问题是浮动性像水一样向上流动，难以把握。在元素较多而且元素高度尺寸不一的情况下，单纯使用浮动只能实现上端对齐，这对于适应多种设备的布局就显得力不从心了。目前的做法是牺牲一部分内容，将元素做成等高排列，从美观上看也当然也是极好的，比参差不齐的排列要美观。
普通流布局
普通流布局：display : inline-block！这是一个传说中取代float布局的存在。看了一些网站，PC端浮动为主，移动端的也用的不多啊，已经有些使用flex的了，说好的inline-block一统江湖呢？
使用inline-block之前先处理点小障碍：inline-block元素会有4px左右的空隙，这个是因为我们写代码时候的换行符所致。
解决办法很简单：在inline-block的父元素中设置样式font-size：0；letter-spacing: -4px; 然后设置inline-block的所有兄弟元素 font-size：值；letter-spacing: 值px; 恢复正常的显示。
另外还有一点需要注意的是inline-block默认是基线对齐的，而inline-block的基线又跟文本基线一致，所以在内容不同的时候并不能水平对齐。只需要用vertical-align显式声明一下top/bottom/middle对齐即可。这里补充一下基线的内容，没你想的那么简单哦。分有文字和无文字两种情况：
1）无文字：容器的margin-bottom下边缘。与容器内部的元素没一毛钱关系。
2）有文字：最后一行文字的下边缘，跟文字块（p,h等）的margin、padding没关系！注意是最后一行，无论文字在什么子对象容器内在什么位置都没关系，浏览器会找到最后一行文字对齐底部。
你们感受一下：
警示：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> 这里也没什么好说的，用到的也是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> 总结：相比浮动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> 父元素为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; 的样式。
ただし、上記のチュートリアルでは各属性の詳細な説明はありません。詳細でわかりやすく、非常に美しい写真が含まれている Ruan Yifeng のブログを読むことをお勧めします。 http://www.ruanyifeng.com/blog/ 2015/07 /flex-grammar.html
概要: モバイル端末でのフレキシブル ボックスの適用はますます一般的になるため、この一連のモデルは研究する価値があります。文法規則は人間の性質に非常に近く、非常に柔軟で、もちろんブラウザの互換性も非常に優れています。中国で繁栄しているモバイルブラウザの大きな落とし穴は何ですか?様子見してみます~
その他
その他 CSS3 のposition:relativeやtransformなども位置決めを実現できますが、やはり本来の通常のフローの穴を占有するため、レイアウトに使用されることはほとんどありません。 Transform は非常に優れたもので、平らなマテリアルを使用してさまざまな 3D 効果を作成でき、JS を使用せずに実行できます。この記事はすでに非常に長いので、詳細は省略します。彼女の話については、今後詳しく記事を書きます。
以上をまとめると！文字数が多すぎるのでバランスを整えるために写真を載せます~~~ 良いと思ったらいいねお願いします！何かおかしいと思ったら、私に連絡してください！