html – 流体CSS布局和边框

概述在设计流体布局时,如何使用边框而不会破坏布局. 更具体地说,我有一个由五个div组成的HTML小部件.我想要五个div占用包含元素中的所有房间.我也想围绕每个1px边框. 我试过了： .box {float：left;身高：100％;宽度：100％;边框：1px纯红色; } 这不起作用：宽度会增加10px,导致盒子被包装.减少宽度百分比不起作用,因为它不会占用正确的空间量,而对于某些页面大小,仍然 在设计流体布局时,如何使用边框而不会破坏布局.

更具体地说,我有一个由五个div组成的HTML小部件.我想要五个div占用包含元素中的所有房间.我也想围绕每个1px边框.

我试过了：
.Box {float：left;身高：100％;宽度：100％;边框：1px纯红色; }
这不起作用：宽度会增加10px,导致盒子被包装.减少宽度百分比不起作用,因为它不会占用正确的空间量,而对于某些页面大小,仍然会包装.

管理这些元素之间的相互作用的正确方法是什么？

解决方法 见 this article.

基本上,在“传统”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占用所有的宽度的包含元素,而不包裹.

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

总结

以上是内存溢出为你收集整理的html – 流体CSS布局和边框全部内容，希望文章能够帮你解决html – 流体CSS布局和边框所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。