Skip to content
前端小尚 edited this page Feb 28, 2015 · 4 revisions

本模块提供局部初始化样式

##常用的几个函数

###$global-reset() 对浏览器自带的样式进行初始化。

与normalize模块$global-normalize()函数初始化的区别:

  • $global-normalize()统一了所有浏览器的样式表现,比如:给h1样式统一了font-size、margin;给figure统一了margin样式;等等。但它并不会去初始化ul、li的内外边距。
  • $global-reset()是对各种标签进行初始化,初始化了font-size、margin、padding等等
  • $global-normalize()适合在正文排版时使用,$global-reset()更适合用来做网页初始化。

###$nested-reset() 对选择器指定的元素内部进行样式重置。

###$reset-box-model() 对标签进行初始化内外边距以及边框,比如input标签等

input{
  $reset-box-model();
}
/*编译后*/
input{
  padding: 0;
  margin: 0;
  border: 0;
}

##其它函数

###$reset-focus() 去除css轮廓,比如input、textarea的焦点边框

textarea{
  $reset-focus();
}
/*编译后*/
textarea{
  outline: 0;
}

###$reset-font() 初始化字体

div{
  $reset-font();
}
/*编译后*/
div{
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

###$reset-body() 初始化行高

div{
  $reset-body();
}
/*编译后*/
div{
  line-height: 1;
}

###$reset-table() 初始化表格

table{
  $reset-table();
}
/*编译后*/
table{
  border-collapse: separate;
  border-spacing: 0;
  vertical-align: middle;
}

###$reset-table-cell() 初始化单元格

th{
  $reset-table-cell();
}
/*编译后*/
th{
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

###$reset-list-style() 初始化列表样式,比如li

li{
  $reset-list-style();
}
/*编译后*/
li{
  list-style: none;
}
Clone this wiki locally