标准盒模型 + ie怪异盒模型

一、基本概念

什么是盒模型：盒模型包括内容（content）、外边距（margin）、边框（border）、内边距（padding）

Chrome盒模型

二、标准模型与IE模型区别

两者宽度不一样
标准模型宽度


IE模型

width= border+padding+content 没有margin


标准模型宽度

width = content 没有padding、border、margin
两者的高度计算一样

三、盒模型切换

css3新属性

    box-sizing: border-box;ie模式
border-box

计算宽度 刚好等于100px

    box-sizing: border-box;标准模式
content-box

四、js获取宽高

https://segmentfault.com/a/1190000013069516

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

推荐阅读更多精彩内容

  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    love2013阅读 2,346评论 0赞 11
  • CSS 盒模型、BFC、IFC、GFC、FFC
    基本慨念 内容区域（content）是包含元素真实内容的区域。它通常包含背景、颜色或者图片等，位于内容边界的内部，...
    晴天的晴q阅读 2,236评论 0赞 0
  • CSS 盒子模型（CSS重点）
    其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通...
    王玉伟的伟阅读 1,153评论 0赞 2
  • 面的魔法史
    远古以来，潦倒的魔法学徒们就发现了小麦的一种特殊食用方法。他们驱使巨石将麦子一遍遍碾压，得到了细碎的麦粉，然后和水...
    秦三十二阅读 329评论 0赞 6
  • 地图坐标转换
    https://github.com/Zane6w/CoordinateTransformation
    冰霜海胆阅读 244评论 0赞 0