2.CSS布局篇之盒模型

盒子模型的概念说法有很多,个人的简单理解就是——即具备内容、填充、边框、边界这些属性的均可以看作盒子模型,无论是不是块级元素!

那么,主要的两种盒子模型:标准CSS盒子模型与IE盒子模型的区别是什么?(盗用两张图)

        标准盒子模型:元素的width或height=content的width或height;

      

       IE盒子模型:元素的width或height=content的width或height+padding*2+border*2;

      注意:这里所说的元素的width或height是指我们设置的元素的宽和高的大小!

标准盒模型与怪异盒模型相互转化:

box-sizing:border-box;//标准转怪异盒模型

box-sizing:content-box;//怪异转标准盒模型

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

推荐阅读更多精彩内容

  • 在css的发展历程中,有两种版本的盒模型,一个叫IE盒模型(又叫怪异盒模型),一个叫W3C标准盒模型,在早期的微软...
    大麦茶1024阅读 2,967评论 0 3
  • CSS三个大核心模块:盒模型 、浮动和定位,其余的都是细节。 网页布局就是把网页元素(文字,图片等)资源放入盒子里...
    组团学阅读 3,021评论 0 0
  • 说到css的盒子模型和定位相信大家一定都听说过,因为它们是css中的基础,同时也是难点,这篇文章的作用在于基础知识...
    北京大数据苏焕之阅读 3,968评论 1 1
  • 盒子模型 在HTML文档中,每个元素都会在页面上生成一个盒子。因此,HTML页面实际上就是由一堆盒子组成的。默认情...
    张中华阅读 6,273评论 0 5
  • 盒子模型的概念说法有很多,个人的简单理解就是——即具备内容、填充、边框、边界这些属性的均可以看作盒子模型,无论是不...
    双鱼九年阅读 7,514评论 0 0