HTML + CSS 基础：元素分类以及盒子模型
前言
我们知道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布局相关的前端基础知识
