HTML 要素がボックスに詰め込まれていることをご存知ですか? _html/css_WEB-ITnose

HTML で表示したいコンテンツに関係なく、すべて長方形のボックス内に配置されます。しかし、ブラウザが私たちに提示するのは二次元の世界であり、二次元世界の箱は私たちの世界の箱とは異なります。二次元の世界では箱は幅と高さの二次元しかありませんが、物を入れることができるという観点から見れば、それは確かに箱です。

ブラウザのインターフェースに表示されるすべての HTML 要素はボックス内に詰め込まれていますが、ボックスが見えない場合もあります。いくつかの手がかりを見つけるには注意深く見る必要があります。そして、このボックスには複数のレイヤーがあり、次のようになります:

図 1: ボックス モデルの概略図 (CSS ボックス モデルの概要より)

表示したいコンテンツは次のとおりです。内側にパディング層があり、その次にボーダー層があり、最も外側の層はマージンと呼ばれます。この 3 つのレイヤーのうち、直接見えるのは境界線だけですが、他の 2 つのレイヤーは視覚的には完全に透明です。

さらに読み進める前に、2 つの質問について考えてください:

1. なぜ箱が必要なのでしょうか?
2. この箱は私と何の関係があるのですか？

最初の質問は長い話です。本当に知っていると思うなら、CSS 標準を策定している人、またはブラウザに取り組んでいる人に相談したほうがよいでしょう。正直に言うと、理由は分かりません。

2 番目の質問です。400*100 の家を購入したいと仮定します (メートルではなくピクセルです!)。仕様は次のとおりです:

うわー

幅と高さが OK だとわかるとすぐに飛び上がって、支払いに行きました。会計を行うと、開発者が 492*192 を請求したいと考えていることがわかりました。彼のお母さんに挨拶したいですか?しかし、あなたが何かを言う前に、彼は設計図を取り出しました:

写真 2、ボックス モデルの設計図 (ボックス モデルを開くところから)

そして彼は 2 つの公式を与えました:

• width = margin-right + border-右 + パディング右 + 幅 + パディング左 + ボーダー左 + マージン左
• 高さ = マージン上 + ボーダー上 + パディングトップ + 高さ + パディング下 + ボーダー下 + マージン下

そして、あなたが理解できないうちに、彼は電卓を取り出して押し、それから笑顔であなたを見つめ、492 と 192 がどのように由来するのか自分の目で確認するように言いました。

• 幅: 492 = 20 + 6 + 20 + 400 + 20 + 6 + 20
• 高さ: 192 = 20 + 6 + 20 + 100 + 20 + 6 + 20

簡単に言えば、 width は水平方向の数値をすべて合計する必要があり、margin、border、padding の左右をすべて合計する必要があり、高さは垂直方向の数値をすべて合計する必要があり、margin、border、padding の上部と下部を加算することはできません。逃した。

つまり、最初は 400px*100px の画像だけを載せたかったのに、ブラウザは 492px*192px を要求することになるので、心の準備ができていない場合は、間違いなく少し興奮するでしょう。したがって、ページをデザインするときは、ボックス モデルをマスターし、共有領域のようなものがあることを理解しておく必要があります。ただし、ここでは簡単な紹介にすぎません。さらに詳しく知りたい場合は、2 つの写真のソースにアクセスしてご覧ください。

さらに、Chrome ブラウザの開発者ツールでは、すべてのページ要素のボックスを表示できます。 ここにはいくつかの主要な属性値を調整できる小さなプログラムもあり、それを直感的に感じることができます。