30 Seconds of CSSコードブロック解読(レイアウト編)

30 Seconds of CSSコードブロック解読（レイアウト編）

これは30秒以内に役に立つCSSコードの断片を知ることができると言われています.GitHubアドレスはこちらです.中国語版がないため、以下にすべてのコードの断片を記録し、個人的な見解を失うことを加えます.
これは最初のレイアウト編で、主にflexとgirdレイアウト、フローティングのクリア、ボックスモデルの設定などに関連しています.

Box-sizing reset

ボックスモデルをリセットし、枠線(border)と塗りつぶし(padding)が要素幅に影響を与えないようにします.

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

説明:

box-sizing: border-boxは、要素の幅や高さに影響を及ぼさないように、塗りつぶしまたは枠線を追加します.

box-sizing: inherit親要素のボックスモデル設定規則を継承します.(デフォルトは継承ですが、少し余計ですか?)

Clearfix

エレメントがサブエレメントフローティングをクリアすることによる影響を確認します.このコードは、フローティングを使用したコードにのみ適用されます.可能な場合は、より現代的なflexまたはgridレイアウトを使用します.

  
float a
  
float b
  
float c

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.floated {
  float: left;
}

説明:

.clearfix::afterは、擬似要素を定義する.

content: ''は、擬似要素がレイアウトに影響を与えることを可能にする.

clear: bothは要素の左側を示し、右側または両側は同じブロックフォーマットコンテキストの古いフローティング要素に隣接できない.

Constant width to height ratio（幅比一定）

可変幅の要素を指定し、幅の高さ比を一定にします.

.constant-width-to-height-ratio {
  background: #333;
  width: 50%;
}
.constant-width-to-height-ratio::before {
  content: '';
  padding-top: 100%;
  float: left;
}
.constant-width-to-height-ratio::after {
  content: '';
  display: block;
  clear: both;
}

説明:

::before擬似要素にpadding-topを使用すると、要素の高さがその幅のパーセントに等しくなります.したがって、100%は、要素の高さが常に幅の100%であることを意味します.

::after擬似要素は、フローティングをクリアするために使用される.

Evenly distributed children

  
Item1
  
Item2
  
Item3

.evenly-distributed-children {
  display: flex;
  justify-content: space-between;
}

説明:

ここではflexレイアウトを使用しています.また、主軸上のサブエレメントの分布はjustify-content: space-betweenである.space-betweenは、最初の要素が左側に隣接し、最後の要素が右側に隣接し、残りの要素が残りの空間を分割することを意味します.

主軸のもう一つの分布方式はjustify-content: space-aroundであり、左右の両側の空間が隣接する元素距離の半分であることを意味し、すなわち親元素の周りにあることを意味する.

Flexbox centering

flexレイアウトを使用して、サブ要素を水平垂直に中央に配置します.今流行している中心的な方法でもあります.

  
Centered content.

.flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
}

Grid centering

gridレイアウトを使用して、サブ要素を水平垂直に中央に配置します.同じように流行している中心的な方法です

  
Centered content.

.grid-centering {
  display: grid;
  justify-content: center;
  align-items: center;
}

説明:

により、flexとgridの中央は非常に類似しており、displayの属性値が異なる以外は同じであることが分かった.しかし、両者の原理はまったく異なる.

Grid layout

girdを使用してレイアウトを行います.(これは30秒以上で見ることができません:)

  
Header
  
Sidebar
  

    Content
    

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  
  
Footer

.grid-layout {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    'sidebar header header'
    'sidebar content content'
    'sidebar footer  footer';
  color: white;
}
.grid-layout > div {
  background: #333;
  padding: 10px;
}
.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
}
.header {
  grid-area: header;
}
.footer {
  grid-area: footer;
}

説明:

gridレイアウトの概念はまだ多いので、直接google検索チュートリアルで勉強することをお勧めします.ここでは、girdレイアウトをgrid-template-columnsおよびgrid-template-areasによって行うことに重点を置いている.

Truncate text(テキストの切り捨て)

テキストが1行より長い場合、テキストは切り捨てられ、省略記号で終了します(...).注意すべきは、単行テキストにのみ適用されます.

If I exceed one line's width, I will be truncated.

.truncate-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
}

説明:

overflow: hiddenは、要素の幅を超えたテキストを非表示にします.

white-space: nowrap要素内のテキストの改行を阻止します.

text-overflow: ellipsisを超えるテキストは省略記号で置き換えられます.