1.content-box:宽和高只是内容部分,不包含padding和border
2.border-box:box的宽和高包含padding和border
3.inherit:继承自父级
二、demo
<style type="text/css">
.box1,.box2{
width: 100px
height: 100px
border:20px solid red
padding:20px
float: left
margin-right: 50px
}
.box1{
box-sizing: content-box
}
.box2{box-sizing: border-box}
</style>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
效果图:
![RCT223]26@56_K91HECU_0D.png]( https://upload-images.jianshu.io/upload_images/6955119-520e1f66f0c68568.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 )
2个层都有浮动应该不是IE63px问题...是不是里头的元素的原因呢~如果你布局要求不是很严格的话~你就把middle的宽度设大点点吧~~你要实现的布局可以这样写~
<div id="middle">
<div id="main"></div>
<div id="sidebar1"></div>
</div>
<div id="sidebar2"></div>
将它们都float:left就可以了~
主要要清理浮动~以免影响布局