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实现的导航条

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>floatNav</title>

    <style type="text/css">

    body, ul{margin:0;padding:0;}

        #body-div{

            background-color:#eaebea;

            height:40px;

            /*设置当浏览器窗口变短时li换行显示*/

            overflow:hidden;

            /*这里主要是让父级div跟据内容自动伸长*/

            float:left;

        }

        ul li {

            list-style:none;

            float:left;

            border-right:1px solid #d2d5d2;

            line-height:40px;

            padding: 0 10px;

        }

        ul li a{

            text-decoration:none;

        }

        a:link, a:visited{color:#3f3b3c;}

        a:hover{color:#fd687f;}

    </style>

</head>

<body>

    <div id="body-div">

        <ul>

            <li><a href="">首页</a></li>

            <li><a href="">内容1</a></li>

            <li><a href="">内容2</a></li>

            <li><a href="">内容3</a></li>

            <li><a href="">内容4</a></li>

            <li><a href="">内容5</a></li>

            <li><a href="">内容6</a></li>

            <li><a href="">内容6</a></li>

        </ul>

    </div>

</body>

</html>

在chrome和firefox还有IE中，显示效果如下：

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>inlineNav</title>

    <style type="text/css">

    body, ul{margin:0;padding:0;}

        #body-div{

            background-color:#eaebea;

            height:40px;

            /*这里主要是让父级div跟据内容自动伸长*/

            display:inline-block;

            /*设置当浏览器窗口变短时li换行显示*/

            overflow:hidden;

            margin:0 auto;

        }

        ul li {

            list-style:none;

            display:inline-block;

            border-right:1px solid #d2d5d2;

            line-height:40px;

            padding:0 10px;

        }

        ul li a{

            text-decoration:none;

        }

        a:link, a:visited{color:#3f3b3c;}

        a:hover{color:#fd687f;}

    </style>

</head>

<body>

    <div id="body-div">

        <ul>

            <li><a href="http://www.baidu.com" target="_blank">首页</a></li>

            <li><a href="">内容1</a></li>

            <li><a href="">内容2</a></li>

            <li><a href="">内容3</a></li>

            <li><a href="">内容4</a></li>

            <li><a href="">内容5</a></li>

            <li><a href="">内容6</a></li>

            <li><a href="">内容7</a></li>

        </ul>

    </div>

</body>

</html>

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

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

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

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

【从0到1学Web前端】CSS定位问题二（float和display的使用） 分类： HTML+CSS 2015-05-28 22:03 812人阅读 评论(1) 收藏的更多相关文章

  1. 【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类： HTML+CSS 2015-05-27 22:24 813人阅读 评论(1) 收藏

    引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽 ...

  2. 1.PHP站内搜索 分类： PHP开发实例 2015-07-31 22:48 4人阅读 评论(0) 收藏

    PHP站内搜索:多关键字.加亮显示 1.SQL语句中的模糊查找 $sql = "SELECT * FROM `message` WHERE `content`like '%$k[0]%' a ...

  3. ListView 分类： WinForm 2014-07-18 22:03 289人阅读 评论(0) 收藏

    一.ListView类(转载) 1.常用的基本属性: (1)FullRowSelect:设置是否行选择模式.(默认为false) 提示:只有在Details视图该属性才有意义. (2) GridLin ...

  4. UI基础:视图控制器.屏幕旋转.MVC 分类： iOS学习-UI 2015-07-02 22:21 62人阅读 评论(0) 收藏

    UIViewController 视图控制器,继承自UIResponder,作用:管理视图并且响应事件 功能: 1.分担APPdelegate的工作 2.实现模块独立,能提高复用性 创建UIViewC ...

  5. UI基础:UI程序执行顺序(UIApplicationMain()函数),自定义视图 分类： iOS学习-UI 2015-07-02 22:09 68人阅读 评论(0) 收藏

    UI程序的一般执行顺序: 先进入main里面,执行函数UIApplicationMain(),通过该函数创建应用程序对象和指定其代理并实现监听,当执行函数UIApplicationMain()时还会做 ...

  6. 动态规划：最大连续子序列乘积 分类： c/c++ 算法 2014-09-30 17:03 656人阅读 评论(0) 收藏

    题目描述: 给定一个浮点数序列(可能有正数.0和负数),求出一个最大的连续子序列乘积. 分析:若暴力求解,需要O(n^3)时间,太低效,故使用动态规划. 设data[i]:第i个数据,dp[i]:以第 ...

  7. 修改android应用包名 分类： android 学习笔记 2015-07-16 22:48 4人阅读 评论(0) 收藏

    由于项目需要,要修改已经开发好的应用包名,这本身很简单,但是如果你没找到门道,可能会白白浪费许多时间. 修改包名有三个地方要改,这三个地方的修改一定要按顺序来,否则你可能会遇到许多不必要的麻烦. 1. ...

  8. javascript的全局变量 分类： C1_HTML/JS/JQUERY 2014-08-07 11:03 562人阅读 评论(0) 收藏

    javascipt是一门面向对象的编程语言.由于存在一些全局属性及全局函数,因此可以认为存在一个全局变量,这些全局属性及全局函数均是其属性或函数. 在js核心中,并没有定义一个具体的全局变量,因此,j ...

  9. 【从0到1学Web前端】CSS伪类和伪元素

    1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

随机推荐

  1. 使用Expression tree访问类的属性名称与值

    表达式树Expression是Linq中一项比较重要的功能,对其深刻了解Lamda以及计算表达式有很大的帮助. 下面是利用 Expression<Func<Object>>[] ...

  2. Gitolite 权限控制

    官网 http://gitolite.com/gitolite/index.html 安装配置 http://gitolite.com/gitolite/install/ 傻瓜安装教程 http:// ...

  3. Zookeeper C++编程实战之配置更新

    CZookeeperHelper:https://github.com/eyjian/libmooon/blob/master/include/mooon/net/zookeeper_helper.h ...

  4. 【Javascript第二重境界】序

    JS是个人比较喜欢的一门语言,在前端开发中也处于核心位置.前面断断续续的研究了一段时间,这其中包括 对象,原型,继承,函数,设计模式,模块,DOM操作,以及其它又多又琐碎的知识点,而且大部分内容都没有 ...

  5. android 按照拼音模糊查询中如何把字符转换成拼音

    http://files.cnblogs.com/liaolandemengxiang/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9.rar 首先转换成的 ...

  6. vc6中向vs2010迁移的几个问题

    vc6版本支持的库编译:CJ60lib 1. 用vs2010打开CJ60库的源码的dsw,强制打开 (1)设置项目属性的语言 因为,如果代码字符的编码集不一样,则会出现函数冲定义,参数冲突等问题,这可 ...

  7. kosaraju算法

    这个是求一个图有几个强联通分量的算法 先讲一下应该流程 首先输入一个图G,创建一个反向的图GT 图G 对图进行dfs遍历,纪录每个点结束搜索的时间p[i] p[1]=2  p[2]=1  p[3]=5 ...

  8. 7.Layout布局(tabs、accordion、layout)

    一.tabs选项卡: 二.accordion手风琴: 三.经由div标记创建layout布局: 注意:center不是定位得到的,而是通过其他的几个位置计算得到的,如果不写center整个布局就无法初 ...

  9. 区间DP石子合并问题 & 四边形不等式优化

    入门区间DP,第一个问题就是线性的规模小的石子合并问题 dp数组的含义是第i堆到第j堆进行合并的最优值 就是说dp[i][j]可以由dp[i][k]和dp[k+1][j]转移过来 状态转移方程 dp[ ...

  10. xml文件头文件生成策略以及导入约束条件

    约束的作用是对配置文件的一种检验 约束条件分为schema约束和DTD约束,schema约束是还有目录结构,DTD约束没有目录结构 这里暂先介绍schema约束的导入 约束的分类: 1.schema ...