【问题标题】:My border style in CSS doesn't cover the whole body我在 CSS 中的边框样式没有覆盖整个身体
【发布时间】:2015-09-28 11:20:55
【问题描述】:

我试着把它放进去

   body{ border-style: double;}

还有

   #form{border-style: double;}

但是边框只覆盖了一部分

      <!DOCTYPE html>

      <html xmlns="http://www.w3.org/1999/xhtml">
      <head runat="server">
       <title>Checkout</title>
      <link rel="stylesheet" type="text/css" href="StyleSheet.css" />
      </head>
       <body>
      <form id="form" runat="server">
         <div>
            <img src="banner.jpg" />
             <br /><br />
             <span id ="Checkout">Checkout</span><br /><br />

边框只是围绕图像并在我放置后结帐 向左飘浮 在 CSS 中的其他 ID 之一中。如果我删除浮动,那么边框可以正常工作。

请不要记下答案,我是一名学生,我正在逐步学习。因此,我们将不胜感激。

【问题讨论】:

标签: html css border


【解决方案1】:

您面临的问题是body(和 html)没有设置高度,它将扩展以包含未浮动的元素。只要你float 内部元素,body 高度就会下降,崩溃。

您需要正确清除包含父元素(浮动元素的)上的浮动
您可以:

  • overflow:auto 设置为父DIV 元素
  • 或使用特殊类(同样在父元素上):

.clearFix:before,
.clearFix:after {
    content: " ";
    display: table;
}
.clearFix:after {
    clear: both;
}

另外,如果你想直接给body添加边框,考虑到html, body被设置为100%,为了让你可能想要添加的底部边框可见

box-sizing:border-box;

到您的body 元素。

jsBin demo of body with visible bottom border

【讨论】:

    猜你喜欢
    • 2022-01-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-07-18
    • 1970-01-01
    • 1970-01-01
    • 2013-10-18
    • 1970-01-01
    相关资源
    最近更新 更多