CSS中的長度問題-------Day76,css-------day76
今天沒有繼續昨天的問題,因為今天沒時間,從來就感覺自己在忙,不過可喜的是,以前我在忙著迷茫,現在我在忙著勵志...記得有句話說的特別好“那些想明白了就可以不做的事情,往往不做就想不明白”,這句話讓我佩服很久,那些曾經的日子總在提醒我要珍惜現在。
說說css的幾種距離吧,大致有px、em、pt、pc、in、mm、cm、ex八種,其中最常見到的是px,我還見到過的有ex和mm、cm,當然後兩個在當年見的更多。
其實px,我們最熟悉,而在電腦上也應用最多,因為顯示器的解析度就是...px*....px,我們知道解析度的話是不是對於瀏覽器最大時對介面的實際更方便簡潔,應該有這麼個原因吧。
而em則是相對長度單位,是相對於系統的預設字型尺寸來的;
至於我們最常見的mm和cm就是我們純正意義上的cm和mm了,他們都是絕對長度單位,帶了“絕對”也就知道了吧。
而剩下的四個,我見得比較少,不過這裡 也還是把它的一些問題簡單記錄下吧:
ex同樣是相對長度,而它的參照則不是系統預設的字型尺寸了,而是相對於字元"x"的高度;
in、pc、pt則都是絕對長度,他們之間的換算關係為:1in=2.54cm=25.4mm=72pt=6pc;
當然相對長度也有其相應的換算關係,那就是:16px=1em=100%=12pt;
需注意,px尚存在弊端:在ie6下,無法實現字型縮放的功能。
又晚了,去睡啊...
css 控制文字長度問題
假如html代碼是:
<div class="title">我是123214啊啊啊啊啊啊按時間啊暗示啊啊啊啊啊啊啊</div>
那麼css可以這麼寫:
<style>
.title{
width:8em;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
word-break:keep-all;
}
</style>
提示:這個text-overflow只有IE 6.0+支援,在ff/chrome下無效。
css中border-solid長度問題
<style>
a{ text-decoration:none; color:#fff; font-size:12px; border-right:1px solid #ccc; padding:0px 10px;}
ul li{ float:left; list-style:none; background:#000; padding:10px 0px; }
</style>
<body>
<div>
<ul>
<li><a href="#">我的購物車</a></li>
<li><a href="#" style="border:none;">我的收藏夾</a></li>
</ul>
</div>
</body>