這是css的第二篇,昨天想了一會要怎麼去組織.
css還是比較有意思的一個玩意,說語言,其實談不上.把css上升到語言層次的,是一些別的玩意.也是很有意思的一些東西,之後會給大家介紹一下.
昨天說到css的解析方式,估計有些人現在還不是很明白這裏面的意思,沒關係,之後會教大家如何去組織好自己css文件
這次要說的是非常重要的一個知識點,盒模型
一.標準盒模型
我們知道一個普通的標籤,比如div,在css中設置顯示時寬度或者高度相關的屬性有border,margin,padding,width等屬性.(注意是顯示時)
每一個標籤其實都可以算是一個盒子.只不過其對應的盒子的一些默認屬性不一樣.
有用過firebug的人適用尋找節點這個工具的時候,發現你們的選擇器實際上個框,這個框顯示的就是這個盒子.
下圖是標準模式的盒模型
解釋下幾個常用的屬性的意義
margin 外邊距
border 邊框大小
padding 內邊距
width 盒子本身的寬度
height 盒子的高度
寫個簡單的例子讓大家明白這個東西是怎麼神奇的進行計算的
div#test{
width:200px;
height:200px;
border:1px solid black;
/**以下兩個屬性是可以簡寫的,具體怎麼縮寫,給大家去百度,同理還有font,background等**/
padding:20px 20px 20px 20px;/**padding:20px;**/
margin:20px 20px 20px 20px;/**margin:20px;**/
}
有興趣可以把這個代碼實踐一下,看一下效果.
好了,我們來計算一下這個盒子
如果這個盒子不是孤零零的,還有一些其他的兄弟姐妹節點,你們看的效果會更加明顯一點.
盒子最後在文檔流裏面是多大呢? 高:200+1+20+20=241px,寬:同理
margin跟padding是比較有意思的屬性,以後會提到,他們的作用很大.比如上下垂直居中,左右居中.都是一些技巧.解決兼容中常用的,居中問題實際上有專門的屬性.
寫css其實跟寫word文檔差不多,只不過css要更加複雜一點.如果你寫css的時候首先想到的word文檔中是怎麼組織文字的,你的語義化思維就比較明顯了
css的技巧其實有很多,我這裏其實也說不周全,具體的話,等css篇幅講完,我會推介大家去看本書.
二.怪異模式
但凡製作web的人,比較頭疼的問題是解決歷史遺留下來的問題.上圖還有一個是ie的解析模式
ie爲什麼把border跟padding計算到width裏面是一個謎團
比如以上的代碼,這個id爲test的盒子呈現的高和寬就是200+20=220,比標準模式要差了很多
這也是爲什麼,前端人員在計算最終的表現高寬時候,青睞padding的原因,bug少.呵呵.
如果你們老闆不要求你們ie6的顯示精度的話,簡單的過一下,不要太離譜就好了,畢竟ie6快要淘汰了,只是在中國,只能呵呵了.
很多會痛恨ie6,爲什麼呢?花費了他們大把的時間去調試可惡的樣式問題.其實不然,只是他們不瞭解ie而已,有興趣的人可以去百度下ie6/7 bug列表
其實怪異的模式一直存在在ie系列的瀏覽器裏面,比如dtd聲明錯誤,標籤未閉合.等等問題,都會導致進入怪異模式.
說句老生常談的話,不要責怪代碼,也不要責怪瀏覽器,在其他的瀏覽器下正常,爲什麼就個把瀏覽器不正常.
以前我寫的代碼,在chrome下是標準的樣子,換到firefox下就不一樣了,像素少了.最後發現是自己代碼寫的有些問題.同理,要想寫得代碼所有瀏覽器都兼容,需要的不
僅僅是耐心,還有一顆不抱怨的心.這個對於前端來說是非常重要的心理素質.如果css就把你搞奔潰了,以後做js,那一定會徹底的瘋掉.
三.調試工具
firefox,chrome,opera都是有現代化的前端武器的,按F12,opera會有些不一樣.C<>+S<>+i,如果我沒記錯的話,具體大家試試看吧.
關於ie的話,ie6是沒有dev工具的,推介大家下載一個iedebugbar,比較好用.
高版本的ie自帶了開發工具,其實ie的開發工具還是很強大的.前端精通一個調試工具還是很有必要的
另外firebug有個js版本的,firebug.lite 有興趣的可以瞭解一下.手頭沒有現成工具的時候,可以湊合用下,只需要引用外網的js,如果外網也上不了,你只能下載下來,然後
配置一下去使用.
當然調試工具是非常多的,新版本的firefox裏面集成了不少自帶的,不比firebug差的工具.挑一個,好好的用就是了.
四.css變成語言
這塊本來打算專門寫一個文章的,但是想想不合適.原因呢,是這東西褒貶不一.算是課外的一些補充吧.有興趣的可以看看.
less 跟sass 這兩個,是css預處理器
看了以後,你一定會這麼想,原來css也可以這麼寫.
一項技術的出現必然有其目的的,那這些工具誕生的意義在什麼地方呢?
1.提高生產效率.
2.代碼層次分明
3.模塊化思想
這一方面,bootstrap做的很好.很多前端不會組織自己的模塊代碼,看看bootstrap,會很有啓發
關於模塊化的一些技巧,我會在結合html,css一起說到.
說這些玩意的缺點吧
1.會造成代碼冗餘.
2.部署會比較麻煩.
3.編譯的時候可能會引起一些未知的錯誤,需要充分的測試.
4.相關的周邊工具不齊全(比如自動提示,你所使用的ide的語法高亮).
ps:很多人青睞sublime text 2的原因在於這玩意的插件實在是多,而且寫前端代碼比較方便.以上這些工具的語言的高亮啥都有.呵呵.
而我就是notepad++,編寫到這些玩意的時候,語法高亮設置爲css.然後就沒了.
還有,新手比較喜歡自動提示,敲個首字符就出來後面的字母,不能說是不好的習慣,只是ide的依賴會比較嚴重,給你個記事本你可能就寫不來代碼
有個朋友說很羨慕,一些人,拿到文本編輯器就可以啪啪啪一頓敲,想都不用想的.原因就在於,他們不是很依賴ide,還有個就是他們熟練了.知道怎麼做是關鍵.工具是其次的.
五.關於設計
很多朋友說,前端需要很好的設計方面的思想,我覺得是不錯的,但這塊的要求確實不高的,因爲設計終歸是由設計人員去做的.寫代碼的同病就是喜歡簡單.
比如我吧,我是紅綠色盲,一樣做了前端很久時間,關於顏色我取值,我比較依賴工具的取色.設計方面,我傾向更加簡潔的設計.
前端的話,不需要關注設計方面的事情.有點流行性的審美觀點,更多的是需要去思考這些看起來花裏花俏的東西需要多少的基礎知識去實現.怎麼樣實現是最好的,最快的,性能
最優秀的.
喜歡emacs,喜歡終端命令,喜歡跟命令打交道的前端,你們傷不起啊.呵呵.