問題タブ [border-box]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - CSS - ボックスサイズの問題
本当に単純な質問であっても、私の質問に対する答えは見つかりませんでした。私は、div (実際には<a>...</a>)の「内側の境界線」を行うために、CSS の適切なボックス サイズ設定を使用しています。
しかし、ボーダーボックスのプロパティがなくてもボーダーは同じであるため、まったく機能していないことがわかります。誰にも答えがありますか？
私が何をしているのかを確認するためだけに。私が欲しいのは<a>、「内側の境界線」を取得することです。私は明らかにborder: ...;プロパティを知っていますが、要素を大きくしているので、それは望ましくありません。のようなものが欲しいですborder: -2px solid #3498db。
[編集]解決策を見つけました。コメントの説明。
html - div 内のテキストによってこのレイアウトが壊れるのはなぜですか?
次の HTML/CSS があります。
本当に奇妙なのは、div の上にマウスを置くと、境界線のサイズが変わると、div 内のテキストが押し下げられ、他の div も押し下げられることです。
ただし、div からテキスト (つまり、「1」、「2」、「3」、および「4」) を削除すると、問題は発生しません。
div 内のテキストによってレイアウトが崩れるのはなぜですか?
ありがとうございました。
html - box-sizing: border-box は max-width と min-width で安全に使用できますか?
とを組み合わせるとバグが発生max-widthする古いリソースをいくつか読んでいます。他の誰かが結合して何か問題がありますか?min-widthbox-sizing: border-boxmax/min-widthbox-sizing: border-box
すべての要素に対してグローバルに設定されたサイトを構築する予定* {box-sizing: border-box}ですが、max-width も使用する必要がありますが、問題が発生する場合は使用したくありません。
css - Firefox で box-sizing:border-box を使用した場合の CSS パディングの問題
Firefox で奇妙な問題が発生しています。デバッグ コンソールが嘘をついているように見えるか、何か不足しているようです。
body タグの CSS は次のとおりです。
プロパティ「box-sizing」を使用しているため、最大幅は内部にパディングを入れて 1200px にする必要があります。デバッグ コンソールが (右下で) 言っているように、コンテンツ領域の幅は 898px であるはずですが、それを測定すると、実際に得られるのは次のとおりです。
box-sizing:border-box プロパティについて間違っていますか?
君たちありがとう ！
編集:ここでは、単純化されたケースでjsfiddle を作成しました。
下の画像を見てください。HTML、インスペクタによって与えられたボックス モデル、レンダリング、Photoshop で追加した赤い四角 (実際には 150x150px) が見つかります。わかりません。インスペクターはボックスが 150x150 であると言っていますが、それは間違っています...
css - ボックスのサイズ変更に依存しないレスポンシブ CSS グリッド
Google内とこのWebサイトの両方で、これに対する答えを検索しようとしました。
レスポンシブにする必要があるWebサイトがあります。比較的複雑ですが、現在の設計では確実に可能です。
私の質問はこれです。レスポンシブ グリッド システム、またはボックス サイジングに依存しない完全レスポンシブ グリッド システムの例はありますか: ボーダー ボックス。Pure & Bootstrap を見た後、どちらもそのプロパティに依存して機能しているようです。
実際に考えてみると、パーセンテージを適切に使用できるようにするには、box-sizing:border-box モデルが必要になるように思えます。
この方法を使用できないのはなぜですか? このプロジェクトには IE7 のサポートが絶対に必要です。サポートを強制するために使用できるポリフィルと htc ファイルがあることは知っていますが、このサイトの規模とサイズにより、これらのオプションを実装するのは困難です。私が読んだことから、これらのオプションは適度に使用する必要があり、この口径のサイトでは、適度に使用することはできませんでした.
ありがとう。
html - box-sizing: border-box が機能していないようです
この問題に遭遇したことはありませんが、一言で言えば、すべての要素にボックスのサイズ設定としてボーダーボックスを適用します。
私はレスポンシブな列レイアウトを持っています。この場合、1 行あたり 3 列です。
.property div にマージンを追加するまで、すべてが 3 列にまたがり、通常はボーダーボックスが原因で、列間にマージンが追加され、3 列のままになりますが、何らかの理由で 3 列目が新しい列にプッシュされます行、正直なところ、理由がわかりません。何か不足していますか?
jsFiddle のライブ例を次に示します: http://jsfiddle.net/NmrZZ/