CSS样式盒子他的宽度,css盒子高度怎么算

符合css规范的盒子模型的总宽度和总高度的计算原则是什么

总宽度 = 宽度（width:内容区宽度）+ pdding + border

css3新增box-sizing属性。当box-sizing设置为border-box时，

总宽度 = 宽度（width）= 内容区宽度 + padding + border 。

box-sizing默认取值：centent-box，盒标准与CSS2中的一致。

相关问答

Q1: css设置一个盒子宽度width: 400%什么意思

意思就是设置成他父元素宽度的400%。

如果是这样并且你希望这个width：400%的元素可以完全显示，最好再加一句，overflow-x:scroll，意思就是长度不够，使用横向滚动条。

Q2: 请简述 css 盒子模型与css怪异盒模型

1、盒模型与怪异模型的设置

当设置为box-sizing:content-box时，将采用标准模式解析计算（默认模式）；

当设置为box-sizing:border-box时，将采用怪异模式解析计算；

2、盒模型

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），

元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分，

这就是盒子模型。

在标准模式下的盒模型如下图所示，盒子总宽度/高度=width/height+padding+border+margin

3、怪异盒模型

在怪异模式下，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

Q3: 介绍一下标准的css的盒子模型？与低版本ie的盒子模型有什么不同的

标准的css盒子模型：他的宽度=内容的宽度+边框的宽度+加上内边具的宽度

比如：.box{width:100px;border:10px solid #ccc;padding:10px}

那么标准的css盒子模型中的box这个的总的宽度就是140px=100+10+10+10+10；

但是低版本ie的盒子模型box的宽度还是100px，

Q4: css盒子变宽默认是向右延伸，怎么让盒子变宽时左右变宽

这个简单，首先把盒子居中，margin：0 auto；

给他设置百分比的宽，width：90%；

这样不管浏览器窗口怎么改变大小都不会影响

Q5: css盒子模型中盒子的高度和宽度是否包含margin的

第二个是正确的

上图~

width:628px;height:24px;

实线是盒子的尺寸 包括 border-width padding width/height

margin是盒子外边距