css盒子模型

盒子模型就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。

标准的盒子模型

IE盒子模型


区别：从上图中可以看到区别为width包含的范围不同；
在标准的盒子模型中，width指content部分的宽度；
在IE盒子模型中，width表示content+padding+border这三个部分的宽度。

CSS3中引入了box-sizing属性:
box-sizing:content-box; 表示标准的盒子模型;
box-sizing:border-box; 表示的是IE盒子模型
box-sizing:padding-box; 这个属性值的宽度包含了左右padding+width

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

推荐阅读更多精彩内容

  • 从CSS盒子模型说起
    前言 总括： 对于盒子模型，BFC，IFC和外边距合并等概念和问题的总结 原文地址：从CSS盒子模型说起 知乎专栏...
    秦至阅读 784评论 0赞 3
  • CSS 盒子模型（CSS重点）
    其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通...
    王玉伟的伟阅读 1,143评论 0赞 2
  • css 盒子模型
    作为一枚前端开发工程师，首先一定要清楚盒子模型是什么，因为盒子模型是html+css中最核心的基础知识，理解了这个...
    喵媛阅读 720评论 4赞 5
  • css盒子模型的深入理解，在块级、行内元素的区别和特性
    盒子模型用于处理元素的内容、内边距、边框和外边距的方式简称。元素框的最内部分是实际的内容，直接包围内容的是内边距。...
    Be_somebody阅读 1,160评论 0赞 0
  • Css 盒子模型
    1.那什么是盒模型呢？ 简单的理解为，你可以把每个html标签当成一个小方块，然后这个小方块又包着几个小方块，如同...
    一只煮熟了的鸭子阅读 309评论 0赞 0