Question

我是一名新手。我只是用以下代码绘制一个基本的HTML页面：

<html>
  <head>
    <title>Hey</title>
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <header class="top-menu"></header>
    <div class="container">
      <div class="left-side"></div>
      <div class="main-content"></div>
    </div>
    <div class="foot"></div>
  </body>
</html>

这是style.css：

.top-menu{
    position: fixed;
    top: 0;
    left: 70px;
    right: 70px;
    height: 50px;
    background-color: #000000;
}
.container{
    margin: 70px 70px 20px 70px;
    display: inline-block;
    width: 91%;
}

.left-side {
    width: 30ex;
    min-height: 30ex;
    float: left;
    background-color: blue;
}
.main-content {
    width: 80ex;
    float: right;
    background-color: red;
    min-height: 100ex;
}
.foot {
    background-color: green;
    height: 5ex;
    width: 91%;
    margin-left: 10ex;
}

目的很简单。但是css看起来有些问题。我想问一些问题：

1.容器的左右边距为70px，与顶级菜单相同，但从chrome页面视图看，为什么不对齐？

2.当我将'容器'的宽度设置为100％（与脚部相同）时，为什么会出现水平滚动条？

3.如果我没有将容器的显示设置为“内联阻挡”，为什么脚部会飞向空中？（甚至我把它设置为'阻止'）

4.你们可以给我一个更好的CSS样式代码吗？

Answer 1

据我所知，您更喜欢使用CSS3和最新的html标准，但许多浏览器供应商尚未采用<header>标记。我会偏离使用它。 IE9是第一个采用它的IE，IE6 / 7上还有很多用户。

取出<header>并替换为普通<div class="header">...</div>，然后使用css .header { }进行引用。

要回答＃2 - 您无法陈述width: 100%;然后添加左/右边距而不期望水平滚动条。原则上，容器将超过100％。

我不确定您为什么要将display: inline-block;添加到容器div中。只有内联元素才能拥有此声明（即文本元素）。有这么一个具体原因吗？

此外，当您第一次创建html模板并进行测试时，请确保始终将内容添加到div中，而不是简单地将其留空。添加min-height: ...不是一个万无一失的系统。我总是添加假文本 - “你好你好”就足够了。

最后，添加适当的html doctype。也许你为问题部分修剪了它，但这是xhtml还是html？这与<header>的使用有关。并非所有doctypes都支持<header。

Answer 2

2.当我将'容器'的宽度设置为100％（与脚部相同）时，为什么会出现水平滚动条？

因为，你有一个余量使总宽度超过100％。

Answer 3

除了已经说过的内容之外，您是否尝试使用铬检查员来解决这些问题？只需将鼠标指向页面，右键单击并选择Inspect Element即可。在那里，您可以启用/禁用一些CSS属性，并快速找出问题所在。对于Firefox，相当于http://getfirebug.com/

至于你的布局问题：别担心，这对我们所有人来说都是一个真正的痛苦。如果你的观点不是要真正学习css，如果你想要的是让它一劳永逸地工作，我的建议是：使用带有网格的CSS框架。

CSS框架通常有一个简洁的功能，我们称之为“网格”。它允许您在5分钟内设置与您相同的布局，并且不再担心此div在此浏览器或浏览器中如何浮动。

另外：这取决于你想要使用的网站，但通常当你使用网格时，你所做的性感魔术看起来不那么业余。（如果你有设计师背景，也许你已经知道了这一点）

从一个简单的框架开始。每个人都有它的最爱，但我可以推荐BluePrint开始。以下是grid system super powers;）

的小型演示

如何优化这个css代码？

3 个答案: