前言
我们知道HTML元素可以分为两类：
块级元素
内联元素(或称之为行内元素)
区别如下：
元素分类
是否默认独占一行
设置宽高是否有效
块级元素
是
是
内联元素
否
否
总结一下就是
块级元素会默认独占一行，而内联元素们会在一行显示
块级元素可以可以设置width，height属性，而内联元素设置宽高属性无效
块级元素默认的width会撑满父元素的width，这就是所谓的水流的概念，而行内元素的width则由其自身内容或其子元素的宽度决定的
而块级元素常用的有div，p标签，内联元素有span，a，img等
以上就是HTML关于元素分类的描述，下面会用实例来展示这两种元素针对width，height的特点
实例展示
各自默认页面呈现
定义index.html文件
1
打开浏览器，调试模式下
小P
这里可以看到，小P元素是独占页面一整行的，并且其width宽度撑满整个父元素的宽度为1350，而内联元素小S的宽度仅为500.17，且其右下角的盒模型体现出来的width为auto，即表示其内容有多少，其内联元素的width就是多少
小S
此时在小S的下面再添加一个行内元素小S2，看下其在页面的表现
小S2
页面呈现：
小S2页面呈现
可以发现小S2身为内联元素，其直接和小S显示在了一行，其width宽度也是auto，随小S2自身内容的伸缩而变化
改变width？
我试着给小P以及小S，小S2各自设置一个具体的width属性，在看看他们各自的表现如何
小P设置宽度width属性为200px
小P
小P设置width
发现小P设置width为200px以后，确实生效了
小S，小S2各设置width宽度为200px
小S，小S2
小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)的统一规定处理
总结
该文总结了关于HTML基础知识之元素以及盒子模型的简单介绍，后续会继续学习关于元素在文档流中如何定位以及Flex布局相关的前端基础知识
5182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
