Html 使用CSS圆角将页眉延伸到页面顶部_Html_Css

Html 使用CSS圆角将页眉延伸到页面顶部

html css

Html 使用CSS圆角将页眉延伸到页面顶部,html,css,Html,Css,我有一个用圆角包装的网页。包装器中的第一件事是页眉，但在页眉上方有一个空白区域，即角落所在的位置。我希望蓝色标题从包装的顶部开始，因此顶部没有空白。我不知道这是否可能，但任何帮助都将不胜感激！这是（简化的）代码。我用内联CSS发布了这篇文章 HTML <div id="wrapper"> <div id="header"> <h1>Test Page</h1> </div> <!--he

我有一个用圆角包装的网页。包装器中的第一件事是页眉，但在页眉上方有一个空白区域，即角落所在的位置。我希望蓝色标题从包装的顶部开始，因此顶部没有空白。我不知道这是否可能，但任何帮助都将不胜感激！这是（简化的）代码。我用内联CSS发布了这篇文章

HTML

<div id="wrapper">
    <div id="header">
         <h1>Test Page</h1>

    </div>
    <!--header-->
    <div id="nav"> <a href="index.html">Home</a>  <a href="index.html">Link 1</a>  <a href="index.html">Link 2</a>  <a href="index.html">Link 3</a>  <a href="index.html">Link 4</a>

    </div>
    <!--nav-->
    <div id="main">
        <p>This is the test page.</p>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
    </div>
    <!--main-->
</div>
<!--wrapper-->

小提琴>

这将帮助您：

*{
  margin:0;
  padding:0;
}

默认情况下，包括body在内的多个元素上都有边距和填充，因此您可以看到其中的空格，使用all selector（*）将边距和填充值设置为0将删除边距和填充值，或者说文档中没有空格。

您需要添加

页边距顶部：0到该h1
样式，因为它正在强制它
然后，您需要添加
border-top-left-radius:25px;
border-top-right-radius:25px;

至#标题

或者，添加溢出：隐藏改为#包装器
。作为
如果您试图完美地匹配彼此顶部的圆角，某些浏览器将绘制底层元素的一小部分（渲染并不完美）
旁注：如果设置为0
，则不需要向某个对象添加px
。例如，您可以只使用页边距顶部：0，而不是页边距顶部：0px
将此添加到代码中
* {
  padding: 0;
  margin: 0;
}

并添加到你的包装溢出：隐藏第1期>围绕“包装”的页边距
由于“”中的默认页边距，您将获得“包装器”周围的页边距
您只需从“
”中删除默认边距和填充
第2期>蓝色标题上方的边距
添加页边距顶部：0px因为它采用了

问题3>从H1中删除边距时，半径被删除
添加溢出：隐藏
到“#wrapper”，因此
和标题保持在wrapper内，并且不会否决样式
以下是添加的最终修复：
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #999999;
    margin:0 auto; /*FIX ADDED*/
    padding:0; /*FIX ADDED*/
}
h1 {
    line-height: 200%;
    margin-bottom: 0px;
    margin-top: 0px; /*FIX ADDED*/
}
    


 #wrapper {
    background-color: #FFFFFF;
    min-width: 760px;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #a1a1a1;
    border-radius: 25px;
    overflow:hidden;  /*FIX ADDED*/
}

这是工作小提琴>
**抱歉，未能添加标题上方空格的修复
#header h1
{
    background-color: #40ebff;
    color: #FFFFFF;
    padding-left: 5px;
    margin:0;
    border-top-left-radius:25px;
    border-top-right-radius:25px;
}

正如所建议的，您将从一个简单的解决方案中获益。默认情况下，浏览器会向某些元素添加某些填充和页边距——通过显式否定，您可以定义自己的填充和页边距。另一个优点是，由于不同浏览器的“默认值”可能不同，因此您可以获得更一致的结果
重置很简单。将以下内容添加到CSS的顶部：
* {
margin:0;
padding:0;
}

并添加一些更改，使您的页面符合预期。首先，我们将把边距：10px
（根据需要调整）添加到#wrapper
（这样，您的圆角框就变成了以前的样子，而不是撞到页面顶部）。接下来，将overflow:hidden
添加到#wrapper
中。由于#标题
没有圆角，它通常会使方形角从#包装
中溢出，但溢出：隐藏
会阻止这种情况
这是一本书
请注意，如果不想重置，则不需要使用CSS重置。如果愿意，您可以在h1
选择器中添加一个margintop:0
。在这种情况下，您不需要将边距添加到#wrapper
，但仍然需要设置溢出：隐藏。这是该版本的一个示例。
请在JSfiddle.net示例中演示。演示：谢谢，但我仍然希望页面顶部有圆角。将边距和边距设置为0将删除它们。@user3507530如果是这种情况，您应该在fiddle中发布代码，我们可以找到其中的错误。然后您应该将边距或边距应用于特定元素，就像您需要管理h1一样……我不够懒：）可能是因为fiddle没有按照OP的要求执行，将蓝色标题移动到顶部。你的小提琴仍然在蓝色标题上方显示空白。是的，我最初没有读标题问题！谢谢你指出！这太完美了！我不认为在添加页眉边距顶部后，我也需要在页眉中添加边框：0；到h1，但它现在有完美的意义！！很高兴我能帮忙@user3507530i建议隐藏#wrapper
的溢出，而不是在#header中添加半径，因为如果您试图完美匹配彼此顶部的圆角，某些浏览器将绘制底层元素的一小部分（渲染并不完美）。我同意“Woodrow Barlow”，将半径赋予不同的标记只是为了获得相同的样式并不是一个好的做法，相反，您应该将溢出属性赋予父div。Updated@WoodrowBarlow，感谢您提供的信息！
* {
margin:0;
padding:0;
}