设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 386|回复: 0

[其他] css中display理解

[复制链接]

374

主题

381

帖子

2554

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2554
发表于 2015-2-10 20:14:07 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
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浏览器也变得正常了。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-6 00:31

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表