因为css写的不是很多不是非常熟悉。所以打算国庆前这一周把b站css和老谢讲的css全过一遍。所有练习。
重点模糊的概念：
块级别元素：
内联元素：常见内联元素有 a img button img是内联块元素可以设置宽高 内联不能设置垂直margin 宽高不适用。设置垂直margin或者padding并不会生效。它还是在它那个位置。
inline-block元素。可以设置宽高和元素的垂直margin padding且还是横向排列不是纵向排列的
display: inline-block。任何伪元素都是内联元素
没加inline-block为内联元素没有垂直方向的padding。且相对于盒子位置不会变。加了inline-block后盒子模型可以正常应用于它。
没加inline-block
加了inline-block后
inline和inline-block的区别
inline可以看到左右padding生效。但是上下padding是在左右padding的基础上延展出来的。文字位置不变，超出h1这个box了。不符合盒模型。所以要加inline-block
上下padding出来了，并且是作为盒子的规则的。它的padding增加了h1的高度
所以总结 inline inline-block 和block的区别。
inline和inline-block是inline-block可以设置inline元素的宽高。且上下的margin /padding生效符合盒模型。
inline，inline-block都是不会加换行符的在一个元素后方。所以inline inlineblock都可以一行放几个。block一行只有一个。
