TIL 013 CSS_Box type

HTMLのすべての要素はboxです.

displayは、Box typeを決定するCSS属性で、以下のタイプがあります。

display: block,
display: inline,
display: inline-black,
display: flex

block

width、height、padding、border、marginの値はすべて与えることができます.

block要素の横に十分なスペースがあっても、他の要素は埋め込まれません.

Block要素でwidthを宣言しない場合、親要素の100%はwidthになります.

width値が宣言された場合、空き領域は自動的に空白になります.

block要素を持つ親要素のheightは、別途宣言がない限り、サブ要素heightとして自動的に設定されます.

<div>, <article>, <aside>, <blockgquote>, <header>, <form>, <h1>, <ul>, <p>, <ol>, <video> etc..

inline

左右にチャージと左右のマージン値しか記入できません.

幅、高さ、padding-top、padding-top、border-top、border-bottom、border-top、border-top、border-bottomは使用できません

<span>, <a>, <img>, <input>, <br>, <textarea>, <label>, <button> etc..

inline-block

inlineの利点とblockの利点を組み合わせた属性値
inlineのように改行することはできないので、他の要素と並べて置くことができ、blockのようにwidthとheightを持つことができます.

inlineとの違いは、width値とheight値を与えることができることです.

blockとの違い:他の要素は横に置くことができます.

widthおよびheightを指定しない場合、inlineと同じコンテンツのみが同じ領域を有する.