問題タブ [border-box]

box-sizing: border-box on mobile の使用について、グーグルで具体的な答えが見つかりません。http://caniuse.com/で、ネイティブの Android ブラウザーではボックス サイズが完全にサポートされていないことがわかりました (Android ブラウザーは、HTML 選択要素のサイズ (幅と高さ) を正しく計算しません)。私の質問: モバイル (chrome/opera/safari/android browser/ie) でボーダーボックスを使用するのは 100% 安全ですか、それとも古い学校に固執する必要がありますか?

言及：私が使用するモバイル版では：

2 つの異なるスタイルのボタンをスタイリングするのに問題があります。最初のボタンは 2 ピクセルの境界線を持つ透明な背景にする必要があり、次のボタンは Foundation のボタンのデフォルト スタイル、つまり境界線なしです。*{box-sizing: border-box;}パディング/ボーダー/マージンに関係なく、ボタンが同じサイズになるようにすると思いました。幅/高さを指定していないため、これが機能していない可能性があると思いましたが、それを行っても、通常のボタンを2pxだけ押し出す効果があり、それでもボタンをそれらの中のテキストに従った自然な幅。

私にとって簡単な解決策は、通常のボタンに背景と同じ色の境界線を追加することですが、ホバー、アクティブなどの境界線のスタイルも追加する必要があります...ちょうどあるべきだと思われますより良い方法になります。ここで何か間違ったことをしていますか？

ここに私がいる場所のjsfiddleがあります：http://jsfiddle.net/xa4d4bfv/

隣り合って浮かんでいる要素がたくさんあります。それらは別々の行にないため、必要に応じて次の行にドロップされます。したがって、要素の 1 つが下の要素よりも短い場合は、その下の要素よりも高くなるはずです。兄弟ではありませんが、そうではないようです。すべての要素は、ラッパー行にあるかのように機能し、すべて同じ高さです。

コードペン: http://codepen.io/anon/pen/oXLQWg

上の中央の要素の高さが小さくなっていることがわかりますが、その下の要素はそれに近づかず、他の要素と一緒に配置されています。

コード例:

HTML:

CSS:

私のテストから、それは設定に関連しているようですbox-sizing: border-box;。

とにかくこれを修正して、小さい要素がその上の要素のすぐ下に配置されるようにすることはできますか、または設定box-sizingする必要がありcontent-boxますか?

私はこの質問から来ました:それぞれ、offsetWidth、clientWidth、scrollWidth、および -Height を理解する

これは標準ボックスモデルの場合と理解していますが、そうですか？

しかし、次のような場合はどうなりますか。

現在、offsetWidth と clientWidth は同じですか? これは、このルールで常に発生しますか?

そしてどうpadding-boxですか？

box-sizing: border-box;それで、フレックスボックスがCSS宣言を尊重しないという難しい方法を見つけました。罰金。しかし、フレックスボックス レイアウトを使用してその機能を取得する方法はありますか?

この JS Fiddleをチェックしてください。3 つの行があり、各行に 3 つのボックスがあります。すべてのボックスを同じサイズにしたいのですが。中央の行の中央のボックスには、マージンとボーダーのプロパティがいくつかあり、大きくなっています。ボックス モデルでは、これを で解決しbox-sizing: border-boxます。フレックスボックスモデルに相当するものはありますか?

ライブデモ:

何が間違っているのかわかりませんが、ボーダーボックスを追加することで、これらの4つのボックスがきれいに収まると思いました。

http://jsfiddle.net/jzhang172/x3ftdx6n/

ネストされた div が 3 つあります。

.inner div は絶対位置であり、それぞれに 1px の境界線があります。

この配置により、.outer div にスクロールバーが表示されます。

コードペンはこちら

これはなぜですか? また、それを防ぐには何を変更する必要がありますか?

.inner div の境界線の幅が 3px に増加すると、スクロールバーが消えます。繰り返しますが、なぜこれが起こっているのですか？

この質問は、この関連する質問に提案された修正から生じました

外部、内部、アイテムの 3 つのネストされた div があります。

次の基本的な CSS があるとします。

課題は、「項目」の div を垂直方向に中央に配置し、上下に等しい (またはゼロの) ギャップを持ち、垂直スクロールバーが表示されないようにすることです。

コードペンはこちら

アップデート：

以下で指摘したように、高さの異なる複数のアイテムを中央に配置する必要があることを付け加えておきます。これまでの最善の答えは、各項目に負のマージンを追加することです。その結果、次のようになります: http://codepen.io/anon/pen/dYWEYZ

ただし、他の 3 つのプロパティに依存するオフセットが必要なため、これは (私には) 悪臭がします。