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<div class="clearfix">  <div class="floated">float a</div>  <div class="floated">float b</div>  <div class="floated">float c</div></div>//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<div class="constant-width-to-height-ratio"></div>//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<div class="evenly-distributed-children">  <p>Item1</p>  <p>Item2</p>  <p>Item3</p></div>//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<div class="flexbox-centering">  <div class="child">Centered content.</div></div>//CSS.flexbox-centering {  display: flex;  justify-content: center;  align-items: center;}

Grid centering

用grid布局让子元素水平垂直居中。同样是比较流行的居中方式

//HTML<div class="grid-centering">  <div class="child">Centered content.</div></div>//CSS.grid-centering {  display: grid;  justify-content: center;  align-items: center;}

说明：

1. 能发现，flex和grid的居中十分类似，除了display属性值不同外，其他都相同。但是两者的原理是截然不同的。

Grid layout

用gird进行布局。(这个可不止30秒才可以看完:))

//HTML<div class="grid-layout">  <div class="header">Header</div>  <div class="sidebar">Sidebar</div>  <div class="content">    Content    <br>    Lorem ipsum dolor sit amet, consectetur adipisicing elit.  </div>  <div class="footer">Footer</div></div>//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<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>//CSS.truncate-text {  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;  width: 200px;}

说明：

1. overflow: hidden将超出元素宽度的文本进行隐藏。
2. white-space: nowrap阻止元素内的文本进行换行。
3. text-overflow: ellipsis超出的文本使用省略号替代。