html – 流体CSS布局和边框

html – 流体CSS布局和边框,第1张

概述在设计流体布局时,如何使用边框而不会破坏布局. 更具体地说,我有一个由五个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布局和边框所遇到的程序开发问题。

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1091342.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-27
下一篇 2022-05-27

发表评论

登录后才能评论

评论列表(0条)

保存