CSS3ボックスのサイズ

CSS3 ボックスサイズ

CSS3 ボックスサイズプロパティは、padding (パディング) と border (ボーダー) を含む幅と高さのプロパティを設定できます。

CSS3 のボックスサイズプロパティを使用しません

デフォルトでは、要素の幅と高さは次のように計算されます:

width (幅) + パディング (パディング) + ボーダー (境界線) = 要素の実際の幅要素

高さ + パディング + ボーダー = 要素の実際の高さ

これは、要素の幅/高さを設定すると、要素の実際に表示される高さと幅が大きくなるという意味です (ボーダーとパディングは幅/高さにも計算されます)。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
}
.div2 {
    width: 300px;
    height: 100px;    
    padding: 50px;
    border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">这个是个较小的框 (width 为 300px ，height 为 100px)。</div>
<br>
<div class="div2">这个是个较大的框 (width 为 300px ，height 为 100px)。</div>
</body>
</html>

この方法を使用してパディングのある小さなボックスを取得したい場合は、境界線とパディングの幅を考慮する必要があります。

CSS3 のボックスサイズ設定プロパティは、この問題を非常にうまく解決します。

CSS3のボックスサイズ設定プロパティを使用する

CSS3のボックスサイズ設定プロパティには、要素の幅と高さのパディング(padding)とボーダー(border)が含まれます。

要素に box-sizing: border-box; が設定されている場合、padding (内側のマージン) と border (ボーダー) も幅と高さに含まれます:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}
.div2 {
    width: 300px;
    height: 100px;    
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}
</style>
</head>
<body>
<div class="div1">两个 div 现在是一样大小的!</div>
<br>
<div class="div2">php中文网!</div>
</body>
</html>

結果から、 box-sizing: border-box ;効果は向上しており、これはまさに多くの開発者が必要としているものです。

次のコードは、より直感的な方法ですべての要素のサイズを表示できます。多くのブラウザーはすでに box-sizing: border-box; をサポートしています (ただし、すべてではありません。そのため、width: 100%; の input 要素と text 要素の幅が異なります)。

りー

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> * { box-sizing: border-box; } input, textarea { width: 100%; } </style> </head> <body> <form action="action_page.php"> 用户名:<br> <input type="text" name="username" value=""><br> 邮箱:<br> <input type="text" name="email" value=""><br> 评论:<br> <textarea name="message" rows="5" cols="30"> </textarea> <br><br> <input type="submit" value="Submit"> </form> <p><strong>提示：</strong> 可以尝试移除样式中的 box-sizing 属性，看看会发生什么。注意移除后部分浏览器 input, textarea, 和 submit 按钮的宽度不一致。</p> </body> </html>

提出するリセットコード

自動運転