行内元素和块级元素算是 css 中最基础，也是最重要的部分了。但我对这部分还没彻底研究透，需要彻底掌握才行。
比如，width 和 height 跟父节点和子节点的关系到底是什么，默认是什么？行内元素的 padding 和 margin 能设置吗？
行内元素，也叫内联元素，inline-element
对比
包含关系
块级元素可以包含块级元素或者行内元素，行内元素只能包含行内元素。但这只是建议，并非强制，即便行内元素包含块级元素也不会报错。
换行
块级元素独占一行，前后都不可以有块级元素或者行内元素（当然 display: flex;可以让几个块级元素放在同一行）。行内元素们可以排列在同一行里，直到这一行放不下才换行。
一个单词是不会换行的
发现行内元素居然不会换行，原来是因为被当成一个单词了
实验：https://replit.com/@liuqinh2s1/cssTest2#src/App.tsx
用样式可以控制每个字母换行：
1 | word-break: break-all; |
宽高
块级元素可以设置宽高，行内元素不能设置宽高（即：width 和 height）。但行内元素可以设置 line-height（没有 line-width）。
默认宽高
块级元素默认继承父盒子的宽度，但高度不会继承（想要继承可以设置成height: 100%;），由内容物撑开或者自己设置。行内元素不能设置宽高，也不继承宽高，宽高都由内容物撑开。
边距
块级元素的 margin 和 padding 会对外产生边距效果，行内元素的 margin 和 padding 在水平方向上会对外产生效果，垂直方向上不会对外产生效果。实验：https://replit.com/@liuqinh2s1/css-test1#src/App.tsx
display: inline，inline-block，block 的区别
定义成 inline 就是行内元素，block 就是块级元素。它们的区别前面已经讲过了
inline-block 是它们二者的综合，本质上也是个 block，除了不会独占一行。
实验例子：https://www.w3school.com.cn/tiy/t.asp?f=css_inline-block_span
子元素怎么撑满剩余的空间？
用 flex-grow 去撑满剩余的空间，具体怎么写：
用 display: flex，然后 flex: 1，即可。flex: 1 的含义是 flex: 1 1 auto。也就是 flex-grow: 1; flex-shrink: 1; flex-basis: auto。
flex，flex-grow，flex-shrink，flex-basis
这个东西的计算公式官网没有公布，导致只能查别人写的资料，或者自己推导。经过多次实验后，结论如下：
grow 的计算跟自身宽高无关，直接按比例分配剩余的空间，shrink 的计算是跟自身宽高有关的，需要根据自身宽高，按加权比例平摊（缩减）超出的空间。
假设计算的是水平方向的 flex：
grow 的算法如下：
单个元素需要 grow 的量：(单个子元素 flex-grow/总的 flex-grow)\*(父容器宽度-子元素宽度之和)
shrink 的算法如下：
假设 div1 是 100px, flex-shrink:1；div2 是 200px, flex-shrink:2；div3 是 300px, flex-shrink: 3。容器宽度 700px
div1 元素需要 shrink 的量：(100*1)/(100*1+200*2+300*3)\*(700-100-200-300)
也就是加权比例，需要用到自身的宽高
flex-basis 就是宽高的意思，但比宽高优先级高，比如定义了 width: 100px; flex-basis: 0px;那么就是按 0 去进行 flex 的。