30 Seconds of CSS代码块解读(布局篇)

0.183字数 821阅读 248

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超出的文本用省略号替代。

推荐阅读更多精彩内容

  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
  • 今天看了张悬在出席同志婚姻合法化得例会上发表得演讲,她提到要谨慎的使用语言,这是我最近生活中一直被反复提示到要注意...