CSS盒模型

盒模型是CSS中一个重要的概念,一般来说,分为IE盒模型和W3C盒模型,我们只需看两张图即可。

标准盒模型

标准盒模型

IE盒模型

IE盒模型

实际上,标准与IE盒模型都是包括了margin,border,padding与content,不同点在于IE的content是包括border和padding部分。
  要计算盒子所占用的空间,对于标准盒模型来说为:
  宽:width+2×padding+2×border+2×margin
  高:height+2×padding+2×border+2×margin
  对于IE盒模型为:
  宽:width+2×margin
  高:height+2×margin

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • CSS盒模型 在CSS中盒模型被分为两种,第一种是W3C的标准模型,第二种是IE怪异盒模型。两种盒子模型都包括pa...
    _空空阅读 3,501评论 0 3
  • 一,什么是CSS盒模型? CSS盒模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。形象的来说,一张网...
    大春春阅读 991评论 0 2
  • 超悲伤,但是不知道自己在坚持什么,其实说来说去就是几千块钱的问题,又不止这些。试问自己,是被欲望与虚荣束缚住了,还...
    ccccj阅读 115评论 0 0
  • OnTheRoad8阅读 185评论 0 0