CSS框架有哪些比較重要的理解_CSS框架如何理解
互聯(lián)網(wǎng)行業(yè)已經(jīng)發(fā)展了多年,瀏覽器也從最早流行的NS到現(xiàn)在的FF3.IE7等等。。。下面由學習啦小編為大家整理的CSS框架的理解,希望大家喜歡!
CSS框架的理解
一、CSS框架之利:
1、開發(fā)效率的提高。
如果你是一個企業(yè)建站的前端開發(fā),相信在大部分時間里進行著同類站點的代碼工作。定義好的框架可以大大提高你的工作效率,避免一些常見的錯誤。如果你的工作是按件計費的,你的報酬一定會比別人多。
2、規(guī)范代碼命名。
在多個站點中你可能會用到一些同樣的CLASS或ID。如果你有一套完善的css框架,很快你就能對你的每一個站點的代碼進行通讀。不用浪費時間在代碼的閱讀上。
3、更好的團隊合作
有些公司會將一些稍大的站點的前端代碼分成若干子項目。有過此類經(jīng)驗的朋友應該對這種開發(fā)方式深感郁悶,要注意公用css,還有注意相互之間的代碼配合。久而久之,廢棄代碼越來越多,互相之間也難以閱讀。如果建立好合適的CSS框架,大家可以減少很多不必要的錯誤,提升產(chǎn)品質量和工作效率。
4、解決瀏覽器的兼容性問題
現(xiàn)在大部分項目都要求兼容IE6,7和FF。每個站點可能都會花上一部分時間去處理兼容問題。在框架層面上就將這個問題處理好。就可以為后面的兼容問題節(jié)省下大部分時間。
5、一套完整的、結構清晰的結構代碼。
CSS框架為你的項目提供一個干凈、嚴謹?shù)幕A架構。通過它你可以快速的為你的站點搭建基礎的html代碼框架。萬事開頭難,前面的基礎工作做好了。后面的開發(fā)速度會提高很多。
CSS框架為你的項目提供一個干凈、嚴謹?shù)幕A架構。通過它你可以快速的為你的站點搭建基礎的html代碼框架。萬事開頭難,前面的基礎工作做好了。后面的開發(fā)速度會提高很多。
二、CSS框架之弊:
1、你需要完全的理解整套框架
每一個加入項目的人,都需要花一定的時間去完全的理解整套框架及編碼規(guī)范;
2、你會延續(xù)一些框架中的錯誤bug
沒人可以保證自己制定的框架是完美而沒有bug的。你可能會需要時間去清理框架中的bug;
3、限制開發(fā)思路
框架給出大家基本的架構及開發(fā)的思路,這可能會限制你對產(chǎn)品開發(fā)的新思路;
4、臃腫的源代碼
框架中可能有很大一部分代碼不會經(jīng)常用到,而且還會降低執(zhí)行效率;
5、框架的語義化
我們已經(jīng)注意到了HTML代碼的語義化。但基于框架的每個站點都是獨立唯一的,我們很難去保證CSS框架的語義化。
常見CSS的錯誤解析
1. 檢查HTML元素是否有拼寫錯誤、是否忘記結束標記
即使是老手也經(jīng)常會弄錯div的嵌套關系??梢杂胐reamweaver的驗證功能檢查一下有無錯誤。
2. 檢查CSS是否正確
檢查一下有無拼寫錯誤、是否忘記結尾的 } 等??梢岳肅leanCSS來檢查 CSS的拼寫錯誤。CleanCSS本是為CSS減肥的工具,但也能檢查出拼寫錯誤。
3. 確定錯誤發(fā)生的位置
如果錯誤影響了整體布局,則可以逐個刪除div塊,直到刪除某個div塊后顯示恢復正常,即可確定錯誤發(fā)生的位置。
4. 利用border屬性確定出錯元素的布局特性
使用float屬性布局一不小心就會出錯。這時為元素添加border屬性確定元素邊界,錯誤原因即水落石出。
5. float元素的父元素不能指定clear屬性
MacIE下如果對float的元素的父元素使用clear屬性,周圍的float元素布局就會混亂。這是MacIE的著名的bug,倘若不知道就會走彎路。
6. float元素務必指定width屬性
很多瀏覽器在顯示未指定width的float元素時會有bug。所以不管float元素的內容如何,一定要為其指定width屬性。
另外指定元素時盡量使用em而不是px做單位。
7. float元素不能指定margin和padding等屬性
IE在顯示指定了margin和padding的float元素時有bug。因此不要對float元素指定margin和padding屬性(可以在float元素內部嵌套一個div來設置margin和padding)。也可以使用hack方法為IE指定特別的值。
8. float元素的寬度之和要小于100%
如果float元素的寬度之和正好是100%,某些古老的瀏覽器將不能正常顯示。因此請保證寬度之和小于99%。
9. 是否重設了默認的樣式?
某些屬性如margin、padding等,不同瀏覽器會有不同的解釋。因此最好在開發(fā)前首先將全體的margin、padding設置為0、列表樣式設置為none等。
10. 是否忘記了寫DTD?
如果無論怎樣調整不同瀏覽器顯示結果還是不一樣,那么可以檢查一下頁面開頭是不是忘了寫DTD
CSS中em和px區(qū)別是什么
Font-size:1.5em;
其實在國外CSS編寫中,使用em作為單位是很多的,一是人性化考慮,二是受到美國勞工部Section508法案的強行限制。那么在網(wǎng)頁設計中,常用到的度量單位一共有三種,分別是px/em/pt:
*px單位名稱為像素,相對長度單位,像素(px)是相對于顯示器屏幕分辨率而言的,國內的網(wǎng)站很多都是采用px作為單位的。
*em單位名稱為相對長度單位。相對于當前對象內文本的字體尺寸。在國外使用的很多。眾多先進瀏覽器【IE除外的基本都是】都支持字體調整。
*pt單位名稱為點(Point),絕對長度單位,這個很老了,老到胡子都一把了。?;緵]有使用的了。
第一、em與px之間怎么換算?
*任意瀏覽器的默認字體高度16px(16像素)。
*所有未經(jīng)調整的瀏覽器都符合:1em=16px。
*那么12px=0.75em,10px=0.625em。
為了簡化font-size的換算,需要在css中的body選擇器中聲明font-size=62.5%,這就使em值變?yōu)?6px*62.5%=10px,這樣12px=1.2em,10px=1em,也就是說只需要將你的原來的px數(shù)值除以10,然后換上em作為單位就行了。
第二、em單位有什么特點?
*em的值并不是固定的。
*em會繼承父級元素的字體大小。
我們在寫CSS的時候如果要用em為單位,需要注意兩點:
*body選擇器中聲明Font-size=62.5%;
*將你的原來的px數(shù)值除以10,然后換上em作為單位;
*重新計算那些被放大的字體的em數(shù)值。避免字體大小的重復聲明。
也就是避免1.2*1.2=1.44的現(xiàn)象。比如說你在#content中聲明了字體大小為1.2em,那么在聲明的字體大小時就只能是1em,而不是1.2em,因為此em非彼em,它因繼承#content的字體高而變?yōu)榱?em=12px。