前言

我们知道HTML元素可以分为两类：

区别如下：

元素分类	是否默认独占一行	设置宽高是否有效
块级元素	是	是
内联元素	否	否

总结一下就是

而块级元素常用的有div，p标签，内联元素有span，a，img等

以上就是HTML关于元素分类的描述，下面会用实例来展示这两种元素针对width，height的特点

实例展示

1

小P

这里可以看到，小P元素是独占页面一整行的，并且其width宽度撑满整个父元素的宽度为1350，而内联元素小S的宽度仅为500.17，且其右下角的盒模型体现出来的width为auto，即表示其内容有多少，其内联元素的width就是多少

小S

小S2

页面呈现：

小S2页面呈现

可以发现小S2身为内联元素，其直接和小S显示在了一行，其width宽度也是auto，随小S2自身内容的伸缩而变化

我试着给小P以及小S，小S2各自设置一个具体的width属性，在看看他们各自的表现如何

小P

小P设置width

发现小P设置width为200px以后，确实生效了

小S，小S2

这里可以看到小S和小S2的实际宽度没有发生任何变化，width属性设置了200px并没有生效（虽然右下角的盒子模型的width属性值确实被设置成了200px），这就是内联元素设置width不生效的情况

内联元素的宽度由其自身内容决定，指定的width属性不生效

页面上的每一个元素包括内联元素，都可以看作是一个盒子，也即盒子模型

盒子模型

截图来自Chrome浏览器

盒子模型由四个组成部分，分为content，padding，border，margin，其顺序由内而外

box-sizing属性主要分为以下几种：

content-box（浏览器默认的计算方式）
当box-sizing属性设置为content-box时，表示我们给元素设置的width属性只是该元素的和模型最内层的content的宽度，至于该元素最终在页面上的宽度表现等于： width + (padding * 2)
border-box
当box-sizing属性设置为border-box时，表示我们给元素设置的width属性等于整个盒子模型的border的大小，即你再怎么设置该元素的padding值，也不会改变该元素在页面上的实际宽度，如果你将padding值变化了，那么为了保持整个盒子的boder宽度不变，只能动态调整盒子的content值宽度来保证整个盒子的宽度为我们设置的width值

不同的浏览器厂商针对这里的实际元素的box-sizing计算方式却是不一样的

所以，为了避免同一份 CSS样式在不同浏览器下表现不一致，最好做一下有关盒子模型计算size（box-sizing）的统一规定处理