您的位置:網站首頁 > 新聞原創 > 常德網站建設

常德網站建設的網站重構CSS常用技巧分析

日期:2015-10-23 15:19:52 人氣: 標簽:網站建設
分享到:

很多常德網站建設高手都知運用css縮寫,因為運用縮寫可以幫忙削減你CSS文件的大小,愈加簡單閱讀。這兒就側重總結了一些css常用竅門,為網站重構打下根底。

1. Block和inline元素對比
一切的HTML元素都屬于block和inline之一。
block元素的特點是:
總是在新行上初步;
高度,行高以及頂和底邊距都可控制;
寬度缺省是它的容器的100%,除非設定一個度 和
是塊元素的比方。
相反地,inline元素的特點是:
和其他元素都在一行上;
高,行高及頂和底邊距不可改動;
寬度就是它的文字或圖畫的寬度,不可改動。
, 和是inline元素的比方。
用display: inline 或display: block指令就可以改動一個元素的這一特性。什么時候需要改動這一特點呢?
讓一個inline元素從新行初步;
讓塊元素和其他元素堅持在一行上;
控制inline元素的寬度(對導航條特別有用);
控制inline元素的高度;

無須設定寬度即可為一個塊元素設定與文字同寬的背景色。

2. 再來一個box黑客方法
之所以有這么多box黑客方法,是因為IE在6之前對box的了解跟他人都不相同,它的寬度要包含邊線寬和空白。要想讓IE5同等其他瀏覽器堅持一起,可以用CSS的方法:
padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;

第一個寬度一切瀏覽器都認得,但IE5.x不認得第2行的寬度設置,只因為那一行上有空白的注釋符號(多么蠢的語法分析!),所以IE5.x就用20減掉一些空白,而其他瀏覽器會用14這個寬度,因為它是第2行,會覆蓋掉第1行。

3. 頁面的最小寬度
min-width是個十分便當的CSS指令,它可以指定元素最小也不能小于某個寬度,這么就能保證排版一向精確。但IE不認得這個,而它實際上把width作為最小寬度來使。為了讓這一指令在IE上也能用,可以把一個
放到 標簽下,然后為div指定一個類:
然后CSS這么規劃:
#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
第一個min-width是正常的;但第2行的width運用了Javascript,這只有IE才認得,這也會讓你的HTML文檔不太標準。它實際上通過Javascript的判定來完結最小寬度。
同樣的方法也可以為IE完結最大寬度:
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto";

}

4. IE與寬度和高度的疑問

IE不認得min-這個界說,但實際上它把正常的width和height當作有min的狀況來使。這么疑問就大了,假設只用寬度和高度,正常的瀏覽器里這兩個值就不會變,假設只用min-width和min-height的話,IE下面根柢等于沒有設置寬度和高度。

5. 差異大小寫
當在XHTML中運用CSS,CSS里界說的元素稱謂是差異大小寫的。為了防止這種過錯,我主張一切的界說稱謂都選用小寫。

class和id的值在HTML和XHTML中也是差異大小寫的,假如你一定要大小寫混合寫,請細心承認你在CSS的界說和XHTML里的標簽是一起的。

6. 吊銷class和id前的元素約束
當你寫給一個元素界說class或許id,你可以省掉前面的元素約束,因為ID在一個頁面里是僅有的,clas s可以在頁面中屢次運用。你約束某個元素毫無意義。
0
0
0
0
0
0
0
0
網友評論 Comments