Skip to content

Instantly share code, notes, and snippets.

@hipi
Last active March 18, 2019 06:22
Show Gist options
  • Save hipi/91b8a0c1cf7dd15e28a93098e40ef757 to your computer and use it in GitHub Desktop.
Save hipi/91b8a0c1cf7dd15e28a93098e40ef757 to your computer and use it in GitHub Desktop.
reset 的目的不是让默认样式在所有浏览器下一致,而是减少默认样式有可能带来的问题。
/** 清除内外边距**/
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