使用单独的重置样式表的奇怪行为 [英] Weird behavior using a separated reset stylesheet
问题描述
我正在使用这个
为什么会发生这种情况?对我来说，它应该以同样的方式表现.代码完全一样，唯一不同的是一个是外部样式表，另一个是写在style.css里面的reset.css的代码.我只是复制和粘贴，我不认为我犯了任何错误.那么使用一个样式表而不是两个样式表有什么不同吗?
解决方案很简单，我应该在styles.css之前插入reset.css.
I'm using this reset code, and the layout doesn't work as expected, when I use it as an external stylesheet instead of using only one stylesheet. In this way, I'm using only one stylesheet called styles.css
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSS/styles.css">
<link rel="stylesheet" href="CSS/reset.css">
</head>
<body>
<header>
<div>1 </div>
<div> 2</div>
</header>
</html>
CSS
header {
display: flex;
justify-content: space-between;
}
The external stylesheet (I wrote exactly as I typed here):
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
The behavior:
So why is this happening? For me it should behave in the same way. The codes are exactly the same, the only difference is one is an external stylesheet and the other is the code of the reset.css written inside of the style.css. I'm just copying and paste, I don't think I made any mistake. So are there any different using one stylesheet instead than two?
The solution is quite simple, I should have inserted the reset.css before the styles.css.
这篇关于使用单独的重置样式表的奇怪行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
