cssのクリーンアップ(1)

1807 ワード
テキストリンク

CSSベースのクリア


1. BoxModel


htmlのすべての要素は1つのボックスで構成されています。 コンテンツ(width、height)、塗りつぶし、枠線、エッジ padding,margin設定時プロンプトtop,right,bottom,left時計回り padding: 10px 20px 30px 40px; (top, right, bottom, left) margin : 20px 40px; // bottomとleftの値がない場合、topとrightの値は自動的に入力されます。

2. BoxSizing


  • box-sizeのデフォルト値はcontent-boxです
    =>paddingまたはborder値を追加すると、boxのサイズはpadding、marginとともに大きくなります.デフォルトはcontent-boxに設定されているためです.
    たとえば、幅:400 px height 500 pxに設定し、padding-left:20 px、padding-top:30 pxを与えると、ボックスのサイズは幅:420に増加し、heightは530 dmfh増加します.content-boxに設定されているため、contentは400500に固定され、padding値が含まれています.
    解決策はbox-size値をborder-boxに設定することです.border-boxはborderを基準としています
    /* css 모든요소들에게 box-size 설정법 */
* { 
   box-sizing: border-box;
}

    • 3. Display


    すべてのhtmlの要素が表示されます.(1) display: block

  • 幅が宣言されていない場合は、親要素の値(100%)が継承されます.

  • widthを単独で宣言すると、残りのスペースは自動的にエッジに埋め込まれます(欲張りな子供)
    =>実際の開発ツールでは表示されないことに注意してください

  • margin: 0 auto;(top,buttom:0,left,right:auto)(左右中央揃え)

  • width、height、margin、paddingなど、任意の値を設定できます.

  • 親のheightを単独で宣言しない場合、すべてのサブ要素のheightの和は親のheightの値と同じです.
    • (2) display: inline
  • ブロックと逆の概念
    • タイプ
  • と似ていると思います.1行の字が多ければ下へ行くと書いてある.
  • width、height、padding-top、bottom、ground-top、border-top、bottomは適用されないように見えます.
    • (3) display: inline-block
  • inline、blockの利点があります.
  • width、height、margin、paddingを設定できます.
  • inlineのように横に置くことができます.
    • PythonでLine通知やってみた
    [プログラマー]新しいアイデンティティを推奨