[TIL] CSS_ block, inline, inline-block
1. Block
ブロックは上下に積み上げられている.
したがって、ブロック属性タグを使用すると、コンテンツのサイズにかかわらず1つまたは複数のセルが占有されます.
-block要素のタグとして使用します。
<div>
<p>
<img>
<footer>
<h1~h6>
<hr>
... 등등
-width値とheight値を入力してサイズを変更できます。
-widhtに必要な値を入力します。marify:auto;中央揃えに設定
<style>
.bigbox {
border: 1px solid red;
width: 700px;
height: 300px;
margin: auto;
}
.samllbox {
border: 1px solid green;
width: 400px;
height: 200px;
margin: auto;
}
</style>
<body>
<div class = "bigbox">700X300 크기의 블록 박스</div>
<div class = "samllbox">400X200 크기의 블록 박스</div>
</body>
2. inline
Line、その名の通り、Lineの中には...1本の線上で縮こまっている.
inlineはコンテンツのサイズをinlineのサイズに変更します.
たとえば、「こんにちは」という言葉をinline要素として使用すると、その高さは2文字の長さと番号にすぎません.
-inline要素のタグとして使用します。
<span>
<a>
<br>
<strong>
... 등등
-inlineはwidthとheightにサイズを変更できません!
3. inline-block
inlineの特徴とblockの特徴を混合した.
インラインのように並べてもいいし、blockのようにwidth、heightでサイズを調整してもいいです
-inline-block要素タグ
<button>
<img>
<input>
<select>
<textarea>
... 등등
blockやinline要素の付いたタグを書いていますが、inline-blockのように使うべきなら?
displayとfloatプロパティを使用すればいいです!
4. display
表示するステータスを決定します.
1) inline-block
inline-blockプロパティの付与span {
display: inline-block;
}
2) block
ブロック属性付与span {
display: block;
}
3) none
画面が見えないようにするnoneを使用して、検索語リストなど、よりインタラクティブなWebページを作成できます.div {
display: none;
}
5. float
floatはインラインのように使用できます.
下の図のように、imgラベルの要素を左または右に貼り付けます!img {
float: left 혹은 right;
}
display: inline; およびfloat:左;差異
display:inlineも左揃え、float:left;左揃えでもあります.何が違うの?目で確認したい.
block要素付きdivラベルを使用して枠線を設定し、2つのボックスを作成します.
*両方表示:inline;設定時
(行にwidthとheightを単独で設定できないため、黄色い下線が...!警告!)
*結果:両方ともinlineのように要素のサイズと同じサイズです。
そして箱と箱の間に空白があります.
*両方ともfloat:left;設定時
*結果:両方ともblockのように設定された値サイズがあります。
また、箱と箱の間には空白はありません.
<div>
<p>
<img>
<footer>
<h1~h6>
<hr>
... 등등 <style>
.bigbox {
border: 1px solid red;
width: 700px;
height: 300px;
margin: auto;
}
.samllbox {
border: 1px solid green;
width: 400px;
height: 200px;
margin: auto;
}
</style>
<body>
<div class = "bigbox">700X300 크기의 블록 박스</div>
<div class = "samllbox">400X200 크기의 블록 박스</div>
</body>
Line、その名の通り、Lineの中には...1本の線上で縮こまっている.
inlineはコンテンツのサイズをinlineのサイズに変更します.
たとえば、「こんにちは」という言葉をinline要素として使用すると、その高さは2文字の長さと番号にすぎません.
-inline要素のタグとして使用します。
<span>
<a>
<br>
<strong>
... 등등 -inlineはwidthとheightにサイズを変更できません!
3. inline-block
inlineの特徴とblockの特徴を混合した.
インラインのように並べてもいいし、blockのようにwidth、heightでサイズを調整してもいいです
-inline-block要素タグ
<button>
<img>
<input>
<select>
<textarea>
... 등등
blockやinline要素の付いたタグを書いていますが、inline-blockのように使うべきなら?
displayとfloatプロパティを使用すればいいです!
4. display
表示するステータスを決定します.
1) inline-block
inline-blockプロパティの付与span {
display: inline-block;
}
2) block
ブロック属性付与span {
display: block;
}
3) none
画面が見えないようにするnoneを使用して、検索語リストなど、よりインタラクティブなWebページを作成できます.div {
display: none;
}
5. float
floatはインラインのように使用できます.
下の図のように、imgラベルの要素を左または右に貼り付けます!img {
float: left 혹은 right;
}
display: inline; およびfloat:左;差異
display:inlineも左揃え、float:left;左揃えでもあります.何が違うの?目で確認したい.
block要素付きdivラベルを使用して枠線を設定し、2つのボックスを作成します.
*両方表示:inline;設定時
(行にwidthとheightを単独で設定できないため、黄色い下線が...!警告!)
*結果:両方ともinlineのように要素のサイズと同じサイズです。
そして箱と箱の間に空白があります.
*両方ともfloat:left;設定時
*結果:両方ともblockのように設定された値サイズがあります。
また、箱と箱の間には空白はありません.
<button>
<img>
<input>
<select>
<textarea>
... 등등 表示するステータスを決定します.
1) inline-block
inline-blockプロパティの付与
span {
display: inline-block;
}2) block
ブロック属性付与
span {
display: block;
}3) none
画面が見えないようにするnoneを使用して、検索語リストなど、よりインタラクティブなWebページを作成できます.
div {
display: none;
}5. float
floatはインラインのように使用できます.
下の図のように、imgラベルの要素を左または右に貼り付けます!img {
float: left 혹은 right;
}
display: inline; およびfloat:左;差異
display:inlineも左揃え、float:left;左揃えでもあります.何が違うの?目で確認したい.
block要素付きdivラベルを使用して枠線を設定し、2つのボックスを作成します.
*両方表示:inline;設定時
(行にwidthとheightを単独で設定できないため、黄色い下線が...!警告!)
*結果:両方ともinlineのように要素のサイズと同じサイズです。
そして箱と箱の間に空白があります.
*両方ともfloat:left;設定時
*結果:両方ともblockのように設定された値サイズがあります。
また、箱と箱の間には空白はありません.
img {
float: left 혹은 right;
}display:inlineはその名の通りinlineです.
inline要素の位置合わせはtext-alignです.
でもfloat君はいったい何なの...?
実際、floatは主に画像の周囲でテキストを囲むために作成された属性であり、上図に示すようにブロックのソートである.
float属性は3種類あります.
floatプロパティを持つ要素は、親要素の高さを認識できないため、親要素から離れます.
floatを使用すると、後ろの要素が隣に寄り添わなければなりません!(上に空白がないように!!)
この問題を解決するにはclearプロパティが必要です.
clear? float要素の横に埋め込まれた要素のプロパティに適用されます.
clearプロパティは4種類あります.
float解決法は4種類ある。
(1)親要素にfloatを適用する
.parent {
float : left 혹은 right;
}(2)親要素に表示:inline-block;属性の使用
.parent {
display: linline-block;
}(3)オーバーフロー親要素:hidden;属性の適用
.parent {
overflow: hidden;
}overflow: auto;子要素ボックスの幅が親要素ボックスの幅より大きい場合は、スクロールが発生するため、適用は推奨されません.オーバーフローフィーチャーに基づいてオーバーフローのプロパティを非表示にします.他の意味も含まれます.
オーバーフローを非表示にする内容は、親要素ボックスが子要素の内容を非表示にすることです.
しかし、印刷されたサブエレメントによって親エレメントが高さを認識できない場合、overflow:hidden;属性を適用すると、親要素(Containing Box)はオーバーフロー要素を非表示にしようとし、子要素の高さを認識するために高さ値を自動的に計算します.
出典:https://webclub.tistory.com/606[Web Club]
(4)clearプロパティをフローティング要素の最後(兄弟)要素に適用する
float要素の最後に任意のタグを同級要素としてclear属性を適用します.一般に意味のないラベルは推奨されません.
<div class="box-group">
<div class="box is-blue"></div>
<div class="box is-yellow"></div>
<div class="box is-green"></div>
<div class="clear"></div> </div>.clear {
clear: none, left, right, both 중 사용;
}Reference
この問題について([TIL] CSS_ block, inline, inline-block), 我々は、より多くの情報をここで見つけました https://velog.io/@yejin20/TIL-CSS-block-inline-inline-blockテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol