老实说写前端也有小半年了，但是一直被大佬吐槽css基础差。仔细一想，确实，我的css是freeCodeCamp教的，pink老斯的教程都没看过……
对于样式继承的迷思
之前对于元素的尺寸一直有个错误的理解：
- 子元素会继承父元素的宽高
- 子元素会撑开父元素 于是我总是忘记给父元素or子元素写样式，无法理解为啥同一个宽度需要设定两次（子、父元素里）
宽高不能被继承？
对于样式的继承，MDN是这么说的：
一些设置在父元素上的css属性是可以被子元素继承的，有些则不能。
如果你设置一个元素的 color 和 font-family ，每个在里面的元素也都会有相同的属性，除非你直接在元素上设置属性。
如果你在一个元素上设置 width 50% ，所有的后代不会是父元素的宽度的50% 。如果这个也可以继承的话，CSS就会很难使用了!
这里的“很难使用”，我理解是一些对样式有较大影响的属性，比如width、height、border、padding等等，它们都和box model强相关。
为什么这里继承了？
现在有一个父div和子div，在不给子div设置width的时候，它居然有了宽高，但是用devtool看的时候并没有看到width的属性。这个子div默认width: 100%，height由内容撑起。
子元素怎么撑起父元素
去掉父元素的宽高，发现它的宽度撑满，高度由子元素内容决定。结合我们之前的结论，是符合预期的！
此时，将父元素改为display: inline-block
发现父元素自适应了子元素的宽高……
其实如果把父元素改成span也能实现同样的效果，这就牵扯到了block元素、inline元素和inline-block元素的性质：
块级元素(block)：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽。
行内元素(inline)：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高。行内块元素(inline-block)：结合的行内和块级的优点，既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。 cr: segmentfault.com/a/119000001…
行内元素一般是内容的容器，而块级元素一般是其他容器的容器，行内元素适合显示具体内容（让内容决定自己的大小），而块级元素适合做布局。
