【译】这44个 CSS 精选知识点你能在30 秒内给出答案吗?

github.com/30-seconds/…

当然提前需要和作者沟通下得到作者的允许,作者希望创建一个仓库并且和官方保持同步更新,让更多的人看到。

中文仓库 github.com/Bigerfe/30-… ,目前完成了 CSS 精选集合的翻译。


本文属于意译而非直译,为了方便理解也增加了一些自己的语言,如果存在偏差或错误还请留言指正。

精选的有用CSS片段集合,您可以在30秒或更短的时间内理解这些片段。

本 CSS 精选集合共分为5类 – 布局、视觉、动画、交互、其他。

更加详细的内容还请看 原文档。github.com/30-seconds/…

布局

1. 盒模型重置

盒模型重置,使盒子的宽度和高度不受其边框(border)或填充(padding)的影响。
复制代码

HTML

<div class="box">border-box</div>
<div class="box content-box">content-box</div>
复制代码

CSS

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
.box {
  display: inline-block;
  width: 150px;
  height: 150px;
  padding: 10px;
  background: tomato;
  color: white;
  border: 10px solid red;
}
.content-box {
  box-sizing: content-box;
}
复制代码

DEMO

可在 CodePen 上查看真实效果和编辑代码

说明

  • box-sizing:当元素设置为border-box时,即便设置了padding或border也不会改变元素的宽度和高度。
  • box-sizing:设置inherit使元素继承父级的box-sizing规则。

浏览器支持情况

99.9% 查看本条 caniuse

2. 清除浮动更好的方式

无需借助辅助元素进行浮动的清除。

注意:这仅在使用float布局时才有用。实际场景中请考虑使用Flexbox布局或者网格布局。

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{
  border:solid 1px red;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
.floated {
  float: left;
  margin-left:20px;
}

复制代码

DEMO

可在 CodePen 上查看真实效果和编辑代码

浏览器支持情况

100%

3. 不变宽高比

给定宽度可变的元素,它将确保其高度以响应方式保持成比例(即,其宽高比保持不变)。

DEMO

可在 CodePen 上查看真实效果和编辑代码

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;
}
复制代码

说明

  • width:50% 只设置父级元素的宽度
  • ::before 为父级元素定义一个伪元素
  • padding-top: 100%; 设置伪元素的内上边距,这里的百分比的值是按照宽度计算的,所以会呈现为一个响应式的元素块。
  • 此方法还允许将内容正常放置在元素内。

浏览器支持情况

100%


4.使用表格居中

使用display:table(作为flexbox的替代)使子元素在其父元素中水平垂直居。

HTML

<div class="container">
  <div class="center"><span>Centered content</span></div>
</div>
复制代码

CSS

.container {
  border: 1px solid #333;
  height: 250px;
  width: 250px;
}
.center {
  display: table;
  height: 100%;
  width: 100%;
}
.center > span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
复制代码

DEMO

