CSSを使用してimplement_html/css_WEB-ITnoseを実行したいだけです-htmlチュートリアル-php.cn

フロントエンドで書いています

あなたがページボーイであろうと、Node サービス開発者であろうと、フルエンドマスターであろうと、私たちは皆フロントエンドエンジニアであることに疑いの余地はありません。私たちは究極のページに対する鋭い感覚を持っています。それがページの実装の高尚な方法であれ、ページの究極のパフォーマンスであれ、ページの完璧な表示であれ、これらは私たちのたゆまぬ追求の目標です。他人から見れば他のページと同じように見えても、自分だけが知っているユニークさに密かに喜ぶこともあります。

そして今日話したいのは、私たちの最も身近な古い友人である CSS についてです。退屈な構文の話はやめて、ビジネスにおける独自の純粋な CSS 実装を見てみましょう。この旅を通して、皆さんが驚きやインスピレーションさえ得られることを願っています。。

なぜ、なぜ

「やるべきことがたくさんあり、忙しすぎて追いつくことができません。この CSS に多くの時間を費やすつもりですか?

いいえ、いいえ、いいえ、私たちがやるべきことは何ですか?」もちろんそうではありません。技術の追求を満たすだけではありませんが、大きなメリットがあります。

私の意見は次のとおりです:

CSS は UI とより密接に統合されます。
CSS を使用して実装すると、JS の計算が減り、スタイルの変更が減り、再描画が減り、レンダリング効率が向上します。これは一種のモジュール化であり、Web コンポーネントのコンポーネント化の考え方に沿ったものです。
私たちのお気に入り、より強力です~

。

「わかりました、興味深いようですが、いつ CSS を使用して大きなことを行うことができますか?」

私の意見では:

実装されたオブジェクトは非対話型 UI です

これを実行しても過度の効果は得られません。ドム。最も耐えられないのは肥大化したページであることを知っておく必要があります。
これにより UI が完全に実装され、すべてのシナリオがカバーされます。そうしないと、デザインが製品と一致しなくなります。

どうやって、何をすればいいのか

「でも、どうやってカッコよくするのかまだ分からない」

私の個人的な意見:

レイアウトの美しさ、ボックスモデルを理解する、さまざまなレイアウトに慣れる忘れないでください。これが私たちの基盤です

適応性の美しさは、ブラウザーに任せてください。私たちがしなければならないことは、ルールについて考えることです
魔法、新しいテクノロジー、ヒントは常に与えられます。あなたは、ある瞬間にあなたが最も必要とする援助です；
過去から学びなさい、罠の王、あなたはすでに何百もの戦いを経験しました、あなたは何を恐れていますか？

モバイル QQ ビジネスの 2 つの実践例を使用して、CSS の魅力を誰もが体験できるように導きましょう。

1. モバイル QQ で友達がどこに食べ、飲み、遊びに行くかを示す 9 マスのグリッドチャート

下の写真は、モバイルで友達がどこに食べ、飲み、遊びに行くかを示す 9 マスのグリッドチャートのアイコンですQQ:

上の図から次のニーズを分析できます:

画像サイズの適応性

最も複雑な 6 枚の画像レイアウトを例として取り上げ、純粋な CSS で実装する方法を段階的に見てみましょう。

float レイアウト

最も簡単で単純な解決策は float レイアウトです:

画像サイズ適応

画像の数が異なる場合、画像は指定どおりに配置されます
画像の隣に 1 ピクセルの空白のギャップがあります
ここの親要素は不明です。高さにパーセントを使用しても機能しません。パディングのパーセント値は親要素の幅に基づいて計算されます。padding-top を使用して高さを拡張できます。

疑似コードを見て、クリックしてデモを見てみましょう

<divclass="float">    <divclass="item">1</div>    ...    <divclass="item">6</div></div>

ログイン後にコピー

