CSS盒模型

盒模型主要分析块级元素,对应CSS属性box-sizing。盒模型分为两种:

  • W3C标准模型
  • IE标准模型

怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”,怪异模式主要表现在IE内核的浏览器。

当不对doctype进行定义时,会触发怪异模式。

W3C标准模型

一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

IE标准模型

一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)

box-sizing: content-box

此时采用W3C标准模型进行计算

box-sizing: border-box

此时采用IE标准模型进行计算

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 盒模型 盒模型的特点: 每个盒子都有:边界、边框、填充、内容四个属性;每个属性都包括四个部分:上、右、下、左;这四...
    xiaolizhenzhen阅读 5,072评论 0 0
  • 课程目标 掌握盒模型相关知识点 了解IE盒模型和W3C 盒模型区别 学习建议 视频未覆盖的知识点会提供详细的文档资...
    饥人谷_江君阅读 3,707评论 0 3
  • 盒子模型是CSS中一个重要的概念,理解了盒子模型才能更好的排版和布局。盒子模型有两种,分别是 IE 盒子模型和标准...
    sakatayui酱阅读 1,436评论 0 0
  • 1.盒模型简介 <li>W3C组织建议把所有的网页上的对象都放在一个盒子中(在定义盒子宽高的时候,要考虑到内填充,...
    26d608950683阅读 4,110评论 0 0