好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

CSS定位问题(2):float和display的使用_html/css_WEB-ITnose

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          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;}           

首页 内容1 内容2 内容3 内容4 内容5 内容6 内容6

查看更多关于CSS定位问题(2):float和display的使用_html/css_WEB-ITnose的详细内容...

  阅读:37次