Question

DIV布局，width包含border值还是不包含？

学习DIV布局，CSS样式中，为什么head中的border值是外边框（蓝色外面的红色）？test中的border值却是是内边框（灰色内部的绿色）？

Answer 1

width是不包含border的div默认border为0 所以布局时没有border属性就不用计算，一旦增加border属性 如：border:1px #000 solid;布局时就要高减2 宽减2 样式才会不变

Answer 2

border不占用div的宽度，但会增加容器的宽度，比如一个100px的div，如果边框为1PX那么这个容器的实际大小应该为102PX，从上图可以看出你的外部DIV应该是没有问题的，内部的DIV正常应当是紧贴着外部边框的，但你的这个没有明显的出现了距离，那么只能说明在你的head中有一个PADDING:10px的属性或者在text中有一个margin:10px属性，人为的将内部的div缩小了

追问

可能真的是margin的值影响了显示！还可能是IE8．0不兼容的问题导致！谢谢你！

追答

不客气，觉的说的对采纳一下谢谢

Answer 3

background=背景色，border=边框颜色，你head中border：10px solid red，就是边框宽度为10像素，线条为solid，颜色为红色，没问题啊，背景颜色也是蓝色啊，至于第二个test也是正确显示的，背景颜色为灰色，border边框为绿色

追问

我不是说颜色，我是说怎么给test加了border值10px，却显示的是10px的内边框？

追答

应该是浏览器的原因吧，我用火狐，谷歌，360，IE11，测试没问题，都是显示的外边框，用颜色最好用#（颜色值）或者rgba颜色，不要用英文颜色值，不过也不是不行，推荐还是用我的那种，，，对了，还不知道你那个test是个什么元素，如果不是div什么的，建议加一个display:block这样的属性，转化为块级元素-------还有啊，如果想学前端，方便调试页面的兼容：必备两个浏览器（火狐和谷歌）360和IE只作为开发完成浏览用，IE最好升级到IE11或者IE10，个人感觉IE10和11没什么差别，一般的样式对IE9以上的版本没什么问题，IE7和IE8有一定不用

追问

嗯～我现在就在学习HTML和CSS样式！用的浏览器是IE8.0 ，经常出现不兼容把我整的莫名其妙脑壳大，待会儿就把它升级了，再下个火狐！你说的颜色用RGB表示也很有道理，因为我不知道颜色的RGB所以用英文代替，这也可能导致不兼容，谢谢提醒！test不是什么元素，只是我临时起的名字！

Answer 4

额，，，比如.top这个类，宽度是960，那么你设置width:960px，这个时候，你给这个.top加了四周的边框都是5，也就是border:5px solid red;，那么这个时候，.top这个类的整体宽度就变成了970个像素了，你因该在原来960个像素上，减去左右边框，也就是10

Answer 5

你在w3c看下盒子模型的原理吧 ，一般width里面都包含pad。mag。与bor的值，要适当的减去