css小技巧以及一些基础使用查询

说明

每个具体的实例对应一个demo,点击每个demo效果上方的html以及css即可看到源码,如图

操作示例

正文开始

布局

盒子大小重置

重置盒子模型,使其宽度和高度不受border或者padding的影响

说明:

  1. box-sizing: border-box添加border以及padding不影响元素的width以及height
  2. box-sizing: inherit使元素继承父级元素的规则

清除浮动

确保元素能够清除其子元素的浮动

说明:

  1. .clearfix::after定义一个伪元素
  2. content: ‘’使用伪元素必须配合content属性,至少为空
  3. clear: both表示元素左右两侧不能与同一块格式化上下文中较早浮动的元素相邻

恒定宽高比

元素宽高比保持不变

说明:

  1. padding-top在伪元素上导致元素的高度等于其宽度的百分比。100%也就是意味着元素的高度始终是宽度的100%,从而创建响应式的div
  2. 此方式可以允许将内容正常放置在元素内

table居中

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

说明:

  1. ‘.center’元素的display: table允许元素表现的像table元素
  2. ‘.center’元素的100%的高度和宽度允许元素填充其父元素中的可用空间
  3. display: table-cell允许元素表现的像table中的单元格
  4. 再使用vertical-align: middle即可将子元素垂直居中
  5. 外部的父元素必须有固定的宽度和高度

子元素均匀分布

均匀的在父元素中分配子元素

说明:

  1. 使用flex布局
  2. justify-content: space-between均匀地水平分配子元素。第一个子元素位于左边缘,而最后一个子元素位于右边缘。或者,用于justify-content: space-around分配周围的空间,不至于使第一个以及最后一个子元素位于边缘

图片适配

更改图像在其容器中的适合度和位置,保留宽高比,之前使用background-size完成

说明:

  1. object-fit: contain适合容器内的整个图像,同时保留其纵横比。
  2. object-fit: cover用图像填充容器,同时保留其纵横比。
  3. object-position: [x] [y]将图像定位在容器内。

flexbox居中

使用flexbox进行水平以及垂直居中父元素的子元素

说明:

  1. justify-content: center 使子元素水平居中
  2. align-items: center 使子元素垂直居中

垂直居中小技巧

将元素垂直居中于另一个元素

说明:

  1. 使用:before伪元素的样式垂直对齐内联元素而不更改其position属性

grid居中

使用grid进行子元素的水平和垂直居中

说明:

  1. display: grid 启用网格
  2. justify-content: center 使子元素水平居中
  3. align-items: center 使子元素垂直居中

剩余可用高度

通过为最后一个元素提供当前视口中的剩余可用高度,即使调整窗口大小,也可利用剩余可用高度

说明:

  1. height: 100% 将容器的高度设置为视口高度
  2. display: flex 启用flexbox
  3. flex-direction: column 设置弹性项目顺序从上到下的方向
  4. flex-grow: 1 flexbox会将容器的剩余可用空间应用于最后一个子元素
  5. 父级必须具有视口高度。flex-grow: 1可以应用于第一个或第二个元素,它将具有所有可用空间

定位居中

使用position: absolute替代(flex以及table)进行垂直或水平居中,此方式不需要知道父级或者子集的宽高,适合响应式布局

说明:

  1. position: absolute 在子元素上允许它根据其包含块进行定位
  2. left: 50%并将top: 50%孩子从其包含块的左边和上边缘偏移50%
  3. transform: translate(-50%, -50%)以自身为左右偏移中心偏移自身50%

截断多行文本

如果一个文本多于一行,将截断最后一行,并渐变结束

说明:

  1. overflow: hidden 防止文本溢出其尺寸
  2. width: 400px 确保元素具有宽度
  3. height: 109.2px高度的计算值,它等于font-size line-height numberOfLines(在这种情况下26 1.4 3 = 109.2)
  4. height: 36.4px梯度容器的计算值,它等于font-size line-height(在这种情况下26 1.4 = 36.4)
  5. background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%)渐变从。transparent到#f5f6f9

截断单行文本

如果文本长于一行,它将被截断并以省略号结尾…

说明:

  1. overflow: hidden 防止文本溢出其尺寸
  2. white-space: nowrap 防止文本超出一行高度
  3. text-overflow: ellipsis 如果文本超出其宽度,它将以省略号结束
  4. width: 200px; 确保元素具有宽度,以了解何时获得省略号

视觉效果

li递增效果

css中也存在计数器,是由css统一维护,其值可以通过css规则进行递增用来跟踪它们的使用次数。

说明:

  1. counter-reset初始化计时器,该值是计数器的名称。默认情况下计数器从0开始。此属性还可以用于将其值改成任何特定数字
  2. counter-increment用于可数的元素。一旦counter-reset初始化,计数器的值可以增加或者减少
  3. counter(name, style)显示计数器的值。一般用户content。第一个参数为计数器的名称,第二个可以是decimal或者upper-roman
  4. counters(counter, string, style)显示计数器的值,三个参数,第一个计数器的名字,第二个来自计数器之后,第三个可以是decimal或者upper-roman
  5. css计数器可以用于制作轮廓列表特别有用,因为计数器的新的实例是在子元素中自动创建的。使用counters()函数可以在不同级别的嵌套计数器之间插入分隔文本

自定义滚动条

自定义滚动条的样式

说明:

  1. ::-webkit-scrollbar 以整个滚动条元素为目标
  2. ::-webkit-scrollbar-track 仅定位滚动条轨道

自定义文本选择样式

更改文本选择的样式

说明:

  1. ::selection在元素上定义一个伪选择器,以便在选中时为其中的文本设置样式

动态阴影

创建一个类似box-shadow但基于元素本身颜色的阴影

说明:

  1. z-index: 1 建立新的堆叠上下文
  2. position: absolute 将伪元素从文档流中取出,并将其相对于父元素绝对定位
  3. background: inherit 导致伪元素继承元素上指定的线性渐变
  4. filter: blur(0.4rem) 创建下方阴影的外观
  5. z-index: -1 将伪元素定位在父元素后面但在背景前面

渐变文字

为文本提供渐变颜色

说明:

  1. background: -webkit-linear-gradient(…) 给文本元素一个渐变背景
  2. webkit-text-fill-color: transparent 用透明颜色填充文本
  3. webkit-background-clip: text 使用文本剪切背景,使用渐变背景填充文本作为颜色

1px边框

为元素提供1px的元素边框

说明:

  1. 主要是利用伪元素再进行对应的缩放即可

:not选择器

:not选择器使用场景

说明:

  1. li:not(:last-child)指定样式应该应用于li除:last-child之外的所有元素

CSS切换开关

仅仅使用css进行开关的切换

说明:

  1. 这个自己研究一下
  2. 能抄过去好使用即可

动画(此部分不做说明)

弹跳加载

弹跳加载动画示例

按钮边框动画

创建一个按钮的边框动画

甜甜圈加载动画

创建一个甜甜圈加载动画

高度过渡动画

当一个元素高度未知时如何创建一个高度过渡动画

悬停放大动画

在文本悬停时在文本周围创建一个阴影框

悬停下划线动画

悬停之后下划线的动画

总结

上述就是我精选总结的css我们平时用到的一些内容,当然肯定还有很多这里没有涉及到的,希望大家如果有什么新的这里没有提及的,欢迎大家留言,我会不断更新这个内容为大家服务,当然,如果你忘了其中的一些内容,你也可以把这个当做成一个自己的css字典,欢迎来查,如果帮到你,下面的按钮你懂得!

小伙子别走,如果帮到您你懂得☺
0%