理解与应用css中的display属性

display属性是我们在前端开发中常常使用的一个属性，其中，最常见的有：

• none

        none这个值表示此元素将不被显示

• block

　通过对一个行内元素设置display:　block;可以将行内元素设置为块级元素，进而设置它的宽高和上下左右的padding和margin。　

• inline

    此元素会被显示为内联元素，元素前后没有换行符。display:inline的作用即可以将一个块级元素转换成行内元素，那么这个块级元素将不能再设置宽和高以及上下方向的margin和padding。

inline也是 CSS 1 提出的属性，它主要用来设置行内元素属性，设置了该属性之后设置高度、宽度都无效，同时text-align属性设置也无效，但是设置了line-height会让inline元素居中

• inline-block

   设置了inline-block属性的元素既具有block元素可以设置width和height属性的特性，又保持了inline元素不换行的特性。

inline-block既具有block的宽高特性又具有inline的同行元素特性。 通过inline-block结合text-align: justify 还可以实现固定宽高的列表两端对齐布局

• inherit
  规定应该从父元素继承 display 属性的值。举例如下：

 

　　块级元素特点：

• 总是以一个块的形式表现出来，占领一整行。若干同级块元素会从上之下依次排列（使用float属性除外）。
• 可以设置高度、宽度、各个方向外补丁（margin）以及各个方向的内补丁（padding）。
• 当宽度（width）缺省时，它的宽度时其容器的100%，除非我们给它设定了固定的宽度。
• 块级元素中可以容纳其他块级元素或行内元素。
• 常见的块级元素由<p><div><h1><li>等等。
• 块级元素的display属性值默认为block。

　　行内元素特点：

• 它不会单独占据一整行，而是只占领自身的宽度和高度所在的空间。若干同级行内元素会从左到右（即某个行内元素可以和其他行内元素共处一行），从上到下依次排列。
• 行内元素不可以设置高度、宽度，其高度一般由其字体的大小来决定，其宽度由内容的长度控制。
• 行内元素只能设置左右的margin值和左右的padding值，而不能设置上下的margin值和上下的padding值。因此我们可以通过设置左右的padding值来改变行内元素的宽度。
• 常见的行内元素由<a><em><img>等等。
• 行内元素一般不可以包含块级元素。
• 块级元素的display属性值默认为inline。