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;
}

說明：

1. box-sizing: border-box使得新增填充或邊框不會影響元素的寬度或高度。

2. box-sizing: inherit繼承父元素的盒模型設定規則。(預設就是繼承，是否略微多餘？)

Clearfix

確保元素清除子元素浮動帶來的影響。該程式碼僅適用於使用了浮動的程式碼。如果可以，請使用更現代的flex或grid佈局。

//HTML

  
float a
  
float b
  
float c
//CSS
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.floated {
  float: left;
}

說明：

1. .clearfix::after定義了一個偽元素。

2. content: ''允許偽元素影響佈局。

3. clear: both指示元素的左側，右側或兩側不能與相同塊格式化上下文中較早的浮動元素相鄰。

Constant width to height ratio(寬高比恆定)

給定可變寬度的元素，讓其寬高比保持不變。

//HTML


//CSS
.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;
}

說明：

1. 在::before偽元素上使用padding-top導致元素的高度等於其寬度的百分比。 因此100％意味著元素的高度始終為寬度的100％。

2. ::after偽元素來清除浮動。

Evenly distributed children(均勻分佈子元素)

//HTML

  
Item1
  
Item2
  
Item3


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

說明：

1. 這裡使用了flex佈局。而且子元素在主軸上的分佈方式是justify-content: space-between。space-between的意思是第一個元素緊靠左側，最後一個元素緊靠右側，其餘元素平分剩餘空間。

2. 主軸的另一個分佈方式還有justify-content: space-around，意味著左右兩側的空間是相鄰元素距離的一半，也就是圍繞(around)在父元素。

Flexbox centering

使用flex佈局讓子元素水平垂直居中。也是現在比較流行的居中方式。

//HTML

  
Centered content.


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

Grid centering

使用grid佈局讓子元素水平垂直居中。同樣是比較流行的居中方式

//HTML

  
Centered content.


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

說明：

1. 可以發現，flex和grid的居中十分相似，除了display屬性值不同外，其餘都相同。但是兩者的原理是截然不同的。

Grid layout

使用gird進行佈局。(這個可不止30秒才能看完:))

//HTML

  
Header
  
Sidebar
  

    Content    

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.  
  
Footer
//CSS
.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;
}

說明：

1. grid佈局的概念還是挺多的，建議直接google搜尋教程學習。這裡重點是透過grid-template-columns和grid-template-areas進行gird佈局。

Truncate text(截斷文字)

如果文字長於一行，則它將被截斷並以省略號結束(...)。需要注意的是，只適用於單行文字。

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

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

說明：

1. overflow: hidden將超出元素寬度的文字進行隱藏。

2. white-space: nowrap阻止元素內的文字進行換行。

3. text-overflow: ellipsis超出的文字用省略號替代。

作者：坤少卡卡
連結：