Last active
March 18, 2019 06:22
-
-
Save hipi/91b8a0c1cf7dd15e28a93098e40ef757 to your computer and use it in GitHub Desktop.
reset 的目的不是让默认样式在所有浏览器下一致,而是减少默认样式有可能带来的问题。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** 清除内外边距**/ | |
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* 结构元素 - structural elements */ | |
dl, dt, dd, ul, ol, li, /* 列表元素 - list elements */ | |
pre, /* 文本格式元素 - text formatting elements */ | |
form, fieldset, legend, button, input, textarea, /* 表单元素 - from elements */ | |
th, td /* 表格元素 - table elements */ { | |
margin: 0; | |
padding: 0; | |
} | |
/** 设置默认字体 - setting the default font **/ | |
body, | |
button, | |
input, | |
select, | |
textarea { | |
font: 18px/1.5 Helvetica, sans-serif; | |
} | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6, | |
button, | |
input, | |
select, | |
textarea { | |
font-size: 100%; | |
} | |
/** 重置列表元素 - reset the list element **/ | |
ul, | |
ol { | |
list-style: none; | |
} | |
/** 重置文本格式元素 - reset the text format element **/ | |
a, | |
a:hover { | |
text-decoration: none; | |
} | |
/** 重置表单元素 - reset the form element **/ | |
button { | |
cursor: pointer; | |
} | |
input { | |
font-size: 18px; | |
outline: none; | |
} | |
/** 重置表格元素 - reset the table element **/ | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
/* | |
* 图片自适应 - image responsize | |
* 1. 清空浏览器对图片的设置 | |
* 2. <div>图片</div> 的情况下,图片会撑高 div,这么设置可以清除该影响 | |
*/ | |
img { | |
border: 0; | |
display: inline-block; | |
width: 100%; | |
max-width: 100%; | |
height: auto; | |
vertical-align: middle; | |
} | |
/* | |
* 默认box-sizing是content-box,该属性导致padding会撑大div,使用border-box可以解决该问题 | |
* set border-box for box-sizing when you use div, it solve the problem when you add padding and don't want to make the div width bigger | |
*/ | |
div, | |
input { | |
box-sizing: border-box; | |
} | |
/** 清除浮动 - clear float **/ | |
.jsliang-clear:after, | |
.clear:after { | |
content: "\20"; | |
display: block; | |
height: 0; | |
clear: both; | |
} | |
.jsliang-clear, | |
.clear { | |
*zoom: 1; | |
} | |
/** 设置input的placeholder - set input placeholder **/ | |
input::-webkit-input-placeholder { | |
color: #919191; | |
font-size: 0.32rem; | |
} /* Webkit browsers */ | |
input::-moz-placeholder { | |
color: #919191; | |
font-size: 0.32rem; | |
} /* Mozilla Firefox */ | |
input::-ms-input-placeholder { | |
color: #919191; | |
font-size: 0.32rem; | |
} /* Internet Explorer */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment