流畅的CSS布局和边框

4 回答

• 2

  哦，小伙子，我几乎不想提这个，但是有一种非常简单的方法可以在横条上做到这一点 . 除了最小宽度外，它不是“像素完美”，但肉眼无法辨别 .

  将容器div除以项目数 . 比方说，你有六个带有白色边框的导航项目（这对于不分为100的数字特别有用，因为它在任何情况下都不是完美的） .

  将每个左浮动子div的总宽度设置为正确的分数（使用％表示左边距或右边距或填充），使它们等于@ 100％ . 继续在子div上放一个1px的border-right . 对于右端的最后一个div，要么创建没有边框的第二个类，要么只使用style ='border：none' .

  然后，在您的最小宽度，慢慢放下每个子div的宽度，直到它们适合 .

  以下是我的旧页面中的一些代码，使用此方法获得最小宽度为960px（每边958像素和1px边框）的液体页面：

  .navitem {
  width: 16.57%;
  height: 35px;
  float: left;
  text-align: center;
  font: 1em/35px arial,sans-serif;
  border-right: 1px solid #eee;
  margin: 0 auto 0 auto;
  padding: 0;
  }
  

  我认为它实际上尽可能接近像素完美，因为你可以得到最小宽度，而在更高的宽度，虽然右手div可能比其他更宽4 px，你看不到它 . （显然，如果你需要在最右边的div上有一个右边框，这就行不通了，因为你会看到几个像素的背景 . ）

  回复于 2024-05-03T07:08:40+08:00
• 2

  这会让你相当接近，但不是100％的方式（双关语） . 要给元素100％的高度，它需要知道“100％的什么？” . 所有父元素也必须给出100％的高度，这包括正文 . 或者正如W3C所说：“如果没有明确指定包含块的高度（即，它取决于内容高度），并且该元素没有绝对定位，则该值计算为'auto' . ”正如你所看到的，我们还需要给身体“位置：绝对;”为了荣誉的高度 . 这个例子还将宽度划分为五个带边框的相等列（以及一些填充和边距只是为了好玩）：

  <style>
  body {
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute; 
  /* overflow: hidden; */
  }
  div.section {
  float: left;
  width: 19.95%;
  height: 100%;
  }
      div.column {
      height: 100%;
      border: 1px solid blue;
      margin: 1em;
      padding: 2em;
      }
  </style>
  
  <div class="section"><div class="column">one</div></div>
  <div class="section"><div class="column">two</div></div>
  <div class="section"><div class="column">three</div></div>
  <div class="section"><div class="column">four</div></div>
  <div class="section"><div class="column">five</div></div>
  

  正如您在测试时所看到的那样，我们对witdh没有任何问题 . 这是因为划分宽度的“部分”没有填充，边距或边框 . 因此，我们设置的宽度将是它们在屏幕上占据的宽度 . 现在，这在实践中并不严格 . 我实际上设置了宽度19.95％而不是预期的20％ . 问题是某些浏览器（IE for one）在累加百分比时会出现舍入错误，并且越多的细分就越大，错误就越大 .

  这种方法明显失败的地方是高度 . 与“width：auto;”不同，它会使div占用可用的水平空间，“height：auto;”只会使div与其内容一样高 . 你必须指定“身高：100％;”为了获得div来填充窗口的高度，但是当添加边距，填充和边框时，div的渲染高度变得大于视口，从而产生垂直滚动条 .

  在这里，我只能看到两个选择;要么1）接受div不完全填满窗口高度并将其高度设置为80％或2）跳过底部边框并将主体设置为“溢出：隐藏;”，这将剥离窗口的部分突出超出窗口边缘的div .

  最后，当然你也可以使用一些简单的脚本来实现你所追求的目标 . 不应该是非常复杂 - 但这是另一个标签的问题......快乐的编码！

  回复于 2024-05-03T07:08:40+08:00
• 0

  见this article .

  基本上，在"traditional" CSS框模型中，框元素的宽度仅指定框内容的宽度，不包括其边框（和填充） .

  在CSS3中，您可以切换到不同的盒子模型，如下所示：

  box-sizing: border-box;
  

  特定于浏览器的实现是：

  -moz-box-sizing: border-box; // for Mozilla
  -webkit-box-sizing: border-box; // for WebKit
  -ms-box-sizing: border-box; // for IE8
  

  这将导致框大小包括元素的边框和填充 . 所以你现在可以指定

  .box { 
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -ms-box-sizing: border-box;
     width:20%;
     border:1px solid red;
     float:left
  }
  

  并且有五个div占用包含元素的所有宽度而不包装 .

  请注意，旧版浏览器不支持此功能 . 对于这些，您必须按照此页面上的其他响应将每个框包装到第二个框中 .

  回复于 2024-05-03T07:08:40+08:00
• 16

  只将 width: 100% 放在最外面的div上，并且不要将它们或任何东西放在上面，因为他们不必担心边界会增加总大小 .

  如果你真的需要外观五个固体单像素嵌套边框，你可以做这样的事情（希望有正确的语义名称）：

  <div class="one">
      <div class="two">
          <div class="three">
          etc.
          </div>
      </div>
  </div>
  
  <style>
  .one {
      width: 100%;
  }
  .two {
      border: 1px solid red;
      padding: 1px;
      background: red;
  }
  .three {
      border: 1px solid red;
      background: white;
  }
  </style>
  

  正如你所看到的，你可以使用第二个div上的填充和背景颜色伪造第二个边框（甚至可以通过这样做来减少div的总数;只记得你不能填充最外面的div而不拧紧你的宽度） .

  回复于 2024-05-03T07:08:40+08:00