发表于: 2018-07-05 16:51:55

0 722


display:inline  block

缺点:元素与元素间有间隙;图文混编(基线对齐问题);只能从左向右排列;

消除间隙的办法:给父元素添加font-SIZE:0;间隙是由换行引起的。

ie6/7不兼容diaplay:inline block;

对块级元素需添加(diaplay:inline;zoom:1;)

Zoom放大属性一般用于ie6,7清楚浮动。

浮动float:left;1:从左向右排布。2:所有元素都可加浮动,浮3:动会使元素脱离文档流,4:浮动和绝对定位不可一起使用,如果给一个元素加了浮动后,可以通过margin等来调整元素的位置,5:行内元素使用浮动后可以设置宽高,但元素设置了浮动后在设置display:block;后不会站一行;overflow:hidden;闭合浮动使父元素恢复高宽,不出现高度崩塌现象。

清除浮动的方法:1在浮动元素末尾增加一个空元素设置clear:both;缺点是成本高,维护困难。

2通过设置父元素overflow:hidden;或display:table;来闭合浮动。

3使用伪元素  但content:"";必须卸写在第一行。

图文混编:行内元素,行内块元素,和文字会围绕着设置浮动的元素排布。

visibility:hodden;元素是否可见有visible默认值元素可见,collapse删除元素,还有继承inherit。


返回列表 返回列表
评论

    分享到