css3のボックスサイジングに関するグラフィックコードの詳細説明-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

css3のボックスサイジングに関するグラフィックコードの詳細説明

黄舟

Aug 04, 2017 pm 01:38 PM

box-sizingcss3

1. w3cschool の概要を読んでください: CSS3 ボックスサイズ属性_w3cschool。

2. はじめにを読んでもあまり深く理解できず、読んでもすぐに忘れてしまうタイプの一人です。私自身のことを心配して、この例をオフラインで見てみることにしました:

<!DOCTYPE html><html><head>
   <meta charset="utf-8">
   <title></title>
   <style>
      .container      {
         width:30em;
         border:1em solid;
      }
      .box      {
         box-sizing:border-box;
         -moz-box-sizing:border-box; /* Firefox */
         width:50%;
         border:1em solid red;
         float:left;
      }
   </style></head><body><p class="container">
   <p class="box">这个 p 占据了左边的一半。.</p>
   <p class="box" style="border:1em solid #888;">这个 p 占据了右边的一半。</p></p></body></html>

Firefox の Firebug を使用してレイアウトを確認し、box-sizing 属性を content-box に変更します (または box-sizing 属性を変更します)。以下の図に示すように、サイズ設定 (デフォルトの box-sizing:content-box)。

比較の結果、次のことがわかりました:

クラス名 .container の親要素の box-sizing が設定されていない場合 (デフォルト値 content-box または box-sizing: border-box)、2 つの状況が存在します。 :

(最も外側の親要素)

1) 2 つの子要素が box-sizing: border-box の場合、幅は、設定された border-left-width と border-right-width (両方とも 16 ピクセル）は 240 ピクセルで、以下の図に示すように、親要素の幅の半分です（左はレイアウト図、右は実際のページ効果）：（つまり、親要素の幅 + 境界線） -left-width+border-right-widthhalf)

2) 2 つの子要素の box-sizing:content-box の幅が 240px の場合、パディングとマージンは除外されます。以下の図 (左側はレイアウト図、右側はページの実際の効果):

3. 要素に box-sizing:border-box を設定すると、実際には次のようになります。その幅 = padding-left + padding-right + border-left-width + border-right-width ですが、margin-left と margin-right は含まれません。

なるほど、やっと分かりました。

以上がcss3のボックスサイジングに関するグラフィックコードの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

擬似要素は子供であることを少し思い出させてください。Apr 19, 2025 am 11:39 AM

ここに＆＃039;いくつかの子供の要素を持つ容器があります：

「ダイナミックヒットエリア」のメニューApr 19, 2025 am 11:37 AM

フライアウトメニュー！ Hoverイベントを使用してメニュー項目をより多く表示するメニューを実装する必要がある2番目の場合は、トリッキーな領域にあります。 1つは、そうすべきです

WebVTTを使用したビデオアクセシビリティの改善Apr 19, 2025 am 11:27 AM

「Webの力はその普遍性にあります。障害に関係なくすべての人からのアクセスは重要な側面です。」

毎週のプラットフォームニュース：CSS ::マーカー擬似エレメント、事前レンダリングWebコンポーネント、サイトへのウェブメントの追加Apr 19, 2025 am 11:25 AM

今週、＃039;のラウンドアップ：DatePickersはキーボードユーザーのHeadachesを提供しています。これは、Foucとの戦いに役立つ新しいWebコンポーネントコンパイラであり、最終的にスタイリングリストのアイテムマーカーと、サイトでWebメントを取得するための4つのステップを手に入れます。