display属性

一、display属性

• none
• block
• inline
• inline-block
• inherit

二、display:none

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

三、display:block

        使用了display：block;之后， 此元素将显示为块级元素，此元素前后会带有换行符。

标准文档流：简称标准流，指的是在不使用其他的与排列和定位相关的css规则时，各种元素的排列规则。

块级元素：占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形。

行内元素 ：自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。

常用的块状元素有：

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> （块引用）、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有（图片是内联元素，同时是替换元素，替换元素是可以设置宽高的）：

<img>、<input>

块级元素特点：

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

行内元素特点：

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

四、display:inline

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

五、display:inline-block

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