CSS-初始化模板(normalize.css)

  1 /*
  2 *在所有浏览器中更正行高。
  3 *防止在更改方向后调整字体大小
  4 *Windows Phone和iOS上的IE。
  5 */
  6 html{
  7     font-family:sans-serif;
  8     line-height:1.15;
  9     -ms-text-size-adjust:100%;
 10     -webkit-text-size-adjust:100%;
 11 }
 12 
 13 /*删除页面中的边距*/
 14 body{
 15     margin:0;
 16     padding:0;
 17 }
 18 
 19 /*在IE中一致呈现“main”元素。*/
 20 main{
 21     display:block;
 22 }
 23 
 24 /*
 25 *更正“section”和“h1”元素的字体大小和边距
 26 *Chrome、Firefox和Safari中的“article”元素上下文。
 27 */
 28 h1{
 29     font-size:2em;
 30     margin:0.67em 0;
 31 }
 32 
 33 /*
 34 *在Firefox中添加正确的框大小。
 35 *显示边缘和IE中的溢出。
 36 */
 37 pre{
 38     font-family:monospace,monospace;
 39     font-size:1em;
 40 }
 41 
 42 /*文本级语义*/
 43 /*========================================================================== */
 44 
 45 /*删除IE 10中活动链接上的灰色背景。*/
 46 a{
 47     background-color:transparent;
 48 }
 49 
 50 /*
 51 *移除Chrome57的底部边框-
 52 *在Chrome、Edge、IE、Opera和Safari中添加正确的文本装饰。
 53 */
 54 abbr[title]{
 55     border-bottom:none;
 56     text-decoration:underline;
 57     text-decoration:underline dotted;
 58 }
 59 
 60 /*在Chrome、Edge和Safari中添加正确的字体粗细。*/
 61 b,strong {
 62   font-weight: bolder;
 63 }
 64 
 65 /*
 66 *更正所有浏览器中字体大小的继承和缩放。
 67 *在所有浏览器中更正奇数‘em‘字体大小。
 68 */
 69 code,kbd,samp{
 70     font-family:monospace,monospace;
 71     font-size:1em;
 72 }
 73 
 74 /*在所有浏览器中添加正确的字体大小。*/
 75 small{
 76     font-size:80%;
 77 }
 78 
 79 /**
 80 *防止“sub”和“sup”元素影响
 81 *所有浏览器。
 82 */
 83 sub,sup{
 84     font-size:75%;
 85     line-height:0;
 86     position:relative;
 87     vertical-align:baseline;
 88 }
 89 sub{
 90     bottom:-0.25em;
 91 }
 92 sup{
 93     top:-0.5em;
 94 }
 95 
 96 /*嵌入内容*/
 97 /*========================================================================== */
 98 
 99 /*删除IE 10中链接内的图像边框。*/
100 img{
101     border-style:none;
102 }
103 
104 /*表格*/
105 /*========================================================================== */
106 
107 /*
108 *在所有浏览器中更改字体样式。
109 *删除Firefox和Safari中的边距。
110 */
111 button,input,optgroup,select,textarea{
112     font-family:inherit;
113     font-size:100%;
114     line-height:1.15;
115     margin:0;
116 }
117 
118 /*
119 *在IE中显示溢出。
120 *显示边缘溢出。
121 */
122 button,input{
123     overflow:visible;
124 }
125 
126 /*
127 *删除Edge、Firefox和IE中文本转换的继承。
128 *删除Firefox中文本转换的继承。
129 */
130 button,select{
131     text-transform:none;
132 }
133 
134 /*更正在iOS和Safari中无法设置可单击类型的样式。*/
135 button,[type="button"],[type="reset"],[type="submit"]{
136     -webkit-appearance:button;
137 }
138 
139 /*删除Firefox中的内边框和填充。*/
140 button:-moz-focus-inner,
141 [type="button"]::-moz-focus-inner,
142 [type="reset"]::-moz-focus-inner,
143 [type="submit"]::-moz-focus-inner{
144     border-style:none;
145     padding:0;
146 }
147 
148 /*恢复先前规则未设置的焦点样式。*/4
149 button:-moz-focusring,
150 [type="button"]:-moz-focusring,
151 [type="reset"]:-moz-focusring,
152 [type="submit"]:-moz-focusring{
153     outline:1px dotted ButtonText;
154 }
155 
156 /*更正Firefox中的填充。*/
157 fieldset{
158     padding:0.35em 0.75em 0.625em;
159 }
160 /*
161 *更正边缘和IE中的文字环绕。
162 *更正IE中“fieldset”元素的颜色继承。
163 *去掉填充，这样开发人员在归零时不会被发现
164 *所有浏览器中的`fieldset`元素。
165 */
166 legend{
167     box-sizing:border-box;
168     display:table;
169     max-width:100%;
170     white-space:normal;
171     color:inherit;
172     padding:0;
173 }
174 /*在Chrome、Firefox和Opera中添加正确的垂直对齐方式。*/
175 progress{
176     vertical-align:baseline;
177 }
178 
179 /*删除IE 10+中默认的垂直滚动条。*/
180 textarea{
181     overflow:auto;
182 }
183 
184 /*更正Chrome中递增和递减按钮的光标样式。*/
185 [type="number"]::-webkit-inner-spin-button,
186 [type="number"]::-webkit-outer-spin-button{
187     height:auto;
188 }
189 
190 /*
191 *纠正Chrome和Safari中的奇怪外观。
192 *更正Safari中的轮廓样式。
193 */
194 [type="search"]{
195     -webkit-appearance:textfield;
196     outline-offset:-2px;
197 }
198 
199 /*删除macOS上Chrome和Safari中的内部填充。*/
200 [type="search"]::-webkit-search-decoration{
201     -webkit-appearance:none;
202 }
203 
204 /*
205 *更正在iOS和Safari中无法设置可单击类型的样式。
206 *在Safari中将字体属性更改为“inherit”。
207 */
208 ::-webkit-file-upload-button{
209     -webkit-appearance:button;
210     font:inherit;
211 }
212 
213 /*交互式*/
214 /*========================================================================== */
215 
216 /*在Edge、IE 10+和Firefox中添加正确的显示。*/
217 detalis{
218     display:block;
219 }
220 
221 /*在所有浏览器中添加正确的显示。*/
222 summary{
223     display:list-item;
224 }
225 
226 /*移动*/
227 /*========================================================================== */
228 
229 /*在IE 10+中添加正确的显示*/
230 template{
231     display:none;
232 }
233 
234 /*在IE 10中添加正确的显示*/
235 [hidden]{
236     display:none;
237 }