可在 CodePen 上查看真实效果和编辑代码

  • display:table 使.center元素的行为类似于 HTML元素。
  • 设置.center的宽高为100%,使其填满父元素。
  • display:table-cell, 设置’.center > span’的table-cell允许元素表现得像HTML元素。
  • text-align: center 使子元素水平居中。
  • vertical-align: middle 使子元素垂直居中。
  • display: flex :启动flex 布局
  • justify-content: space-between:
  • 均匀地水平分配子元素。 第一个子元素位于左边缘,而最后一个子元素位于右边缘。 或者,使用justify-content:space-around来分配子节点周围的空间,而不是它们之间。
  • 需要前缀才能获得全面支持。 caniuse
  • object-fit: contain 容器内显示整个图像,并且保持宽高比
  • object-fit: cover 用图像填充容器,并保持宽高比
  • object-position: [x] [y] 对图像的显示部位进行调整
  • display: flex 启用 flex 局部
  • justify-content: center 子元素水平居中
  • align-items: center 子元素垂直居中
  • display: grid 启用网格布局
  • justify-content: center 使子元素水平居中
  • align-items: center 使子元素垂直居中
  • height: 100% 将容器的高度设为视口的高度
  • display: flex 启用 flex
  • flex-direction: column 将项目的顺序设置成从上到下
  • flex-grow: 1 flexbox会将容器的剩余可用空间应用于最后一个子元素。 父级必须具有视口高度。 flex-grow:1可以应用于第一个或第二个元素,它将具有所有可用空间。
  • 删除所有边框
  • 使用 clip 隐藏元素
  • 设置宽高为1px
  • 使用margin:-1px取消元素的高度和宽度
  • 隐藏元素的溢出
  • 移除所有的padding
  • 绝对定位元素,使其不占用DOM中的空间
  • overflow: hidden 防止内容溢出
  • width: 400px 确保元素有尺寸
  • height: 109.2px 计算的高度值,它等于font-size * line-height * numberOfLines(在这种情况下为26 * 1.4 * 3 = 109.2)
  • height: 36.4px 渐变容器的计算值,它等于font-size * line-height(在这种情况下为26 * 1.4 = 36.4)
  • background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50% 渐变从 透明到渐变从透明到#f5f6f9
  • counter-reset 初始化计数器,该值是计数器的名称。默认情况下,计数器从0开始。此属性还可用于将其值更改为任何特定数字。
  • counter-increment 用于可数的元素。 一旦计数器重置初始化,计数器的值可以增加或减少。
  • counter(name, style)显示节计数器的值。通常用于内容属性。此函数可以接收两个参数,第一个作为计数器的名称,第二个参数表示占位内容,例如3.1的小数点。
  • CSS计数器对于制作轮廓列表特别有用,因为计数器的新实例是在子元素中自动创建的。使用counters()函数,可以在不同级别的嵌套计数器之间插入分隔文本。
  • ::after 定义一个伪元素
  • position: absolute 使伪元素脱离文档流并相对于父级定位
  • width: 100% and height: 100% 对伪元素进行大小调整以填充其父元素的大小,使其大小相等。
  • background: inherit 使伪元素继承父级的线性渐变
  • top: 0.5rem 将伪元素相对于其父元素略微偏移。
  • filter: blur(0.4rem) 设置伪元素模糊效果,以创建下方阴影效果。
  • opacity: 0.7 设置伪元素透明度
  • z-index: -1 将伪元素定位在父元素后面但在背景前面。
  • text-shadow: 0 2px white 从原点位置创建一个水平偏移0px和垂直偏移2px的白色阴影。
  • 背景必须比阴影更暗,效果才更明显。
  • 伪类::focus-within 将对应的样式应用于父元素(任何子元素被聚焦)。 例如,表单元素内的输入元素。
  • :fullscreen 伪类选择器用于选择和设置以全屏模式显示的元素。
  • li:not(:last-child) 设置除last:child之外的所有li元素的样式,所以最后一个元素右侧没有 border.
  • ::after 定义一个伪元素用来展示渐变效果
  • background-image: linear-gradient(...) 添加一个从透明变为白色(从上到下)的线性渐变。
  • pointer-events: none 指定伪元素不能是鼠标事件的目标,后面的文本仍然是可选择/交互的。
  • background-image: url(...)添加SVG形状(24×12三角形)作为伪元素的背景图像,默认情况下重复。 它必须与要分割的块颜色相同。对于其他形状,我们可以使用SVG的URL编码器
  • -apple-system在iOS和macOS上使用(但不是Chrome)
  • BlinkMacSystemFont 用于macOS Chrome
  • Segoe UI 用于Windows 10
  • Roboto 在Android上使用
  • Oxygen-Sans 在Linux KDE上使用
  • Ubuntu 用于Ubuntu
  • Cantarell 在GNOME Shell的Linux上使用
  • Helvetica Neue and Helvetica 用于macOS 10.10及更低版本
  • Arial 操作系统广泛支持的字体
  • sans-serif 如果不支持其他任何字体,则降级使用 sans-serif 通用字体
  • 注意:将会导致所有动画帧重排,过度中如果元素下方有大量元素,则可能会出现滞后现象。
  • display: inline-block 使p成为内联块,以防止下划线跨越整行宽度而不仅仅是文本内容。
  • position: relative 设置父元素为相对定位
  • ::after 定义一个伪元素
  • position: absolute 将伪元素脱离文档六,并将其相对于父元素定位
  • width: 100% 确保伪元素和父元素的宽度一致。
  • transform: scaleX(0) 最初将伪元素缩放为0,因此他是看不见的。
  • bottom: 0 and left: 0 将伪元素放在父元素的左下角。
  • transition: transform 0.25s ease-out 设置动画效果为ease-out,并且在0.25秒内完成。
  • transform-origin: bottom right 变换中心点到父元素的右下角。
  • :hover::after 然后使用scaleX(1)将宽度转换为100%,然后将中心点更改为左下角,允许它在悬停时从另一个方向转换出来。
  • left: 100% 弹出菜单从左侧偏移其父级宽度的100%。
  • visibility: hidden
  • .reference:hover > .popout-menu 鼠标悬停时,.popout-menu 显示
  • .reference:focus > .popout-menu 聚焦时,.popout-menu 显示
  • .reference:focus-within > .popout-menu 确保在焦点位于参考范围内时显示弹出窗口。
  • transition: opacity 0.2s 设置0.2秒的淡化动画。
  • .sibling-fade:hover span:not(:hover)当父级悬停时,选择当前未悬停的span子项并将其透明度更改为0.5。
  • 允许加法,减法,乘法和除法。
  • 可以为表达式中的每个值使用不同的单位(例如,像素和百分比)。
  • 允许嵌套calc()函数。
  • 它可用于任何允许,,,,,或的属性,如width,height,font-size,top等。
  • --variable-name: 用这样的格式来声明变量。
  • var(--variable-name) 使用此函数在整个文档中重用变量。

作者:zz_jesse
链接:https://juejin.im/post/5d40120f6fb9a06b0471d956
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

发表评论

电子邮件地址不会被公开。 必填项已用*标注