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

作者 : 开心源码 本文共3003个字,预计阅读时间需要8分钟 发布时间: 2022-05-11 共65人阅读

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

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 30 Seconds of CSS代码块解读(布局篇)

发表回复