学校が始まったときはとても忙しかったので、物事を整理する時間がありませんでした。
月末を見る。自分のクラスノートを送って数を埋めてください〜
ご存知のとおり、ボックスモデルの標準属性は場所を占める必要があります。つまり、パディング、境界線、およびマージンによって、ラベルの実際の幅と高さが変更されます。
つまり、ラベルの実際の幅と高さは次のようになります。
width / height + padding + border + margin といった：
.box{
width: 200px;
height: 200px;
background: #f00;
padding:30px;
border:5px #000 dotted ;
margin-left:40px;
}コード内の.boxの実際の幅は310pxです。
width + padding-left和right + border-left和right + margin-left
200 + 30*2 + 5*2 + 40 = 310ラベルのボックスサイズを設定して、この設定を変更できます。
box-sizing : content-box | border-box ;| 値 | 説明 |
|---|---|
| コンテンツボックス | デフォルト値。要素のパディングと境界線を幅と高さの外側に描画します。つまり、パディングとボーダーは幅と高さの値を占めません。 |
| ボーダーボックス | 要素に設定された幅と高さによって、ラベルの境界線が決まります。つまり、パディングとボーダーは幅と高さの値を共有します。 |
.box{
width: 200px;
height: 200px;
background: #f00;
padding:30px;
border:5px #000 dotted ;
margin-left:40px;
box-sizing: border-box;
}コード内の.boxの実際の幅は240pxです。パディングとボーダーの値は200pxの幅に含まれています。
width + margin-left
200 + 40 = 240ボックスサイズの値がコンテンツボックスであろうとボーダーボックスであろうと、プロジェクト内のすべてのラベルを標準化する必要があります。
*{
border-sizing: border-box;
}上記のコードは、同じプロジェクトで、書き込みまたは非書き込みのいずれかです。
いくつかの主流のフレームワークやウェブサイトはこれを書くのが好きです。たとえば、ブートストラップ、CSDN。