Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

盒子的内部边框与外部边框

  在正常模式下使用border属性给元素加边框时边框都在盒子的外部(低版本IE的Quirks模式下border在盒子内部),这意味着盒子的大小会因为边框而变化。在设计布局时需要考虑边框的宽度,带来一堆麻烦的计算。为何不试试把边框放入盒子内部呢?
  border属性上并没有用于指定边框位置的参数,边框会依照盒子自身的性质来计算。而普通的盒子默认是内容盒子(content box),也就是说盒子的内部只有内容部分。paddingborder都在外部,会影响整个盒子的大小,但不会影响该盒子生成的含纳块(containing block)的大小。我们可以通过box-sizing属性来让盒子成为一个padding-boxborder-box,这样就可以把paddingborder产生的宽度放入盒子的内部计算。
<style>
div {
  border:10px solid #CCC;
  padding:10px;margin:10px;
  width:60px;height:60px;
  float:left;
}
.border-box {
  box-sizing:border-box;
  -moz-box-sizing:border-box;
}
.padding-box {
  box-sizing:padding-box;
  -moz-box-sizing:padding-box;
}
</style>
<div class="border-box"></div>
<div class="padding-box"></div>
<div></div>

  在Firefox上支持padding-box,而其它浏览器没有支持这个值,但是border-box还是支持的,甚至可以兼容到IE8。

  
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^