解决你对CSS布局宽度的一点困惑
现在互联网上关于DIV+CSS的文章铺天盖地都是，我也会去看，但是相信你看了这片文章会解决“菜鸟”或者说现在还想入门者的一个困惑。
原理图大家都见过，但是可能刚学习的人总是不知道为什么布局起来不会和长期接触TABLE的感觉一样顺手？
用TALBE的都知道，精确计算宽度，然后给TABLE一个宽度就是自己想要的，但是到了CSS就有点不一样了，起码不和自己想象的一样。给了确定的宽度，但是总是会超出来，表现就是拐到下面去了，有点摸索精神的人就知道了把想要的宽度改小一点它[DIV]就到你想要的地方了，下面我来解释一下为什么。
举一个例子，如果我们想整个的页面宽度是760PX。
一、用TABLE，就是老实地给TABLE 760PX的宽度就好了；
二、用DIV+CSS 写一个定义的样式：
.content1 {
margin:0;
padding:0;
border:0;
width:760px;
} //可以
.content2 {
margin:10px;
padding:0;
border:0;
width:740px;
} //行
.content3 {
margin:10px;
padding:10px;
border:0;
width:720px;
} //有效
.content4 {
margin:10px;
padding:10px;
border:1px solid #000;
width:718px;
} //同样正确
上面的四个方式做出来后 截图拿PS量一下 宽度绝对都是760px，仔细看看宽度的值却大不一样，再细细想想，求求和什么的，就明白了，原来DIV+CSS把margin,padding,border的宽度要全部算上才算是真正显示的宽度，这只是一个层，可能感觉不到意义有多大，想想你在760px分成三列布局的时候总是弄不好位置就应该知道问题出在哪了，时间关系就不举例说三列的拉。
如果：
1、你还不知道margin:10px;是表示上下左右四个方向也就是为什么在.content4里是要10*2+10*2+2*2+718=760那说明你还有很多文章要看。
2、你是高手 早就知道了是怎么回事，也不要骂我，文章的标题就是也许能解决一部分人的困惑，你不是这部分人。
3、从来都是用什么都是0，也就是.content1的方法的人，那你太幸运了，到现在还觉得DIV的宽度是和TABLE的一样的，
4、有点收获。
可能我是孤陋寡闻，反正我是没看到在精确确定宽度时这些值要加起来算的文章。我会继续写我的体会！
Categorys