提升前端开发效率的CSS技巧有哪些
今天小编给大家分享一下提升前端开发效率的CSS技巧有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
创新互联公司专注于荥阳网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供荥阳营销型网站建设,荥阳网站制作、荥阳网页设计、荥阳网站官网定制、小程序制作服务,打造荥阳网络公司原创品牌,更为您提供荥阳网站排名全网营销落地服务。
1. 解决图片5px间距问题
是否经常遇到图片底部多出 5px
间距的问题?不着急,有4种方法可以解决。
解决方案 1:将其父元素的
font-size:0px
解决方案 2:将 img 的样式增加
display:block
解决方案 3:将 img 的样式增加
vertical-align:bottom
解决方案 4:将父元素的样式增加
line-height:5px
2. 如何让元素高度与窗口相同
在现在前端中,CSS有一个单位是 vh
,将元素高度样式设置为 height:100vh
3. 修改输入框 placeholder 样式
这个是表单输入框占位符属性,如何来修改默认样式,如下:
input::-webkit-input-placeholder {
color: #babbc1;
font-size: 12px;
}
4. 使用 :not
选择器
除了最后一个元素之外的所有元素都需要一些样式,使用 not
选择器可以非常容易实现。
例如实现一个列表,最后一个元素不需要下划线,如下:
li:not(:last-child) {
border-bottom: 1px solid #ebedf0;
}
5. 使用 caret-color
修改光标颜色
有时需要修改光标的颜色。现在是插入符号颜色显示时间。
.caret-color {
width: 300px;
padding: 10px;
margin-top: 20px;
border-radius: 10px;
border: solid 1px #ffd476;
box-sizing: border-box;
background-color: transparent;
outline: none;
color: #ffd476;
font-size: 14px;
/* 关键样式 */
caret-color: #ffd476;
}
.caret-color::-webkit-input-placeholder {
color: #4f4c5f;
font-size: 14px;
}
6. 使用 flex 布局将元素智能地固定在底部
当内容不够时,按钮应该在页面底部。当有足够的内容时,按钮应该跟随内容。当遇到类似问题时,可以使用flex
实现智能布局!
CSS 代码如下:
.container {
height: 100vh;
/* 关键样式 */
display: flex;
flex-direction: column;
justify-content: space-between;
}
.main {
/* 关键样式 */
flex: 1;
background-image: linear-gradient(
45deg,
#ff9a9e 0%,
#fad0c4 99%,
#fad0c4 100%
);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.footer {
padding: 15px 0;
text-align: center;
color: #ff9a9e;
font-size: 14px;
}
7. 去掉 type="number"
末尾的箭头
默认情况下,input 类型为 type="number"
的末尾会出现一个小箭头,但有时需要将其去掉,可以用一下样式:
input {
width: 300px;
padding: 10px;
margin-top: 20px;
border-radius: 10px;
border: solid 1px #ffd476;
box-sizing: border-box;
background-color: transparent;
outline: none;
color: #ffd476;
font-size: 14px;
caret-color: #ffd476;
display: block;
}
input::-webkit-input-placeholder {
color: #4f4c5f;
font-size: 14px;
}
/* 关键样式 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
8. 使用 outline:none
删除输入状态行
当输入框被选中时,默认会有一个蓝色的状态行,可以使用 outline:none
将其去掉。
9. 解决iOS滚动条卡住的问题
在苹果手机上,经常会出现滚动时元素卡住的情况,这个时候只有一行CSS会支持弹性滚动。
body,html{
-webkit-overflow-scrolling: touch;
}
10. 画三角形
.triangle {
display: inline-block;
margin-right: 10px;
/* 基础样式 */
border: solid 10px transparent;
}
/* 向下三角形 */
.triangle.bottom {
border-top-color: #0097a7;
}
/* 向上三角形 */
.triangle.top {
border-bottom-color: #b2ebf2;
}
/* 向左三角形 */
.triangle.left {
border-right-color: #00bcd4;
}
/* 向右三角形 */
.triangle.right {
border-left-color: #009688;
}
11. 自定义选定的文本样式
可以通过样式自定义文本选择的颜色和样式,关键样式如下:
::selection {
color: #ffffff;
background-color: #ff4c9f;
}
12. 不允许选择的文本
使用样式 user-select: none;
13 使用 filter:grayscale(1)
使页面处于灰色模式
一行代码将使页面处于灰色模式。
body{
filter: grayscale(1);
}
以上就是“提升前端开发效率的CSS技巧有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。
当前名称:提升前端开发效率的CSS技巧有哪些
浏览路径:http://scyanting.com/article/jscocp.html