1.动画实现简洁 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;
}
}
2.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;
}
3.移除常用标签的浏览器默认的 margin 和 padding
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dd,
ul,
ol,
th,
td,
button,
figure,
input,
textarea,
form {
margin: 0;
padding: 0;
}
4.移除浏览器部分元素的默认边框
acronym、fieldset … 等其他标签不是很常用，就不会一一列举；如果项目中用到，可以自己单独写
img,
input,
button,
textarea {
border: none;
-webkit-appearance: none;
}
input {
/*由于 input 默认不继承父元素的居中样式，所以设置：「text-align: inherit」*/
text-align: inherit;
}
textarea {
/*textarea 默认不可以放缩*/
resize: none;
}
5.取消元素 outline 样式
由于以下元素的部分属性没有继承父节点样式，所以声明这些元素的这些属性为父元素的属性
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;
}
6.取消超链接元素的默认文字装饰
a {
text-decoration: none;
}
ol,
ul {
/*开发中 UI 设计的列表都是和原生的样式差太多，所以直接给取消 ol，ul 默认列表样式*/
list-style: none;
}
button,
input[type="submit"],
input[type="button"] {
/*鼠标经过是「小手」形状表示可点击*/
cursor: pointer;
}
input::-moz-focus-inner {
/*取消火狐浏览器部分版本 input 聚焦时默认的「padding、border」*/
padding: 0;
border: 0;
}
7.利用绝对定位宽高拉升原理，中心居中元素
.middle {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
8.使用unset而不是重置所有属性
重置元素的属性时，不需要重置每个单独的属性：
button {
background: none;
border: none;
color: inherit;
font: inherit;
outline: none;
padding: 0;
}
你可以用all简写來指定所有元素的属性。 将该值设置为unset会将元素的属性更改为其初始值：
button {
all: unset;
}