博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【从0到1学Web前端】CSS定位问题二(float和display的使用) 分类: ...
阅读量:6229 次
发布时间:2019-06-21

本文共 1321 字,大约阅读时间需要 4 分钟。

display 属性规定元素应该生成的框的类型。

这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。

浏览器支持:

所有主流浏览器都支持 display 属性。

注释:任何版本的 Internet Explorer (包括 IE8)都不支持 "inherit""inline-table""run-in""table""table-caption""table-cell""table-column""table-column-group""table-row"、以及 "table-row-group"属性值。

这里写图片描述

因为对块级元素设置display:inline-block的时候可以达到与float相同的效果。就是使块级元素末尾没有换行符。那么到底什么时候使用float和什么时候使用display:inline-block呢?

大多数时候float的出现是为了处理文字环绕。所以当我们为了实现文字环绕的时候使用float而处理非文字环绕的情况下,则以使用display:inline-block为主。

1.1float实现的导航条

    
floatNav

在chrome和firefox还有IE中,显示效果如下:

这里写图片描述

1.2display:inline-block实现的导航条

    
inlineNav

这段代码在chrome和firefox,IE(>=8)中的效果如下:

这里写图片描述

在IE(<=7)的效果如下:

这里写图片描述

因为IE(<=7)不支持display属性(开头关于display的解释)。

版权声明:本文为博主原创文章,未经博主允许不得转载。

转载于:https://www.cnblogs.com/yisuowushinian/p/4715597.html

你可能感兴趣的文章
PM经验谈 项目管理工具必备的5个功能
查看>>
解读数据传输DTS技术架构及最佳实践
查看>>
谁来给电视盒子接班?
查看>>
CSS实现1px以内的移动
查看>>
2.4GHz、5GHz、60GHz,到底谁的无线信号又快又好?
查看>>
对实习生最慷慨的25家美国公司 猜每月多少薪水?
查看>>
《云计算揭秘企业实施云计算的核心问题》——第1章,第1.0节什么是云计算
查看>>
浅读亚太数据中心发展
查看>>
各地法院运用“大数据”“互联网+”提高司法效率
查看>>
让大数据助力全球能源互联网
查看>>
笔记:Ceph and Swift: Why we are not fighting.
查看>>
内蒙古首家智慧城市展示体验中心建成
查看>>
从专家诊病模型实例理解智慧医疗大数据
查看>>
D1net阅闻:Google开源iOS软件测试工具EarlGrey
查看>>
《Drupal实战》——第2章 为图书添加各种字段 2.1 下载并安装常用模块
查看>>
4年后的网络还不能完全满足人类对数字化未来的需求
查看>>
云服务器的价值与IT部署可行性分析
查看>>
阿里云频频牵手高校 专注大数据人才培养
查看>>
微软将向欧盟做出必要让步 力促收购LinkedIn交易获批
查看>>
微软想要打造智慧城市 现在只是从汽车先下手
查看>>