使用单独的重置样式表的奇怪行为

编程入门 行业动态 更新时间:2024-10-24 20:11:50
本文介绍了使用单独的重置样式表的奇怪行为的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

限时送ChatGPT账号..

我正在使用这个

为什么会发生这种情况?对我来说,它应该以同样的方式表现.代码完全一样,唯一不同的是一个是外部样式表,另一个是写在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/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屋!

更多推荐

[db:关键词]

本文发布于:2023-04-26 12:26:11,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1135413.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:样式表   奇怪

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!