CSS中block级和inline级对象区别

block元素的特点是：

1，总是在新行上开始；
2，高度，行高以及顶和底边距都可控制；
3，宽度缺省是它的容器的100%，除非设定一个宽度
4，<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

display:inline就是将元素显示为行内元素.   display:block; 即将其变为块元素.

inline元素的特点是：

1，和其他元素都在一行上；
2，高，行高及顶和底边距不可改变； 所以 span{height: xxpx;}纯属无用功
3，宽度就是它的文字或图片的宽度，不可改变。
4，<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

本文通过实例向大家描述一下CSS中block级和inline级对象的区别，这个看似简单的问题事如果能透彻地理解，会受益匪浅，

Inline级对象可以使用vertical-align属性控制其垂直对齐，block级对象不可以。

CSS中block级和inline级对象的区别

这个看似简单的问题事如果能透彻地理解，会受益匪浅。

◆下图讲解了block级对象和inline级对象的区别:

◆下面是block级对象和inline级对象的基本区别:

Block级对象会自然地水平充满其父容器，因此没有必要为之设置100%宽度属性

Block级对象的起始摆放位置是其父容器的左上边界，并顺排在其前面的兄弟Block对象的下方（除非设置float或绝对位置）

Inline级对象会忽略其宽度和高度设置

Inline级对象会随着文字排版，并受排版属性的影响（如white-space,font-size,letter-spacing）

Inline级对象可以使用vertical-align属性控制其垂直对齐，block级对象不可以

Inline级对象的下方会保留一些自然的空间，以适应字母g一类的会向下探出的笔画

一个设置为float的inline对象将变成block对象

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

• inline元素：
  
  • 紧接在内联元素前/后的文本和图片与内联元素的内容渲染为同一基准线。但如果该文本或图片过长，它们就会与包含元素的边缘相重叠，在这种情况下，内嵌内容就会跑到一条新基准线上面，而该基准线位于之前的那条基线的下面。（即一行显示不到时才换行。）
    
  • 内联元素中，文本行的布置会视需要（或允许）而带有软换行符，除非用 white-space 属性修改了这种方式。
    
  • 样式表规则中可应用于这些元素的margin、width、height和float属性被忽略。（除了img和object）
    
  • 内联元素只能容纳文本或其它内联元素。
    
• block元素：
  
  • 这些元素将在其容器中渲染为离散块。
    
  • 这些元素的前后将总是渲染有断行点，除非将float值设为left或right。
    
  • 如果嵌套块元素之间没有任何内容，它们之间的断行点通常会被合并。
    
  • 宽度为 auto（默认）的块元素会一直扩展，直到占满所有可获得的宽度。
    
• inline-block元素：
  
  • 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
    
  • 也就是说，它在文档中当成inline对象，可以被另一个inline对象包围；同时它内部是个block元素，因此可以包含block元素，也可以设置宽高。
    

其实inline-block就是一个适配器，当需要在同一个基准线显示多个元素，并设置该元素的宽高或包含块元素时，就可以采用inline-block或float来实现。