CSS_Box Model

4143 ワード

テキストリンク

margin & paadding

273 pxという横方向の値はpadding、border領域が結合した横方向の長さである.

1. margin & padding

以下の3つのコードは、同じマージン値

を有する.

p.example {
  margin: 50px;
}

p.example {
  margin: 50px 50px 50px 50px;
}

p.example {
  margin-top: 50px;
  margin-right: 50px;
  margin-bottom: 50px;
  margin-left: 50px;
}

2. border

p {
  border: 5px solid red;
}

borderでは、属性値の順序は決定されないが、スタイルは通常border: 두께 선스타일 선색깔の順序で書き込まれる.

blockquote {
  border-top: 4px double red;
  border-right: 2px solid #666666;
  border-bottom: 6px dashed darkviolet;
  border-left: 1px dotted #00ee44;
}

線は、上線、右線、下線、左線など多様なスタイルを提供することもできる.

span {
  border-bottom: 5px solid black ;
  padding-bottom: 5px;
}

cssの{テキスト-装飾:下線;

は宣言テキストと行を使用できますが、下線の太さや色などの理由で完全なカスタマイズは難しいです.

この場合、border-bottomは私の望むスタイルで下線を引くことができます.

3. box-sizing

2box-sizing属性が使用されていない場合のコンテンツ幅と高さは、中間白色領域のサイズ/塗りつぶし/borderを加算した値です.

2box-sizing : border-box'と宣言すると、padding/border/margin値がコンテンツの幅と高さに設定された値に含まれ、

が作成される.

.new {
  box-sizing: border-box;
}

-  거의 대부분의 웹페이지에 box-sizing 프로퍼티를 기본적으로 적용

Reference

この問題について(CSS_Box Model), 我々は、より多くの情報をここで見つけました https://velog.io/@yyeonjju/CSSBox-Model

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

入力要素の作成

[Swift]Baekjun 2004-組合せ0の個数