为什么相同的 html 和 css 显示不同？答案

【问题标题】：Why same html and css is showing differently?为什么相同的 html 和 css 显示不同？
【发布时间】：2022-01-26 01:14:24
【问题描述】：

我正在学习网络技术。我试图通过关注 youtube 视频来建立一个投资组合网站。以下代码是索引页面的html和css代码。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nilavro Seal - Developer, Programmer, ML Enthasiast</title>
    <link rel="stylesheet" href="../Portfolio/style.css">
</head>

<body>
    <div class="container">
        <div class="sidebar">
            <!-- Nilavro -->
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="../Portfolio/intro.html">My Intro</a></li>
                    <li><a href="../Portfolio/services.html">Services</a></li>
                    <li><a href="../Portfolio/blog.html">Blog</a></li>
                    <li><a href="../Portfolio/contact.html">Contact Me</a></li>

                </ul>
            </nav>
        </div>

        <div class="main">
            <div class="infoContainer">
                <div class="devInfo">
                    <div class="hello">Hi I am </div>
                    <div class="name">Nilavro Seal</div>
                    <div class="about">Developer,Programmer, ML Enthasiast</div>
                    <div class="moreabout">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed esse officiis
                        molestiae ipsa quibusdam vero.</div>
                    <div class="buttons">
                        <button>Download CV</button>
                        <button>Contact Me</button>
                    </div>
                </div>
                <div class="devPic"><img src="dev.png" alt="Developer"></div>
            </div>
        </div>
    </div>

</body>

</html>

和 CSS

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Source+Code+Pro:wght@300&display=swap');

* {
    margin: 0;
    padding: 0;
}

.sidebar {
    background-color: rgb(197, 197, 197);
    width: 434px;
    font-family: 'Fira Sans', sans-serif;
    height: 100vh;
}

.sidebar nav {
    padding: 45px;
}

.sidebar nav li {
    list-style: none;
    font-size: 30px;
    padding: 33px 0;
}

.sidebar nav li a{
    text-decoration: none;
    color: black;
}

.main {
    background-color: yellow;
    width: 90vw;
}

.container {
    display: flex;
}

.infoContainer {
    background-color: orange;
    height: 58vh;
    width: 80vw;
    margin: 150px auto;
    display: flex;
    justify-content: space-around;
}

.devPic img {
    height: 58vh;
}

.devInfo {
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-family: 'Source Code Pro', monospace;
}

.hello {
    font-size: 65px;
}

.name {
    font-size: 50px;
    font-weight: bold;
    font-family: 'Fira Sans', sans-serif;
}

.about {
    font-size: 40px;
}


.buttons {
    margin-top: 34px;
}

.buttons button {
    padding: 9px 14px;
    border-radius: 22px;
    color: white;
    background-color: cornflowerblue;
    font-weight: bold;
    font-size: 23px;
    margin: 0 p px;
    cursor: pointer;
}

.buttons button:hover{
    color: cornflowerblue;
    background-color: white;
}

.moreabout {
    font-size: 22px;
    font-family: 'Fira Sans', sans-serif;
    margin-top: 23px;
}

然后我复制该代码并创建另一个名为 Contact.html 的 html 页面。但该页面显示的差别不大。

我还附上了这两个页面的不同之处。谁能说出为什么会发生这种奇怪的事情？？

【问题讨论】：

标签： html css browser web-technologies

【解决方案1】：

这是您作为 Web 开发人员经常会遇到的问题。

为什么会这样？

浏览器提供默认的 CSS 文件。因此，例如，如果您编写一个没有导入任何 CSS 的 HTML 文件并在浏览器中打开它，您将看到您的 <h1> 文本大于您的 <h2> 文本。此外，如果您在不同的浏览器中打开此 HTML 文件，您将看到默认 CSS 文件的不同之处：字体可能不同，大小也可能不同。

如何解决？

为确保您的网站在所有浏览器上看起来都一样，您可以使用 CSS normalizer，例如：https://necolas.github.io/normalize.css/ 或本文中的：https://medium.com/awesome-css/resetting-browsers-default-css-46ef8d71a42d 或搜索 CSS normalizer。

【讨论】：