ホームページ > ウェブフロントエンド > htmlチュートリアル > css_html/css_WEB-ITnoseのデフォルト幅について

css_html/css_WEB-ITnoseのデフォルト幅について

WBOY
リリース: 2016-06-24 11:23:36
オリジナル
1278 人が閲覧しました

<div class="boxa">    <div class="boxb">我是div</div></div>
ログイン後にコピー

.boxa{          width:300px;          height:300px;          background-color:green;          border:2px solid red;}.boxb{          <!--没有写宽度即默认宽度 为父元素的100%-->           height:300px;           background-color:orange;           border:2px solid red;}
ログイン後にコピー

このコードのboxbの実際の幅は300pxにはなりません;

親要素を100%継承しますが;

これについて私が理解していることです

ここでの boxc の幅は 300px で、boxd の幅は 296px です。つまり、親要素 boxc はボックスモデルを任意に設定できます

boxd の幅は、設定した幅 300px と等しくなります。すべてのボックス モデルの幅を組み合わせたものに等しい

その幅のみを継承し、他の値は継承しません

boxd は、すべてのボックス モデルを合計することによって計算されます。つまり、幅 296px + 境界線の 4px = boxc の 300 ピクセルになります。boxd のボックス モデルは変わりません。

別の画像を見てみましょう

この画像のboxdの幅は276 276 + 20 +4=300pxです

boxcの幅と同じです

つまり、親要素の好きなようにボックスモデルを追加できます。

子要素にはボックス モデルを追加することもでき、最終的な値は親要素の幅と等しくなければなりません。それを超える場合は幅から差し引かれます。

何か間違っていることや悪い点があれば、遠慮なく修正してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート