inline/inline-block/block 的区别

display的属性值有:

描述
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
inherit 规定应该从父元素继承 display 属性的值。

一、block

block是块级元素,总是在新行上开始;高度、行高、顶和底边距都可以控制; 如果不设置宽度的话,宽度默认值是它容器的100%。

<div><p><h1><form><ul><li>都是块级元素。

<p class="dis_block">block元素block元素</p>
<p class="dis_block">block元素block元素</p>

CSS:

.dis_block{
    background:#eee;
    border:2px solid #ccc;
    padding:5px; 
    margin:6px;
    height:30px;
    line-height:30px;
}

二、inline  

inline元素和其他元素都在一行上;高、行高、顶和底边距不可改变;宽度是它内容的宽度,不可改变,设置宽度无效。

特点就是:

设置宽度、高度无效,

设置行高会增加顶部和底部的间距但内容区高度不变,

设置padding有效

设置margin-left、margin-right有效

设置margin-top、margin-bottom无效

<span class="dis_inline">inline元素inline元素</span>	
<span class="dis_inline">inline元素inline元素</span>	

CSS: 

.dis_inline{background:#fea;border:2px solid #ccc;padding:3px; margin:10px;height:30px;line-height:30px;300px;}

三、inline-block

display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。

旁边的内联对象会被呈现在同一行,允许空格。

特点是:

可以设置宽度高度行高

可以设置padding

可以设置marign

<p class="dis_inlineblock">inline-block元素inline-bloc元素</p>	
<p class="dis_inlineblock">inline-block元素inline-bloc元素</p>	

CSS:

.dis_inlineblock{display:inline-block;*display:inline;*zoom:1;background:#2fa;border:2px solid #ccc;padding:3px;margin:10px;height:30px;line-height:30px;300px;}

IE6、7不支持inline-block,如果要兼容IE6、7 ,代码如下

display:inline-block;*display:inline;*zoom:1;

效果图:

原文地址:https://www.cnblogs.com/aimee2004/p/5148248.html