ホームページ >ウェブフロントエンド >jsチュートリアル >Boostrap エントリーの準備ボーダーボックス_JavaScript スキル
Boostrap エントリーの準備ボーダーボックス_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 15:01:282073ブラウズ
Bootstrap を学習する過程で、さまざまな種類の奇妙な落とし穴に遭遇しました。Bootstrap を学習する前に準備をしておけば、ある程度の落とし穴は回避できます。次に、エディターはボーダーボックス属性の知識を紹介し始めます。
Boostrap に付属する CSS ファイル: boostrap.css には、次のコードがあります:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
これは、コードを記述するときに、このプロパティがあらゆる場所に存在することを意味します。では、この box-sizing:boder-box とは一体何なのでしょうか?まず、非常に一般的なコード部分を見てみましょう:
<div class="outer" style="width:500px; height:500px; padding:100px; border:1px solid #000; background-color: yellow; "> <div class="inner" style="width:100%; height:100%; background-color:pink;"></div> </div>
コードを実行すると、次の結果が得られます。外側の高さは 702 ピクセル、幅は 702 ピクセル、内側の幅は 500 ピクセル、高さは 500 ピクセルです。ここでは誰もが疑問を持たないはずです。別の部分を見てみましょう。コードを今すぐ:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div class="outer" style="width:500px; height:500px; padding:100px; border:1px solid #000; background-color: yellow; ">
<div class="inner" style="width:100%; height:100%; background-color:pink;"></div>
</div>
このコードは、実際には最初の 2 つのコードを追加したものです。Boosttrap フレームワークでコードの作成を開始すると単純に理解できます。コードの実行結果は、外側の幅が 500 ピクセル、高さが次のようになります。 500px; 内側の幅と高さは 298px;
この結果の理由は次のとおりです: box-sizing: border-box は、要素の幅と高さがパディングとボーダーの影響を受けないようにします。たとえば、上記のコードでは、外側にパディングとボーダーがある場合でも、パディングが行われます。外側の幅と高さは影響を受けませんが、パディングと境界線はどこに行くのでしょうか。答え：中に逃げ込んだ！ブラウザのデバッグ ツールを開いて、外側のスタイルの詳細を確認します:パディングとボーダーの両方が有効であることが明確にわかりますが、padding:100px は外側の 200 ピクセルの幅と高さの値を占め、ボーダーは 2 ピクセルの幅と高さの値を占めるためです。 , したがって、inner は 298px の幅と高さの値しか取得できません。
IE での Web 開発の経験がある場合は、box-sizing: border-box が IE の下位バージョンの奇妙なモードであることがわかるでしょう。
上記は、Boosttrap を始めるための準備として編集者が紹介するボーダー ボックスに関する知識です。質問がある場合は、メッセージを残してください。編集者が返信します。間に合うように。同時に、スクリプト ハウス Web サイトをサポートしていただき、誠にありがとうございます。
ボックスのサイズ変更ボーダーボックスについて理解しましょう
-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 >
<div class="testdiv" > 普通</div>
<div class="testdiv" style=" -webkit-box-sizing: border-box;">
特殊
</div>
</body>
</html>声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。