.float {    overflow: hidden;}.item {   float: left;    padding-top: 33.3%;    width: 33.3%;    border-right: 1px solid #fff;    border-top: 1px solid #fff;}.item:nth-child(1) {    padding-top: 66.6%;    width: 66.6%;}.item:nth-child(2), .item:nth-child(3), .item:nth-child(6) {    border-right: 0 none;}.item:nth-child(1), .item:nth-child(2) {    border-top: 0 none;}

ログイン後にコピー

以下に示すように、実際の効果は理想的ではありません:

float レイアウトの利点は次のとおりであることがわかります。 DOM 構造は非常に単純ですが、欠点は空白の位置がずれやすいことです。その利点と欠点は、JS 計算バージョンに非常に適しています。

フレックスレイアウト

他に誰がいますか？フレックス！フレックスレイアウトには次の重要な機能があります

可以将 flex 布局下的元素展示在同一水平、垂直方向上；
可以支持自动换行、换列（移动端-webkit-box暂不支持，好消息是从iOS9.2、Android4.4开始都支持新flex了）；
可以指定 flex 布局下的元素如何分配空间，可以让元素自动占满父元素剩余空间；
可以指定 flex 布局下的元素的展示方向，排列方式。

这里面的子元素同一水平、垂直方向展示对我们很有帮助，它使我们更容易控制子元素的排列，而不会错位。

使用 flex 布局与 float 布局不同的地方在于，移动端目前主要还是-webkit-box，因此图片个数不同时，我们需要使用不同的html，组合出不同的块。

flex 布局上下划分

来，我们快动手分块吧！新解决方案出现导致的肾上腺素上升，使我们迫不及待使用了传统css文档流自上而下的方式来划分，我称为 上下划分 ，如下图：

上面一块包含左侧1个2/3的大块，右侧2个1/3的小块，下面一块则是3个1/3的小块。

我们指定2/3的大块宽度是66.6%，1/3的小块宽度是33.3%（实际可以使用-webkit-box-flex来分配，这里为了下面的计算方便）。

来看下实际效果，你也可以猛击demo 来查看源码：

demo中我们看到中间那条竖空白间隙错位了，为什么？按照预期我们上面块左侧宽度66.6%，下面块左侧宽度33.3% + 33.3%，两个宽度应该相等才对。

然而我们忽略了flex一个重要特性，子元素会自动占满父元素剩余空间，这时子元素宽度计算受flex控制，下面块的3个子元素宽度计算并非一定是相等的，会有些许差异，此时 66.6% != 33.3% + 33.3% 。

怎么破！别急，我们刚刚只是受到了肾上激素的影响，让我们冷静下来重新思考如何划分。

flex 布局左右划分

问题在于竖间隙涉及到的左右侧宽度计算不稳定，既然如此，我们可以考虑依据竖间隙 左右划分 ，排除不稳定因素，如下图：

这样就解决了竖间隙错位问题，但我们依然有所担心，中间的横间隙会错位吗？我们来算一下。

整体父元素宽度确定，为W；

整体父元素高度由子元素撑开，不确定；

左侧大块高度：左侧flex父元素宽度（W * 66.6%） * 100% = W * 66.6%；

左侧小块高度：左侧flex父元素宽度（ W * 66.6%） * 50% = W * 33.3%；

右侧小块高度：右侧flex父元素宽度（ W * 33.3%） * 100% = W * 33.3%。

依然是66.6%与33.3% + 33.3%的等式，但这次高度计算会受 flex 影响吗？

不会，因为此时整体父元素的高度是不确定的，是由子元素内容撑开的，flex的高度也是由子元素来撑开的。

最终 66.6% === 33.3% + 33.3%

我们来看下伪码，猛击我看demo ：

<divclass="wrap-box wrap-6">    <divclass="flex-inner">      <divclass="flex-box1 flex-item"></div>      <divclass="flex-box2">        <divclass="flex-item"></div>        <divclass="flex-item"></div>      </div>    </div>    <divclass="flex-inner">      <divclass="flex-item"></div>      <divclass="flex-item"></div>      <divclass="flex-item"></div>    </div></div>

ログイン後にコピー

.wrap-box {  display: -webkit-box;} .flex-inner {    -webkit-box-flex: 1;    display: -webkit-box;} .flex-item {    -webkit-box-flex: 1;    position: relative;}.wrap-6 {      -webkit-box-orient: horizontal;}.wrap-6 .flex-inner {      -webkit-box-flex: 0;      -webkit-box-orient: vertical;}.wrap-6 .flex-inner:first-child {      width: 66.6%;}.wrap-6 .flex-inner:last-child {      width: 33.3%;}.wrap-6 .flex-item {      padding-top: 100%;}.wrap-6 .flex-box2 .flex-item {      padding-top: 50%;}.wrap-6 .flex-box2 {      display: -webkit-box;      -webkit-box-orient: horizontal;}.wrap-6 .flex-inner:first-child,.wrap-6 .flex-box2 .flex-item:first-child {      margin-right: 1px;}.wrap-6 .flex-box1,.wrap-6 .flex-inner:last-child .flex-item:first-child,.wrap-6 .flex-inner:last-child .flex-item:nth-child(2) {      margin-bottom: 1px;}

ログイン後にコピー

实际效果：