前端学习_04.内联/块级元素

块级元素

• a)特点
  i.所有块级元素占用全部宽度，不能和其他元素共享一行。
  ii.可以根据盒模型特性设置宽高内外间距，如果不设置宽度，则默认填充父级元素的宽度。
  iii.内部可以继续容纳其他元素。包括：div、dl、h系列、hr、ul、li、ol、table、p等
  iv.包括：div、dl、h系列、hr、ul、li、ol、table、p等
  

内联元素

• a)特点
  i.所有内联元素只占用必要的宽度，默认和其他元素在同一行。
  ii.不遵循盒模型特性设置，宽高只和内容有关。
  iii.内部可以继续容纳其他元素。
  iv.元素包括：文本标签(a、b、u、font、span )、input、label、textarea、img、select等。
  

块级和内联相互转换

• a)块级元素->内联元素
  增加css属性display:inline
• b)内联元素->块级元素：
  增加css属性display:block
• c)既是内联元素又是块级元素：(既希望元素具有宽度高度特性，又具有同行特性)
  增加css属性inline-block
  i.每一行所有的inline-block元素会共同形成一个line box
  ii.line box的高度由里面最高的元素决定，不会与下一行的列表元素发生错位
  

正确使用 Display的属性

• a)display: block后不应该再使用vertical-align
• b)display: inline后不应该再使用width、height、margin、padding以及float
• c)display: inline-block后不应该再使用float