手记

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

确保元素清除子元素浮动带来的影响。该代码仅适用于使用了浮动的代码。如果可以,请使用更现代的flexgrid布局。

<div class="clearfix">
  <div class="floated">float a</div>
  <div class="floated">float b</div>
  <div class="floated">float c</div></div>
.clearfix::after {  content: '';  display: block;  clear: both;
}.floated {  float: left;
}

说明:

  1. .clearfix::after定义了一个伪元素。

  2. content: ''允许伪元素影响布局。

  3. clear: both指示元素的左侧,右侧或两侧不能与相同块格式化上下文中较早的浮动元素相邻。

Constant width to height ratio(宽高比恒定)

给定可变宽度的元素,让其宽高比保持不变。

<div class="constant-width-to-height-ratio"></div>
.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(均匀分布子元素)

<div class="evenly-distributed-children">
  <p>Item1</p>
  <p>Item2</p>
  <p>Item3</p></div>
.evenly-distributed-children {  display: flex;  justify-content: space-between;
}

说明:

  1. 这里使用了flex布局。而且子元素在主轴上的分布方式是justify-content: space-betweenspace-between的意思是第一个元素紧靠左侧,最后一个元素紧靠右侧,其余元素平分剩余空间。

  2. 主轴的另一个分布方式还有justify-content: space-around,意味着左右两侧的空间是相邻元素距离的一半,也就是围绕(around)在父元素。

Flexbox centering

使用flex布局让子元素水平垂直居中。也是现在比较流行的居中方式。

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

Grid centering

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

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

说明:

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

Grid layout

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

<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>
.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-columnsgrid-template-areas进行gird布局。

Truncate text(截断文本)

如果文本长于一行,则它将被截断并以省略号结束(...)。需要注意的是,只适用于单行文本。

<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>
.truncate-text {  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;  width: 200px;
}

说明:

  1. overflow: hidden将超出元素宽度的文本进行隐藏。

  2. white-space: nowrap阻止元素内的文本进行换行。

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



作者:坤少卡卡
链接:https://www.jianshu.com/p/ca620e0fd971

0人推荐
随时随地看视频
慕课网APP