CSS属性：display详解

display在w3c上的定义是：display 属性规定元素应该生成的框的类型。

　　display有许多值，这里详细讲block,inline-block,inline,table-cell.

　　block:此元素将显示为块级元素，此元素前后会带有换行符

　　inline:默认。此元素会被显示为内联元素，元素前后没有换行符。

　　inline-block:行内块元素。（CSS2.1 新增的值）

　　table-cell:此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

block元素(即默认display:block)的特点是： 

· 总是在新行上开始；

· 该对象随后的内容自动换行;

· 高度，行高以及顶和底边距都可控制；

· 宽度缺省是它的容器的100%，除非设定一个宽度

<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。(意思是他们默认显示方式是block)

实例1.对于block的运用，一个编辑框，主题是textarea,下面是一个div，可以resize，要实现textarea与div的无缝连接，这时将会设置textarea的值：display:block,默认的值inline会使textarea与div之间有缝隙(啊啊啊，不知道为神马这里没差别，我自己的项目中，如下图)

 加上display:block

理想的样子：

 html代码

<div id="mystage"><textarea style="width: 300px; height: 150px;"></textarea>
<div style="background: #eee url('http://pixelbread.hk//misc/grippie.png') no-repeat center 2px; height: 9px; width: 300px;">&nbsp;</div>
<br /><br />
    <textarea style="display: block; width: 300px; height: 150px;"></textarea>
<div style="background: #eee url('http://pixelbread.hk//misc/grippie.png') no-repeat center 2px; height: 9px; width: 300px;">&nbsp;</div>
</div>

在我本地的书写显示效果：

不晓得怎么在博客上就不一样了。

 

 

 

实例2.Html对应运用代码：

<span class="divcss">我的后面文字会换行</span>我是被前面的divcss对应CSS属性换行。

<span>不会被换行,因为我没有被设置display:block</span>

inline元素(即默认display:inline)的特点是：

· 和其他元素都在一行上；

· 高，行高及顶和底边距不可改变；

· 宽度就是它的文字或图片的宽度，不可改变。

<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子

Display:inline,我们常常在li中使用它。功能是让li排成一排（称：删除行）

 

转载于:https://www.cnblogs.com/BerthaPeng/p/4849288.html