Question

我非常不熟悉CSS和HTML，这是我在课堂之外的第二个合适的网站。据我所知，我的风格很不合常规，因为我更喜欢使用网格，而不是根据对象的位置固定对象。因此，结果我在使网格框完全适合屏幕时遇到了问题，以便网格的颜色可以利用整个屏幕。

我尝试使用100vh / vw和100％。不知道考虑在网上能找到的有限信息还有什么尝试

.ttl {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "g1";
    height: 100vh;
    width: 100%;
    background-color: #FC7146;
    justify-self: center;
}

.title {
    grid-area: g1;
    justify-self: center;
    align-self: center;
    text-align: center;
    color: white;
    z-index: 1;
    font-family: 'MyWebFont', Fallback, sans-serif;
    font-variant: small-caps;
    letter-spacing: 7px;
    font-size: 100px;
}

我只是想确保颜色适合当前的整个屏幕，而不是当前的颜色。

Answer 1

在加载CSS之前，浏览器会在每个文档上应用一些预定义的样式。这称为浏览器样式表。它包括样式按钮的规则，h1-h6和p元素的默认边距和字体大小等。

浏览器样式表的body元素上可能包含边距或填充。就是这种情况。

只需添加

String.format()

您还可以使用Normalize.css之类的插件来使CSS在多个浏览器中看起来相似。 https://necolas.github.io/normalize.css/

如何解决网格不完全适合屏幕的问题？

1 个答案: