display,float,position的關系以及display=table,table-row,table-cell等屬性的使用
1.先說display,float,position的關系
display如果為none,float和position都失效;
display不為空的時候,如果position為absolute或者為fixed的時候,並且float的值不為空,則float失效;如果position為relative的時候,float的值如果不為空,則float生效。
2.display的值有很多種,block,table,table-row,table-cell,inline,inline-block,list-item。這次先說一下display=table以及display:list-item的情況。
舉個例子:
<div id="aas">
<div id="main">
<div id="nav">navConetent</div>
<div id="extras">extraContent</div>
<div id="content">contentcontent</div>
</div>
</div>
#aas {
display: table;
border-spacing: 10px;
border-collapse: collapse;
}
#main {
display: table-row;
}
#nav {
display: table-cell;
width: 180px;
background-color: #e7dbcd;
}
#extras {
display: table-cell;
width: 180px;
background-color: #d7ad7b;
}
#content {
display: table-cell;
width: 180px;
background-color: yellow;
}
效果如下:
這樣設置就可以表示成像table的樣子啦。
總結如下:
display
table ===> 按照table樣式渲染。
table-row==>按照tr樣式渲染
table-cell==>按照td樣式渲染
table-row-group==>按照tbody樣式渲染
table-header-group==>按照thead樣式渲染
table-footer-group==>按照tfooter樣式渲染
display:list-item的情況
給一個元素兩個屬性,就能讓這些元素按照列表排列。這兩個屬性是:
1、display:list-item
2、list-style-type:decimal(屬性值很多種類);
display,float,position的關系以及display=table,table-row,table-cell等屬性的使用