浅析inline-block--使用inline-block创建布局


  inline-block前端程序猿们肯定不陌生,它是display属性的一个取值。

  之所以称之为inline-block。是因为它兼具行内元素(inline-element)和块级元素(block-element)的特征。

  1. 块级元素(block elements),来源于CSS盒子模型。块级元素包含width height,padding,border与margin,他们的排列方式是从上到下排列。 行内元素,排列方式是水平排列。
  2. 行内元素(inline elements)排列方式是水平排列。
  3. 行内块元素(inline-block elements)在内部他的表现类似block元素,比如他拥有block元素的width height,即可以设定自己的高宽值,亦可以设定自己的padding,border与margin,而外部的排列方式有类似行内元素,即水平排列,而不是像块级元素一样从上到下排列。

  

  Replaced element 置换元素

  说到这,有必要提的就是置换元素。何为置换元素,在html中,有类特殊的元素如:

  ||