Heim > Artikel > Web-Frontend > 【从0到1学CSS】定位问题二（float和display的使用）_html/css_WEB-ITnose
【从0到1学CSS】定位问题二（float和display的使用）_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:43:421008Durchsuche
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(
因为IE(
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS Sprite定位实现_html/css_WEB-ITnoseNächster Artikel：HTML标签没闭合，可能导致 Chrome 崩溃_html/css_WEB-ITnose