css中display理解

admin

1.常用的内联元素
a---锚点
abbr---缩写
br---换行
em---强调
i---斜体
label---表格标签
span---内联容器，定义文本内的区块
strong---粗体强调
input---输入框
img---图片

不建议使用的内联元素：
b---粗体
font---字体设定
s---中划线

2.常用的块级元素：
div---常用的块级元素
form---表单
h---标题元素
ul/ol---列表
p---段落
table---表格


3.inline-block 水平呈现元素间，换行显示或空格分隔的情况下会有间距。
方法之移除空格：
方法一：
<div class="space">
    <a href="##">
    惆怅</a><a href="##">
    淡定</a><a href="##">
    热血</a>
</div>
方法二：
<div class="space">
    <a href="##">惆怅</a
    ><a href="##">淡定</a
    ><a href="##">热血</a>
</div>
方法三：
<div class="space">
    <a href="##">惆怅</a><!--
    --><a href="##">淡定</a><!--
    --><a href="##">热血</a>
</div>

其他方法：
.space a {
    display: inline-block;
    margin-right: -3px;
}
margin负值的大小与上下文的字体和文字大小相关。

提到display:inline-block;不得不提与float；
float布局的局限性，就是每个列表的元素的高度必须要一致，否则就像俄罗斯方块一样，锯齿相错，如第一行有列表的高度高于其他列表，就在第二行，第一个元素会沿着最高元素的右侧对齐，此原因是恶魔float属性破坏了inline-box。
所以在使用浮动布局列表就必须限制高度，于是不得已需要截掉超多的用户名信息。
而且浮动本身是一个魔鬼，使用浮动布局需要修复其带来的副作用，高度塌陷的问题。

表格布局：
使用display:table 优点在于不需要担心列表的元素的高度不一，甚至自动等高。但是不足在于在后台循环输出时需要水平repeat下，然后在垂直repeat，还不如使用浮动布局。

display:inline-block
display:inline-block 与 display:table-cell 有些相似，例如对内部元素的包裹性，但是display:inline-block最大不同在于没有父元素的匿名包裹特性，这使得其使用非常自由，可与文字图片混排，可内嵌block属性元素，可以置身于inline水平元素中。但是在IE6/7中不支持inline-block属性，只是让其表现和inline-block一样。
对于inline元素，直接{display:inline-block;}
对应block水平元素，例如li需要多点代码例如：li{display:inline-block;} li{display:inline;}或者是li{display:inline;zoom:1;}

在使用inline-block元素间的换行符空格间隙问题：空格符本质是一个字符，所以我们使用文字宽度为0的方法就可以解决inline-block元素间换行符间隙的问题。
{font-size:0;}但是在chrome有对文字大小有最小限制。可以使用letter-spacing:-4px;但是ie7浏览器不支持。元素且不会重叠。

block 水平元素inline-block化后，ie6/7没有换行符间隙问题，其他浏览器均有。

inline 水平元素inline-block化后，所有主流浏览器都有换行符/空格间隙问题。

font-size:0;去除换行符间隙，在ie6、7下有1像素的间隙，chrome浏览器无效，其他浏览器都完美去除。

letter-spacing负值可以去除所有浏览器的换行符，间隙，但是在opera浏览器下极限是间隙1px，0px会反弹，换行符间隙还原。

div{letter-spacing:-3px;font-size:0;}
不支持font-size:0去间隙的chrome浏览器变正常。
letter-spacing无法实现完全间隙的opera浏览器也变得正常了。