说这几个哥们啥关系？楼主刚接触盒子模型搞的一脸懵比，云里雾里的，虽然不懂，但是楼主信奉实践出真知，屁颠屁颠的跑到百度前端学院打怪怪去了，其中一个怪怪是实现下图样式布局：
楼主定睛一瞧这怪怪第一行，顿然心中大喜，小意思嘛：先一个margin：10px，再来一个width：33.33%，最后左飘飘右飘飘还不立马解决战斗？！说干就干（此处应有键盘声）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="content-type" content="text/html;charset=UTF-8"/>
<title>Sup_</title>
<styletype="text/css"/>
body,div{
margin:0px;
padding:0px;
}
div{
border:2pxsolid #999;
}
#container{
padding:10px;
width:500px;
height:500px;
}
.boxStyle{
margin:10px;
width:33.33%;
height:50px;
background:#eee;
float:left;
}
</style>
</head>
<body>
<divid=container>
<divclass="boxStyle">
</div>
<divclass="boxStyle">
</div>
<divclass="boxStyle">
</div>
</div>
</body>
<html>
提交，开浏览器，biu的一声卡！住！了！！（如图）↓
我擦，没搞定，网上一阵狂查发现下图：
呀呀呀，原来这几个哥们是一层包养一层，羞不羞啊。Width这哥们呢？就是上图的Content。Div占据的位置是Content(Width)+Padding+Border+Margin，而上段代码中光Content就占据了33.33%，再加上Padding,Border,Margin一波流，×3后能装下才怪。明白里之后，楼主开始了创造性的代码width:(500/3-10-2)px，看懂楼主的战略意图了吗？给width个式子，让计算机自己算去，哥才没功夫给你算（酷）。然……计算机不！鸟！额！哥的战斗欲瞬间拉升了一个档次，继续查资料，然后发现了一个新生角色——box-sizing。Box-sizing：框大小。使用该角色可以是width晋升为Content+Padding+Border。赶紧哪来用用，将上程序.boxStyle改成如下：
.boxStyle{
margin:10px;
width:33.33%;
height:50px;
background:#eee;
float:left;
box-sizing:border-box;
}
刷新，擦还是卡住了！仔细看看解释，原来是margin这匹夫没有算进去，如果我们把.boxStyle中的magin去掉或改为padding
看，小三完美上位！可是这不是楼主想要的风格啊！！！楼主苦恼一天，百思不得骑姐其解，扒拉扒拉人家的代码：
再加上一个div镶上个金边搞定！！我去，这法儿都能想出来！！！简单粗暴，服了服了！
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
