TIL|Layout styleと要素の配置

接続されているWebサイトの要素がどのように配置されているかは、シンプルで簡潔で洗練されているように見えます.
ユーザーの観点から見ると、関連機能は簡単に配置でき、目的の機能を簡単に見つけることができます.スクロールスクリーンも固定でき、画面をより使いやすくすることができます.
CSSの特定の属性を利用して、上のように美しく、よくアクセスするサイトを作成することができます.

1. position

positionは、要素を自由に配置するための属性です.
アクションのプロパティ値は、次のようになります.

静的:位置プロパティを適用しない(デフォルト)

相対

:要素相対位置(親要素)

absolute:要素は絶対位置(サブ要素)

に配置されます.

固定:要素固定不動(ex.nav bar,🔼

親要素に対して子要素を配置するために使用される座標属性(↑,→,↓,←)は、static以外の属性値を宣言した場合にのみ使用できます.
positionプロパティを使用して、ブラウザのサイズを考慮せずに要素を真ん中に配置することもできます.

.component {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); // 요소의 좌측상단의 좌표를 이동시킴
}

2. display

displayは、画面を構成するために多くの要素を配置するための属性である.
レイアウト要素の配置とプロパティの変更に関する重要なプロパティと値を理解する必要があります.

Inline Elements vs. Block Elements

基本的なレイアウトスタイルを比較し、それらの違いを理解します.
行内要素ブロック内要素に使用されるタグの例span、adiv、h 1~h 6 img、inputtags、buttonのデフォルト幅値コンテンツ値100%コンテンツ値1行に配置可能な要素2つ以上width値は許容できません
構造を簡略化するには、状況に応じて行またはブロック要素を選択してコードを記述します.
displayプロパティを使用して、ブロック要素と行内要素のプロパティを変更できます.
デフォルトのプロパティがinline-blockのimgタグを次のように記述すると、横方向に配置されたシェイプにはblock要素のプロパティがあり、縦方向に配置されます.

img {
  display: block;
}

デフォルトのプロパティがinlineのaラベルにサイズを設定する場合は、block要素に変更する必要があります.
block要素になると、サイズを調整できますが、横に配置するために、inlineとblockの性質をinlineとblockの性質を同時に持つinline blockに変更します.

a {
  display: inline-block;
}

3. float

floatは、要素を左または右に配置するための属性です.
現在はfloatではなくflexプロパティが主に使用されていますが、以前floatとして使用されていたコードを理解するためにはfloatプロパティも理解する必要があります.
floatのプロパティ値は次のようになります.

none:float属性(デフォルト)を適用しない

左:要素を左

に配置

right:要素を右側に

デフォルトでは、要素は左側に表示され、floatプロパティのデフォルト値はleftではなくnoneです.
floatプロパティは、2つ以上の要素を水平に配置するために使用されます.
float属性を付与する要素のサブ要素は、floatを継承し、水平に配置された形で表されます.
floatプロパティによるレイアウトの歪みを解決する方法を次に示します.

'overflow: hidden;'

clearプロパティ(clearfix)

子要素が浮動している場合、親要素は子要素を発見せず、存在しないと見なされます.したがって、親要素の高さは0です.
この場合、親要素の高さ値「overflow:hidden;」を検索します.ズームで解決できます.
clearプロパティは、floatプロパティを適用する要素の次の要素がfloatに継承されないように要素を修復します.
block要素にのみ適用され、clearのプロパティ値は次のとおりです.

left:「float:left」継承、終了

right:「float:right」継承、終了

双:“float:left”,“float:right”,解除相続

HTMLに無意味な要素を追加せず、CSSでclearfixを使用する場合は、仮想要素を追加してclearプロパティを適用する必要があります.
floatが適用されたサブエレメントを持つ親エレメントの前または後(after)に仮想サブエレメントを作成します.
clearプロパティを使用するには、さらに宣言する必要があるプロパティもあります.

コンテンツ:属性値として空の文字列を作成して画面に表示します.

display:clearプロパティはblockプロパティを持つ要素にのみ使用できます.

.parent::after {
  content: "";
  display: block;
  clear: both;
}

ソース:float(overflow&clear)を無効にする方法