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

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.1`float`实现的导航条

<!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.2`display：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.1`float`实现的导航条

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

最新文章

热门文章

巴特西

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

1.1float实现的导航条

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

最新文章

热门文章

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

1.1`float`实现的导航条

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