css應用歸納
發(fā)表日期:2016/2/21 13:09:05 文章編輯: 瀏覽次數(shù):3282
1、css整理之前的一些話
如果說html是前端的“核心”,那css是當之無愧的“靈魂”(可以先猜測下js我會把它當做什么)
相對于后臺程序來說,前端工作人員最慶幸的時候應該就是業(yè)務需求改動的時候,而不是在修改的時候抱怨,因為一個良好的結構外加一套簡潔合理的樣式表,工作量真的可以說是“灑灑水”(當然生活在一些逗比產(chǎn)品經(jīng)理陰影下得除外)。
那一套簡潔、合理的樣式表我們應該注意哪些:
* css盒子模型;
* 浮動;
* block和inline;
* 層疊;
* 樣式優(yōu)先級;
當然知識都是死的,活學活用才是硬道理,但是上面這幾個點真的是基礎中的基礎,如果都理解不了的話,真的不敢多要哪怕一點工資。
2、基礎知識淺析
* 在html整理的時候曾經(jīng)提到過,相比較div布局,我更傾向于“塊元素”布局,而塊元素除了自身就是塊元素的標簽以外,還有css進行設定的塊元素,舉個簡單的例子,或許我可以將一個鏈接塊化,就不用在一個div外面再套一個鏈接那么啰嗦了。
至于行元素,它同樣有著明顯的弊端,它是無法控制長寬的(原諒我經(jīng)常忘記),而inline-block則還要面對著兼容的問題,這是要時刻警惕的。
* 我們都知道所謂的網(wǎng)頁,就是一個html文檔,然后很自然就有“文檔流”的名詞會在腦海中浮現(xiàn)。
“文檔流”的出現(xiàn),也就意味著我們需要考慮到“層疊”和“浮動”,這種讓內(nèi)容脫離文檔的存在。當然,脫離文檔不是目的,讓合適的內(nèi)容顯示在合適的地方才是宗旨。
“浮動”的時候,最需要注意的地方有兩點:內(nèi)層浮動,外層容器沒有高度了一種情況,另一種情況就是沒有及時清理浮動,影響了后面內(nèi)容的展示。
而“層疊”和“透明”的搭配,則讓整個界面的展示更立體和豐滿起來,可操作的空間更多更大,需要考慮的問題同樣是,脫離文檔流的元素是不占位置的,跟正常文檔流的排版不要混起來。另外,relative,absolute和fixed的問題,面試還是會經(jīng)常碰到的。
* “盒子模型”聽起來很簡單,但是具體到應用,或者說多個“盒子”嵌套起來,或者“盒子”里有了太多元素的時候,往往就有太多問題的出現(xiàn),另外,說起來容易,但是真的找到那個對的“盒子”并進行分析并不是那么容易的,總之,“盒子”的概念還是理解的再透徹點好。
當然,“兼容性”在這個地方的出現(xiàn)也最為頻繁,誰讓它操控著整個“文檔流”呢。
* 樣式的優(yōu)先級,只是理論上的說法,而在實際應用中,為了方便后期的網(wǎng)站維護,更多的是看你如何合理的添加樣式:
一方面做到結構和表現(xiàn)分離,我們盡可能不要寫內(nèi)聯(lián)樣式,而為了代碼的復用和美觀,我們盡可能的把它放在外部樣式表上;
另一方面,復用是為了更好的開發(fā),但是往往在修改的時候容易出現(xiàn)問題,這個時候盡量精確就非常有必要了,我的宗旨一般都是“不見兔子不撒鷹”。舉個簡單的例子,設置一個初始字體為10px,外層如果加了字體的百分比,內(nèi)部元素再進行設置百分比,則得到的實際字體是不正確的,而將有字的區(qū)域都單獨成一個獨立的模塊,再進行設置,結果就不一樣了。
說了那么多,總之就是“方便復用”和“模塊化”的合理搭配就是了。
3、css編寫的個人習慣
正所謂“萬法歸一”,條條道路通羅馬,能夠大體知道意思之后,總能拼湊出想要的結果,而前端工作的“門檻低”就是如此來的。
但也正因為如此,前端工作真是純粹的良心活,將心比心,一樣的工作干好干差一樣錢也別想總能留住人。我應該是有輕微的代碼潔癖,見不得縮進不對,空格和沒空格的交叉,甚至沒有良好的注釋都不太喜歡,但很慶幸同事們都很配合。
reset.css在網(wǎng)上搜的話,應該有很多,個人建議是參考網(wǎng)上的代碼,然后真正讀明白各自的意思,然后在分析需求,思考界面之后,再進行編寫,太多東西可能我們真的不需要;
我習慣有一個contain.css,是接手項目的所有通用的樣式,并且在上面標明哪些用到了。(個人感覺還是有些必要的,可能在修改的時候我能很快的定位到這個地方,但是往往不敢下手去改,因為項目上線后,實在不敢輕易改通用代碼,就是不知道還有哪些用到了)
再然后就是每個頁面我習慣單獨建一個css文件,然后名稱與相應的html相同,也方便定位,代碼也簡單,目前感覺還不錯。
當然具體到實際項目時,可能出現(xiàn)各種情況,這里也不列舉了。
3、關于css發(fā)展的一些思考
隨著時代的發(fā)展,單純的css開始被看做很基礎,但是很low的東西了,每當面試的時候,都是有沒有用過less,sass,scss等等預處理框架,仿佛逼格要高一點。
我只用過less,還是只用了一部分功能。
不得不說,less自有其可取之處。在css編寫的時候,每當碰到圓角,透明等等問題的時候,總在想每次都要寫這么多,不能簡單點么,有了需求,對less的應用也就提上了日程,而且在學習過程中,發(fā)現(xiàn)它的嵌套,混合,變量等等,比自己想的更多,更全面,也是一時感慨不已。
但是,如果css學不好,真的能打包票用的好less么,而less只不過用編程的思想去編寫css,而其本源還是css,思想才是最重要的。
當然,這只是我的淺見,我還沒用過sass和scss,只是聽過,就不多說了。
我始終相信,思想和態(tài)度才是解決問題的關鍵,積跬步,聚小流,終能到達那遠方,加油2016....
歡迎專注北京網(wǎng)站建設公司 瑩晨設計
-
網(wǎng)站建設中圖片如何選擇
日期:2018-10-25 瀏覽次數(shù):3250
-
免費SSL證書申請網(wǎng)站topssl.cn上線
日期:2024-09-23 瀏覽次數(shù):1914
-
如何在北京順義尋找一個踏實的網(wǎng)站建設公司
日期:2023-08-10 瀏覽次數(shù):4977
-
順義網(wǎng)站建設:北京順義網(wǎng)站建設的優(yōu)點
日期:2023-05-25 瀏覽次數(shù):5356
-
選擇網(wǎng)站公司需要考慮哪些因素
日期:2023-05-25 瀏覽次數(shù):4197
-
北京模板建站
日期:2023-03-28 瀏覽次數(shù):4413
-
讓頁面動起來的一些小技巧。
日期:2015-07-20 瀏覽次數(shù):2645
-
創(chuàng)建完美元描述的5個步驟
日期:2019-04-18 瀏覽次數(shù):2628
-
2019年避免的主要網(wǎng)站錯誤
日期:2019-06-06 瀏覽次數(shù):2535
-
UI設計師需要了解的響應式網(wǎng)站設計的屏幕知識
日期:2016-02-21 瀏覽次數(shù):2641
-
網(wǎng)站建設中交互設計留意事項
日期:2018-11-20 瀏覽次數(shù):4489