CSSを使用してimplement_html/css_WEB-ITnoseを実行したいだけです

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

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

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

なぜ、なぜ

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

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

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

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

。

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

私の意見では:

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

1. これを実行しても過度の効果は得られません。ドム。最も耐えられないのは肥大化したページであることを知っておく必要があります。
2. これにより UI が完全に実装され、すべてのシナリオがカバーされます。そうしないと、デザインが製品と一致しなくなります。
非インタラクティブ UI とは何ですか? ユーザーが特定の動作をトリガーしたときに、ユーザーを直接恐怖に陥れるような目のくらむようなインタラクションはなく、ページがレンダリングされた後は常に表示され、その後は静かになります。 、とても美しい女性、いや、UI。

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

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

私の個人的な意見:

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

1. 適応性の美しさは、ブラウザーに任せてください。私たちがしなければならないことは、ルールについて考えることです
2. 魔法、新しいテクノロジー、ヒントは常に与えられます。あなたは、ある瞬間にあなたが最も必要とする援助です；
3. 過去から学びなさい、罠の王、あなたはすでに何百もの戦いを経験しました、あなたは何を恐れていますか？
これらは、CSS を使用して他の人が思いつかないようなことを実現したいときに私がまとめた特質です。最も重要なことは考えることです。絶対的に最善のものはなく、私たちは常に前進しています。

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

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

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

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

画像サイズの適応性

画像の数が異なる場合、画像は指定された方法で配置されます
1 ピクセルの空白があります。隣り合う写真間の隙間。
• 最も複雑な 6 枚の画像レイアウトを例として取り上げ、純粋な CSS で実装する方法を段階的に見てみましょう。

float レイアウト

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

画像サイズ適応

: 幅のパーセンテージ、パディングトップのパーセンテージを使用した高さ
• 画像の数が異なる場合、画像は指定どおりに配置されます
: さまざまな状況下で要素のサイズを指定するには、n 番目の子疑似クラスを使用します
• 画像の隣に 1 ピクセルの空白のギャップがあります
: 境界線をシミュレートするには、border-box + border を使用します
• ここの親要素は不明です。高さにパーセントを使用しても機能しません。パディングのパーセント値は親要素の幅に基づいて計算されます。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;}

实际效果：

二、手Q家校群先锋教师进度条

下图是手Q家校群先锋教师进度条设计稿：

图中的12345便是主角进度条。分析需求如下：

• 线的长度不固定
• 点平均地分布在一条线上
• 点的个数不固定，可能会改变
• 激活的点之间线的颜色是绿色的

让我们看下如何用纯CSS实现。

绝对定位大法

我们看了第一眼，便想起了最受青睐的万金油 absoulte，方案图如下：

• 将点、线分离，灰色背景线使用父元素的after实现；
• 点使用绝对定位，left百分比值定位；
• 绿色线条使用父元素before实现，绝对定位，宽度百分比值。

不消一会儿我们就做出来了，但再多看一眼觉得十分不妥，点和线百分比值都要手动指定，不便修改点的数量，且过多的绝对定位不优雅。

这并不是我们想要的CSS实现。

百分比宽度切分

于是我们回归本源，遵从CSS世界的规则来，将点线合起来看，每个子元素包含自己的点线，从左至右排列，并使用自适应布局的方式，子元素宽度为百分比，如下图的方案：

• 灰色の背景の線は、親要素の後を使用して実装されます。
• 各子要素の幅は同じで、25% などの平均パーセンテージ値です。
• ポイントは絶対に上に配置されます。子要素の右側;
• 緑色の線は、その中で実現される子要素上にあります。

ただし、通常のボックス モデルでは、子要素の合計幅が親要素をオーバーフローできないことがわかりました (flex を除く)。ここでの合計幅は 4 つの並べられた子要素 (パーセンテージ) + です。 1ポイント幅(固定)、実際の25%分割表示は理想と一致しません。

さらに、一番左に点だけがあり、線がありません、点の幅は固定、線の幅は可変、CSSは計算できません（式を忘れてください）、線を非表示にすることはできません、失敗します！

パーセンテージ幅セグメンテーションの進化版

トラブルメーカーは左端の固定点です。左端のいまいましい点をパーセンテージ チームから除外することはできませんか?以下に示すように:

もちろん!親要素が必要なのは、この子要素の幅を解放するためだけであり、他の子要素の幅のパーセンテージの計算には含まれません。

スペースの作り方: 親要素は margin-left を使用してスペースを残し、子要素は負の margin-left を使用して元の位置に戻ります。

このとき、子要素の内容に対して親要素が計算する幅は、最初の子要素を除き、幅 - margin-left となり、他の子要素の幅は平均パーセンテージとなります。価値。

実際の効果、ソースコードは長いので、デモをクリックしてソースコードをご覧ください:

完成 (美しい)、私が話し終わる前に、製品は変更する量を見つけに来ました。

幅がパーセンテージとして設定されていることがわかります。そのため、ポイント数が変更された場合でも、CSS を変更する必要があります。これで完了です。

パーセンテージ幅の割り算の決定版

さあ、「上品に、汚くならないように」を心の中で3回暗唱すると、突然ひらめき、フレックスってすごい！

flex の重要な機能の 1 つは、flex レイアウトの下の要素がどのようにスペースを割り当てるかを指定できることです。この時点で、子要素の点線要素の幅を -webkit-box-flex:1 に変更します。親要素の幅を自動的に均等に分割します。

実際の効果、スラムデモ:

旅は続きます

この記事では、フロントエンド ページ開発で可能な限り CSS を使用することに関する著者の意見の一部について説明します。これは非常に主観的なものであり、誰でも歓迎されます。一緒に話し合うために。

ビジネス実践からの 2 つの例を通して CSS 実装の旅をご案内します。より良い実践例があれば、ぜひ共有していただければ幸いです。

あなたとの旅はここで終わりますが、あなたの旅はまだ続きます。この記事があなたにインスピレーションを与えることができれば、私はこの上なく幸せです。

最後に、フレックスは素晴らしいです!

急いで書いたので、間違いがあれば修正してください。

読んでいただきありがとうございます！