提高你 CSS 开发效率的必备片段

Ryan

2020-04-21/0 评论/317 浏览

博主最近在大改自用主题,在下面列出的都是博主弄博客主题非常有用的CSS片段。

垂直居中(未知宽高,常用于图文居中对齐)

display: flex;
justify-content: center;
align-items: center;

清除浮动,(解决就浮动元素父元素高度为0)

.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;
}

文字超出长度显示省略号

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /*行数*/
-webkit-box-orient: vertical;

移动端可点击元素去处默认边框

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

重置outline样式(最常见就是Safari浏览器的按钮是圆角的)

a,
h1,
h2,
h3,
h4,
h5,
h6,
input,
select,
button,
option,
textarea,
optgroup {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    line-height: inherit;
    color: inherit;
    outline: none;
}

鼠标形状:手型

a[href],
input[type="submit"],
input[type="image"],
input[type="button"],
label[for],
select,
button {
cursor: pointer;
}

移除浏览器部分元素的默认边框

img,
input,
button,
textarea {
border: none;
    -webkit-appearance: none;
}

input {
    /*由于 input 默认不继承父元素的居中样式,所以设置:「text-align: inherit」*/
    text-align: inherit;
}

textarea {
    /*textarea 默认不可以放缩*/
    resize: none;
}
文章出自:虾米皮皮乐 https://xiamp.net/archives/efficient-css-rules.html,版权所有。本站文章除注明出处外,皆为作者原创文章,可自由引用,但请注明来源。
0 评论
317 浏览
您的大名:
万水千山总是情,给个打赏行不行。 打赏

发表评论

虾米皮皮乐

Ryan

版权申明:收费资源由本站发布,用户购买后只有终端使用权,禁止转售和转载

暂无附件
暂无目录
提高你 CSS 开发效率的必备片段
04/21
2020
博主最近在大改自用主题,在下面列出的都是博主弄博客主题非常有用的CSS片段。垂直居中(未知宽高...
扫描右侧二维码阅读全文