CSSスタイル----ボックスモデル(図文詳細)

ケースモデル

ボックス内の領域

1つの箱の主な属性はwidth、height、padding、border、marginの5つです.次のようになります.

width:コンテンツの幅.CSSではwidthは箱の幅ではなく内容の幅を指す.

height:コンテンツの高さ.CSSではheightは箱の高さではなく内容の高さを指します.

padding:内側余白.

border:枠線.

margin:外側距離.

ボックスモデルの概略図:
コードのデモ:
上の箱、width:200 px;height:200px; しかし、実際に占有されている幅は302*302です.これはpadding、borderも加わるからです.注意:幅と実際の占有幅は、コンセプトではありません!

width、heightを知っています

先端開発エンジニアの目には、世界のすべてが異なることを知っておく必要があります.
例えば、原稿用紙を測ると、先端開発エンジニアは内容の幅だけを測ることができます.
下の2つの箱は、実際に幅が広く、302*302です.
ケース1:

    .box1{
        width: 100px;
        height: 100px;
        padding: 100px;
        border: 1px solid red;
    }

ケース2:

    .box2{
        width: 250px;
        height: 250px;
        padding: 25px;
        border: 1px solid red;
    }

実占有幅=左border+左padding+width+右padding+右border
上の2つの箱の箱の模型図は以下の通りです.
箱の真の占有幅を維持したい場合は、widthを加えるときにpaddingを減らします.paddingを加えるときはwidthを減らします.箱が太ったのは災難的なので、他の箱を押し下げることになります.
PS:テクニック:sublime textでは、border:1px solid red;という属性を素早く入力するために、bdを直接入力し、2番目の後戻りを選択することができます.

認識padding

paddingエリアにも色があります

paddingは内側の余白です.paddingの領域には背景色があり、css 2.1を前提とし、背景色は必ずコンテンツ領域と同じである.すなわちbackground-colorはすべてのboder以内の領域を埋めます.
効果は次のとおりです.

paddingには4つの方向があります

paddingは4方向なので,それぞれ4方向のpaddingを記述することができる.
方法は2種類あり、1つ目は小さな属性を書く.2つ目は、スペースで区切られた総合プロパティを書きます.
小属性の書き方:

    padding-top: 30px;
    padding-right: 20px;
    padding-bottom: 40px;
    padding-left: 100px;

総合属性の書き方:(上、右、下、左)(スペースで区切る)

padding:30px 20px 40px 100px;

4つの値が書かれている場合は、上、右、下、左の順になります.
3つの値しか書かれていない場合は、上、右、下の順になります.??右と同じです.
2つの値しか書かれていない場合は、次のようにします.

padding: 30px 40px;

順序は、30 px 40 px 30 px 40 pxに等価である.
小さな属性で大きな属性を積層することを理解してください.例:

padding: 20px;
padding-left: 30px;

上のpadding対応ボックスモデルは次のとおりです.
以下の書き方:

padding-left: 30px;
padding: 20px;

2行目の大きな属性に積層されているため、1行目の小さな属性は無効です.
次の問題は、できます.分かりました.

いくつかのテーマ

タイトル1:下の箱が本当に幅を占めていることを言って、そして箱の模型図を描きます.

    div{
        width: 200px;
        height: 200px;
        padding: 10px 20px 30px;
        padding-right: 40px;
        border: 1px solid #000;
    }

答え:
タイトル2:下の箱が本当に幅が広いことを言って、そして箱の模型図を描きます.

    div{
        width: 200px;
        height: 200px;
        padding-left: 10px;
        padding-right: 20px;
        padding:40px 50px 60px;
        padding-bottom: 30px;
        border: 1px solid #000;
    }

答え:padding-left:10px；とpadding-right:20px;は役に立たない.後ろのpaddingの大きな属性のため、彼らを積層した.
箱の模型は以下の通りです.
テーマ3:今あなたに箱の模型図をあげて、コードを書いて、最も簡単な方法で書いてみてください.
答え:

    width:123px;
    height:123px;
    padding:20px 40px;
    border:1px solid red;

