以前は、ブートストラップを学ぶときに、さまざまな奇妙な落とし穴に遭遇しました。ブートストラップを学ぶ前に準備作業を行うと、多かれ少なかれいくつかの落とし穴を避けることができます。以下に、編集者がBorder-Box属性の知識を紹介します。
Boostrapの独自のCSSファイル：boostrap.cssには、コードがあります。
* {-webkit-box-sizing：border-box; -moz-box-sizing：border-box;ボックスサイズ：ボーダーボックス; }これは、コードを書くとき、このプロパティがどこにでもあることを意味します。それで、このボックスサイズは一体何ですか：ボーラーボックス？まず、非常に普通のコードを見てみましょう。
<div> <div> </div> </div>
コードを実行して確認します。外側の高さは702px、内側の幅は500px、高さは500pxです。誰もが疑いの余地はないはずです。今すぐ別のコードを見てみましょう。
* {-webkit-box-sizing：border-box; -moz-box-sizing：border-box;ボックスサイズ：ボーダーボックス; } <div> <div> </div> </div>このコードは、実際には最初の2つのコードの追加です。 Boostrapのフレームワークでコードの作成を開始したことが簡単に理解できます。コードの実行の結果は次のとおりです。外側の幅は500pxで、内側の高さは298pxです。
この結果の理由は、次のとおりです。ボックスサイズ：境界線ボックスでは、要素の幅と高さがパディングやボーダーの影響を受けないようにします。たとえば、上記のコードでは、外側にパディングと境界線がある場合でも、パディングと境界線は外側の幅と高さに影響を与えず、外側の幅と高さはまだ500pxです。しかし、パディングとボーダーはどこに行きましたか？回答：中に入る！ブラウザのデバッグツールを開き、外側のスタイルの詳細をご覧ください。
パディングと境界線の両方が有効であることが明確にわかりますが、それらは外側の内側の空間を占めています。パディング：100pxは外側の200pxの幅と高さの値を占め、境界線は内側の2px幅と高さの値を占めているため、内側は外側の298px幅と高さの値を取得できます。
IEの下でWeb開発の経験がある場合、ボックスサイズ：ボーダーボックスはIEの低いバージョンの奇妙なモードであることがわかります。
上記は、編集者によって紹介されたボーダーボックスのBoostrapの準備に関する関連する知識です。あなたはそれを学びましたか？ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。同時に、wulin.comのウェブサイトへのサポートに皆さんに感謝したいと思います！
以下は、ボックスサイズのボーダーボックスの理解の簡単な紹介です
-webkit-box-sizing：border-box;その後、divが設定した幅と高さには境界とパディングが含まれます
<！Doctype html> <html> <head> <title> box-sizing </title> <style type = "text/css">。testdiv {padding：10px ;; width：100px; border：10px solid} </style> </head> <body> <body> div> <div div style = "-webkit-box-siziziziziza Border-Box; "> Special </div> </body> </html>