CSS 3 box-sizingプロパティ-box-sizingを使用してボックスモデルのレイアウト

2873 ワード
HTML & CSS
htmlページを書くとき、通常は箱モデルに高さと幅を設定します.例えば、幅200 pxの高さ100 pxの箱を書きます.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    <style type="text/css">
        .box {
            width: 200px;
            height: 100px;
            background-color: #009688;
        }
    style>
    <div class="box">div>
body>
html>
このとき、私たちはこの箱にpadding、border、margin属性を追加しました.`padding:20 px;border: 15px blue solid;margin: 10px;`,ここで要素を見ると、箱の大きさは箱の幅:=`padding*2+border*2+width`=`20 px*2+15 px*2+200 px`=`270 px`箱の高さ:=`padding*2+border*2+height`=`20 px*2+15 px*2+100 px`=`170 px`になりたくない場合は、追加したいpaddingとborder属性の大きさは元の設定の大きさの範囲内にあります.box-sizingは私たちにこの解決策を提供してくれた.スタイルに`box-sizing:border-box;`,箱の大きさを見て、200 px*100 pxになりました.
box-sizing構文
box-sizing: content-box|border-box|inherit;

値
説明
content-box
これはCSS 2による.1所定の幅高さ挙動.要素のコンテンツボックスには、幅と高さがそれぞれ適用されます.要素の内側の余白と枠線を幅と高さの外に描画します.
border-box
エレメントの幅と高さによって、エレメントの枠線ボックスが決まります.つまり、エレメントに指定した内側の余白と枠線は、設定した幅と高さで描画されます.設定した幅と高さから枠線と内側の余白をそれぞれ減算することで、コンテンツの幅と高さを得ることができます.
inherit
親要素からbox-sizing属性を継承する値を指定します.
Ajaxとその下位実装とは
命題の公式の主な範式を求めます