[Learn CSS from 0 to 1] Positioning Problem 2 (Use of float and display)_html/css

[Learn CSS from 0 to 1] Positioning Problem 2 (Use of float and display)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:43:42

Original

1032 people have browsed it

The display attribute specifies the type of box the element should generate.

This attribute is used to define the type of display box generated by the element when creating a layout. For document types such as HTML, using display carelessly can be dangerous, as it may violate the display hierarchy already defined in HTML. For XML, since XML doesn't have this kind of hierarchy built in, all display is absolutely necessary.

Browser support:
All major browsers support the display attribute.

Note: "inherit", "inline-table", "run-in", "table", "table-caption", "table-cell" are not supported in any version of Internet Explorer (including IE8) ", "table-column", "table-column-group", "table-row", and "table-row-group" attribute values.

Because setting display: inline-block on block-level elements can achieve the same effect as float. That is, there is no newline character at the end of the block-level element. So when to use float and when to use display: inline-block?

Most of the time float appears to handle text wrapping. So when we use float to implement text wrapping and deal with non-text wrapping, we mainly use display: inline-block.

1.1float implemented navigation bar

<!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>

Copy after login

In chrome, firefox and IE, the display effect is as follows:

1.2display: inline-block implementation The navigation bar

<!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>

Copy after login

The effect of this code in chrome, firefox, IE (>=8) is as follows:

The effect in IE (<=7) is as follows:

Because IE (<=7) does not support the display attribute (explanation about display at the beginning).