CSS SNIPPET

页面布局

点击卡片标题或按钮查看代码片段。

3列布局

使用display: inline-block水平对齐条目创建3列布局。

效果演示
placeholder

30 Seconds of CSS

placeholder

30 Seconds of CSS

placeholder

30 Seconds of CSS

查看代码

Ghost trick实现元素居中

将一个元素在另一个元素内垂直居中。

效果演示

Vertically centered without changing the position property.

查看代码

Lobotomized Owl选择符

为文档中所有跟随其他元素的元素自动设置继承的边界。

效果演示
Parent 01
Parent 02
Child 01
Child 02
Parent 03

查看代码

固定宽高比

让长度不定的元素响应式保持固定的宽高比。

效果演示

查看代码

复位Box-sizing属性

复位盒模型,使 widthheight不受borderpadding的影响。

效果演示
border-box
content-box

查看代码

平均分布子元素

在父元素内平均分布排列子元素。

效果演示

Item1

Item2

Item3

查看代码

截断超长文本

截断超过行宽的文本并在结尾添加省略号

效果演示

If I exceed one line's width, I will be truncated.

查看代码

截断超长文本为多行

将超出行宽的文本截断为n行并在结束部分淡出。

效果演示

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.

查看代码

栅格布局实现元素居中

在父元素内使用grid布局将子元素水平和垂直居中。

效果演示
Centered content.

查看代码

清理浮动

为子元素自动清理浮动。

Note: 这个方法仅适用于你还在使用浮动布局。请考虑使用现代方法

如flexbox布局或栅格布局。

效果演示
float a
float b
float c

查看代码

用Flexbox布局居中元素

使用flexbox在父元素内水平和垂直居中子元素。

效果演示
Centered content.

查看代码

用transform实现元素居中

在父元素内水平和垂直居中一个子元素。使用position: absolutetransform: translate() (作为flexboxdisplay: table的替代方案)。类似于 flexbox,这个方法不需要你知道 父/子元素的高度或宽度,因此对于响应式应用来说非常理想。

效果演示
Centered content

查看代码

用表格布局实现元素居中

将指定元素在其父元素内水平和垂直居中,使用 display: table而不是flexbox

效果演示
Centered content

查看代码

自动填满容器剩余空间

让最后一个元素占满当前视口的剩余空间,缩放浏览器窗口也没影响。

效果演示
Div 1
Div 2
Div 3

查看代码

让图像适配容器元素

通过修改fitposition属性让图像填满容器元素并保持图像的宽高比。之前只能 使用背景图像和background-size属性实现。

效果演示

查看代码

隐藏元素的离屏渲染法

完全隐藏元素但依然允许屏幕阅读器和JavaScript读取的安全的方法。 这个方法非常有助于存在视觉障碍用户需要更多上下文时的可访问性(ADA) 开发。可以替代display: none ,因为它不能被屏幕阅读器读取。 也可以替代visibility: hidden 因为它占用DOM的物理空间。

效果演示

查看代码