css的block与inline-block区别

`block` 和 `inline-block` 都是 CSS 中用于设置元素显示方式的属性，它们之间的主要区别在于：

1. 盒子模型大小：`block` 元素通常会生成一个矩形框，它会占据整个可用的宽度（除非设置了具体的宽度），并且会在垂直方向上占用一整行。而 `inline-block` 元素则会根据内容自适应宽度，并且不会在垂直方向上占用整行，它们的盒子模型大小由它们的内容和盒子模型属性共同决定。

2. 布局方式：`block` 元素会将后续元素推到下一行，而 `inline-block` 元素则会允许其他元素在同一行内显示。这也就是为什么在使用 `inline-block` 元素时，你需要注意元素之间的空格和换行符会产生额外的空白间隔。

3. 位置属性：`block` 元素的 `position` 属性默认为 `relative`，而 `inline-block` 元素的 `position` 属性默认为 `static`。

在实际开发中，我们通常会使用 `block` 元素来布局页面的主要结构，例如标题、段落、图像等，而使用 `inline-block` 元素来设置一些内联元素的样式，例如按钮、输入框、超链接等。