テーマ4:今あなたに箱の模型図をあげて、コードを書いて、最も簡単な方法で書いてみてください.
答え:

    width:123px;
    height:123px;
    padding:20px;
    padding-right:40px;
    border:1px solid red;

いくつかの要素、デフォルトはpaddingです

いくつかの要素は、デフォルトではpadding(ulラベルなど)があります.次のようになります.
上図に示すように、スタイルを付けないulも、40 pxのpadding-leftがあります.
だから、私たちが駅を作るとき、コントロールしやすいように、いつもこのデフォルトのpaddingをクリアするのが好きです.*を使用してパージできます.

        *{
            margin: 0;
            padding: 0;
        }

しかし、*は効率が悪いので、パラレルセレクタを使用して、すべてのラベルを羅列します(背中を押さずに、デフォルトのスタイルをクリアする専門のスタイルシートがあります.今後勉強します):

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
    margin:0;
    padding:0;
}

borderを知る

borderは枠線です.枠線には、ピクセル(太さ)、線型、色の3つの要素があります.
色を書かない場合、デフォルトは黒です.他の2つの属性は書かないで、命がけで、枠が表示されません.

border-style

borderのすべての線形は以下の通りです(CSS を参照して入手できます).
例えばborder:10px ridge red;という属性は、chromeとfirefox、IEで微妙な違いがあります:(効果を示すことができるので、互換性の問題ではなく、わずかな違いがあるだけです)
社内のデザイナーが乙女座で、極めて高いページ復元度を求めている場合は、cssを使って枠線を作ることはできません.画像を使うので、図を切ります.
だから、比較的安定したborder-styleはいくつかあります:solid、dashed、dotted.

border分割

borderは大きな総合属性です.たとえば、

border:1px solid red;

4つの枠線を1 px幅、線型実線、red色に設定します.
borderプロパティは分解できます.2つの方法があります.

(1)border-width、border-style、border-colorの3つの要素で分解します.(1つのborder属性は3つの小さな属性からなる)

(2)方向に分解:border-top、border-right、border-bottom、border-left.

一つのborder属性は,3つの小さな属性が統合されていることが分かった.小さなアトリビュートの後ろにスペースで区切られた複数の値がある場合は、上下左の順序になります.例を次に示します.

border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;

効果は次のとおりです.
(1)三要素による解体:

border-width:10px;    //    
border-style:solid;   //  
border-color:red;     //  。

次のように等価です.

border:10px solid red;

(2)方向別に取り外す:

border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-left:10px solid red;

次のように等価です.

border:10px solid red;

(3)三要素と方向で分解する:(各方向の、各要素を分解する.3*4=12)

    border-top-width:10px;
    border-top-style:solid;
    border-top-color:red;
    border-right-width:10px;
    border-right-style:solid;
    border-right-color:red;
    border-bottom-width:10px;
    border-bottom-style:solid;
    border-bottom-color:red;
    border-left-width:10px;
    border-left-style:solid;
    border-left-color:red;

次のように等価です.

border:10px solid red;

仕事ではいったい何を使いますか.简単な答え:简単なものは何ですか.例を次に示します.
上の効果を実現するために、書き方は以下の通りです.

border:10px solid red;
border-right-color:blue;

上の効果を実現するために、書き方は以下の通りです.

border:10px solid red;
border-style:solid dashed;

borderは以下のことができます.

border:none;

エッジが1つもない場合は、次の操作を行います.

border-left: none;

左側の枠線の幅を0にすることもできます.

border-left-width: 0;

例:borderプロパティを使用して三角形を描く(テクニック)

手順は次のとおりです.
(1)ボックスのwidthとheightを0に設定すると、次のような効果が得られます.
(2)borderの下部をキャンセルします.
(3)最後にborderの左と右を白に設定します.
これで、三角形が描けます.