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

最近在大改子主题,在下面列出的都是弄子主题非常有用的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;
}