管窥——块级元素与行内元素

块级元素(block elements)与行内元素(inline elements)是构建html世界的基本元素，所有位于body标签的元素可以划分为这两大类型。那么，我们不禁要问：元素划分为block和inline的意义何在？

• 块级元素
  • 块级元素规定元素内容占据整块区域，排斥其他元素与其位于同一行
  • 可以设定width和height
  • 一般是其他元素（block或inline）的父容器
  • 具体演示效果如下：

• 常见块级元素包括：

• 行内元素

  • 行内元素规定可以与其他元素位于同一行，但不可包含块级元素
  • 不可以设定width和height，height由字体大小决定，weight有字体个数决定

• 具体演示效果如下:

• 常见行内元素包括：

• 可变元素

• Css元素的display属性

每一个元素都具备一个display属性，该属性规定每个元素的表现类型：block、inline和block-inline

• block规定元素为块级元素；inline规定元素为行内元素；inline-block规定元素具有改变宽高功能的行内元素
• 具体演示效果如下：

---

小结：

• block规定元素的占据整块区域的空间，排斥其他元素与其同行；inline规定元素可与其他元素同行;inline-block是具备调整宽高的inline元素
• block可以设定宽高并能容纳其他block和inline元素，inline无法设定宽高并只能容纳inline元素
• 可以在Css元素中设定display属性改变元素的表现形式

---

参考资料：

• 行内元素与块级元素比较全面的区别和转换
• css盒模型和块级、行内元素深入理解
• CSS里常见的块级元素和行内元素