提升前端开发效率的CSS窍门有哪些

发布时间：2023-07-26 11:30:24 所属栏目：教程来源：转载

导读： 　　给大家分享一下提升前端开发效率的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实现智能布局！

　　<div class="container">

　　 <div class="main">这里为内容</div>

　　 <div class="footer">按钮</div>

　　</div>

　　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);

　　}

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!