这篇文章会记录我们平时常用到的 CSS 片段,使用这些 CSS 可以帮助我们解决许多实际项目问题中遇到的,墙裂建议点赞收藏再看,方便日后查找
清除浮动
浮动给我们的代码带来的麻烦,想必不需要多说,我们会用很多方式来避免这种麻烦,其中我觉得最方便也是兼容性最好的一种是,在同级目录下再创建一个
;不过这样会增加很多无用的代码。此时我们用:after这个伪元素来解决浮动的问题,如果当前层级有浮动元素,那么在其父级添加上 clearfix 类即可。// 清除浮动
.clearfix:after {
content: "\00A0";
display: block;
visibility: hidden;
width: 0;
height: 0;
clear: both;
font-size: 0;
line-height: 0;
overflow: hidden;
}
.clearfix {
zoom: 1;
}
垂直水平居中
在 css 的世界里水平居中比垂直居中来的简单一些,经过了多年的演化,依然没有好的方式来让元素垂直居中(各种方式各有优缺点,但都不能达到兼容性好,破坏力小的目标),以下是几种常见的实现方式
绝对定位方式且已知宽高
专门建立的学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
position: absolute;
top: 50%;
left: 50%;
margin-top: -3em;
margin-left: -7em;
width: 14em;
height: 6em;
绝对定位 + 未知宽高 + translate
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
//需要补充浏览器前缀
flex 轻松搞定水平垂直居中(未知宽高)
display: flex;
align-items: center;
justify-content: center;
文本末尾添加省略号
当文本的内容超出容器的宽度的时候,我们希望在其默认添加省略号以达到提示用户内容省略显示的效果。
宽度固定,适合单行显示…
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
宽度不固定,适合多行以及移动端显示
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
制造文本的模糊效果
当我们希望给文本制造一种模糊效果感觉的时候,可以这样做
color: transparent;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
动画实现简洁 loading 效果
我们来实现一个非常简洁的 loading 效果
.loading:after {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
content: "\2026";
-webkit-animation: ellipsis 2s infinite;
}
// 动画部分
@-webkit-keyframes ellipsis {
from {
width: 2px;
}
to {
width: 15px;
}
}
自定义文本选中样式
默认情况下,我们在网页上选中文字的时候,会给选中的部分一个深蓝色背景颜色(可以自己拿起鼠标试试),如果我们想自己定制被选中的部分的样式呢?
// 注意只能修改这两个属性 字体颜色 选中背景颜色
element::selection {
color: green;
background-color: pink;
}
element::-moz-selection {
color: green;
background-color: pink;
}
顶角贴纸效果
有时候我们会有这样的需求,在一个列表展示页面,有一些列表项是新添加的、或者热度比较高的,就会要求在其上面添加一个贴纸效果的小条就像 hexo 默认博客的 fork me on github 那个效果一样。
接下来我们开始一步步完成最左边的这个效果
html
<div class="wrap">
<div class="ribbon">
<a href="#">Fork me on GitHub</a>
</div>
</div>
css
/* 外层容器几本设置 */
.wrap {
width: 160px;
height: 160px;
overflow: hidden;
position: relative;
background-color: #f3f3f3;
}
.ribbon {
background-color: #a00;
overflow: hidden;
white-space: nowrap;
position: absolute;
/* shadom */
-webkit-box-shadow: 0 0 10px #888;
-moz-box-shadow: 0 0 10px #888;
box-shadow: 0 0 10px #888;
/* rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* position */
left: -50px;
top: 40px;
}
.ribbon a {
border: 1px solid #faa;
color: #fff;
display: block;
font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 1px 0;
padding: 10px 50px;
text-align: center;
text-decoration: none;
/* shadow */
text-shadow: 0 0 5px #444;
}
input 占位符
当我们给部分 input 类型的设置 placeholder 属性的时候,有的时候需要修改其默认的样式。
input::-webkit-input-placeholder {
color: green;
background-color: #f9f7f7;
font-size: 14px;
}
input::-moz-input-placeholder {
color: green;
background-color: #f9f7f7;
font-size: 14px;
}
input::-ms-input-placeholder {
color: green;
background-color: #f9f7f7;
font-size: 14px;
}
移动端可点击元素去处默认边框
在移动端浏览器上,当你点击一个链接或者通过 Javascript 定义的可点击元素的时候,会出现蓝色边框,说实话,这是很恶心的,怎么去掉呢?
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
首字下沉
要实现类似 word 中首字下沉的效果可以使用以下代码
element:first-letter {
float: left;
color: green;
font-size: 30px;
}
小三角
在很多地方我们可以用得上小三角,接下来我们画一下四个方向的三角形
.triangle {
/* 基础样式 */
border: solid 10px transparent;
}
/*下*/
.triangle.bottom {
border-top-color: green;
}
/*上*/
.triangle.top {
border-bottom-color: green;
}
/*左*/
.triangle.top {
border-right-color: green;
}
/*右*/
.triangle.top {
border-left-color: green;
}
可以看出画一个小三角非常简单,只要两行样式就可以搞定,对于方向只要想着画哪个方向则设置反方向的样式属性就可以
鼠标手型
一般情况下,我们希望在以下元素身上添加鼠标手型
- a
- submit
- input[type=“iamge”]
- input[type=“button”]
- button
- label
- select
a[href],
input[type="submit"],
input[type="image"],
input[type="button"],
label[for],
sel