常见元素的默认样式去除

1、全局去除默认样式

*{
  padding:0;
  margin:0;
  box-sizing: border-box;  /*怪异盒子,设置了宽高后border和padding不会撑开元素的宽高*/
}

2、a标签

a{
  text-decoration: none;  /*去除文本下划线*/
  color:#333; /*修改字体颜色*/

}
a:hover, a:visited, a:link, a:active {
  color:#333; /*设置使所有a标签的四种状态都和本身颜色保持一致*/
}

3、li、ol

ul,ol{
  list-style: none; /*去除开头的小圆点或序号*/
}

4、img

img{
  vertical-align:top;/*让图片与其他行内元素对其*/
  border:none; /*去除图片边框*/
}

6、select

select {
  border: none;
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none; 
  background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent; /*在选择框的最右侧中间显示小箭头图片*/
  padding-right: 14px;
}

7、h1~h6

h1,h2,h3,h4,h5,h6{
  font-weight:normal;
}

9、斜体 i

i{
  font-style: normal;
}

10、table

table{
  border-collapse:collapse;
  border-spacing:0;
}

8、input

input {
  outline: none;
  border: none;
  background: none;
}

8、input,[type=textarea]

input,textarea {
  outline: none;
  border: none;
}
textarea {
  resize: none; //不可改变大小
  overflow: auto;
}

11、去除input [type=number] 加减号

/*去除input[type=number]加减号*/
/* 谷歌 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
/* 火狐 */
input{
  -moz-appearance:textfield;
}

 

posted @ 2022-09-22 17:36  Lamb~  阅读(110)  评论(0编辑  收藏  举报