-
Notifications
You must be signed in to change notification settings - Fork 4
reset
前端小尚 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;
}