為什么在li標(biāo)簽里面設(shè)置 高度height的時候 不管設(shè)置多少都一樣？沒有任何變化。而改變寬度width卻有變化？
當(dāng)我不設(shè)置 高度height的時候 ，結(jié)果是水平居中的。
當(dāng)我設(shè)置? 高度為0px的時候 ， 結(jié)果是? 所有字體都重疊在一起。
當(dāng)我 把高度只要不設(shè)置為0px的時候，比如1px ,100px,10000px的時候， 結(jié)果都不變，都是水平居中的？
? 這是為什么？
2015-12-12
很好的問題。
a、如果同時設(shè)置了height和line-height，那么元素的實際高度即為height；
b、如果只設(shè)置了line-height，那么元素的實際高度等于line-height；
如果你把height設(shè)置為0，說明元素沒有高度，雖然你也設(shè)置了line-height:30px，由a可知，同時設(shè)置了height和line-height，高度就是height，所以此時元素的實際高度就是0，如果沒有高度的話，瀏覽器特別懶，雖然你有寬度，但是我也不會把你渲染成一個塊的。所以你會看到所有的字體疊在了一起。
那為什么height設(shè)置成1px就可以了呢？蚊子腿也是肉，不是么？雖然height只有區(qū)區(qū)1px，但至少也是有高度的啊。所以此時瀏覽器會把每個li渲染成塊，所以你并沒有看到字體疊在一起。
你可能會問為什么高度為0或1時，高度這么小應(yīng)該容納不下字體才對??？為什么還能顯示呢？
那是因為瀏覽器的overflow默認(rèn)值為visible
你可以設(shè)置成overflow:hidden。。然后你就看不到了。。
2018-06-13
2016-09-14
其實是有變化的，你把li標(biāo)簽加個背景顏色就能看出變化了，只不過你沒加背景，看不出而已。
2016-04-08
ul li
{
? ? width:50px;
? ? height:30px;
? ? text-align:center;
? ? float:left;
? ? line-height:30px;
? ? list-style-type:none;
}
li a:link,li a:visited
{
? text-decoration:none;
? color:black;
}
li a:hover,li a:active
{
? text-decoration:none;
? color:white;
? background-color:#BE3948;
}
</style>
</head>
<body>
<h3>課程難度</h3>
?<ul class="nav">
? ? ?<li><a href="#">全部</a></li>
? ? ?<li><a href="#">初級</a></li>
? ? ?<li><a href="#">中級</a></li>
? ? ?<li><a href="#">高級</a></li>
?</ul>
2015-12-12
以下為完整代碼
<style type="text/css">
/*在此定義相關(guān)樣式，控制列表的顯示形式*/
.l li{width:50px;height:30px;text-align:center;line-height:30px;float:left;list-style-type:none;}
.l li a:link ,a:visited
{
??? text-decoration:none;
??? color:purple;
}
.l li a:hover ,a:active
{
??? text-decoration:none;
??? color:white;
??? background:#BE3948;
??? display:block;
}
</style>
</head>
<body>
<h3>課程難度</h3>
<ul class="l">
?? <li><a href="idcbgp.cn">全部</a></li>
?? <li><a href="idcbgp.cn">初級</a></li>
?? <li><a href="idcbgp.cn">中級</a></li>
?? <li><a href="idcbgp.cn">高級</a></li>
<!--在此制作一個無序列表-->
</ul>
2015-12-12
.l li{width:50px;height:30px;text-align:center;line-height:30px;float:left;list-style-type:none;}
此為上方代碼的效果。
.l li{width:50px;height:0px;text-align:center;line-height:30px;float:left;list-style-type:none;}
此為上方代碼的效果。
.l li{width:50px;text-align:center;line-height:30px;float:left;list-style-type:none;}
這是不設(shè)置高度的時候的效果。
.l li{width:50px;height:1px;ext-align:center;line-height:30px;float:left;list-style-type:none;}
這個是隨便設(shè)置高度的時候。
2015-12-12
貼代碼