因为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一行只有一个。