自實習也有幾個月的時間了,以愛奇藝實習為敲門磚,進入了目前這家公司。如果說當初能進愛奇藝是臨時突擊DIV+CSS的話,目前在這家公司體驗到,任何技術都必須悉知原理,這樣才能做到庖丁解牛,做一個內行的人。css屬性和用法都擺在那里,但如果用得好,除了躬身實踐,提高理論積淀就特別必要了,這本《寫給大家看的css書》快速掃過一遍之后,之前工作遇到過不清楚的問題,一掃而空,所以有必要總結下。
**css層疊的理解**
css是層疊樣式表的英文縮寫,層疊意味著樣式從文檔結構中一個層次傳遞到另一個層次,瀏覽器來決定,某個標簽應用來自哪個來源的樣式屬性。
**樣式的來源有三種:默認瀏覽器樣式表、用戶樣式表、設計者樣式表。**
**默認瀏覽器的樣式表根據瀏覽器不同而不同,編寫樣式時,需要編寫重置樣式表,以便設計者樣式表現統一。**
**用戶樣式表則是用戶在瀏覽器中進行的個性化設置**。
**設計者樣式表則是設計者編寫的,這其中又分為內聯樣式、嵌入樣式、鏈接樣式。內聯樣式和嵌入樣式并沒有做到樣式與內容的分離,因為樣式仍然包含在同一個文檔中。鏈接樣式是唯一一種能夠真正將表現樣式與結構化標記分離的方式。設計者這三種樣式的優先級由高到低為:內聯樣式、嵌入樣式、鏈接樣式。**
**有了以上樣式來源,層疊的工作原理:首先,找到應用每個元素和屬性的全部聲明,按次序和重要性排序,次序即順序,重要性則是屬性的權重和各樣式的優先級,并且先按重要性排序再按順序排序。**
**在文檔層次中對準標簽**
**一個選擇符可以再多條規則中使用。選擇符以自右向左的標簽順序對應,上下文選擇符中只要標簽前面選擇符在文檔層次中位于它上方某處,并以相同順序出現就有效。類和ID選擇符的好處是無需考慮文檔層次的樣式。類和ID應該有節制的使用,常見的是添加給包含標記主要部分的塊級元素,然后以響應的ID和類名開頭的上下文選擇符,訪問該塊級元素中的標簽。**
**子選擇符、相鄰同輩選擇符、屬性選擇符、偽類、偽元素都能為快速定位提供幫助。**
**規則聲明**
**em計算依據是一種字體中字符的寬度,ex等于給定字體中字母x高度。在PC開發中使用em指定字體大小的原因有二:可以充分利用繼承性,其次,方便視力障礙者使用。但樂帝擔心重構中,改變嵌套層級容易引發連帶問題,到目前為止樂帝仍然采用像素單位。**
**字體和文本樣式**
**css產生的意義在于實現了網頁結構與樣式的分離。說到字體的范疇中,類似分形學,依然有結構與樣式分離的屬性。字體屬性主要涉及文字的大小和外觀。文本屬性則主要涉及對字體的處理,例如行高和字母間距。**
**字體集合又分為襯線和無襯線兩種,主要區別在于字符筆畫末端。無襯線sans-serif,更適合web設計。**
**字體屬性font-variant將所有字母轉換成小型大寫字母。其他相關字體屬性如font-weight、font-size、font-style font-family從字面上就可以看出這些均為字體屬性。**
**文本屬性中需要理解一個概念,即css會把一個盒子放到位于元素中文本周圍。這個盒子叫文本盒子。text-indent用于設置文本盒子相對于包含元素的相對位置。常用的首行縮進即此屬性實現。并且text-indent屬性有繼承值,div中設置text-indent值,則所有段落都會繼承這個text-indent值,并且段落繼承縮進值是基于父元素計算之后的結果。**
**letter-sapacing用于調整字母間的距離,word-spacing用于調整單詞之間的距離。**
**text-align設置水平方向上與包含元素對齊方式,因此必須在包含元素上設置此屬性。**
**line-height除了設定行距外,還有實現單行文本居中的技巧。方法是將行高設置為包含元素高度,來實現垂直居中效果。**
**text-transform改變元素中國文本大小寫形式。**
**vertical-align可以相對于基線將文本向上方或下方移動。例如可以構造化學表達式或者方程式。**
**盒模型**
**定位元素分為三部分:盒模型描述標記中存在的每個元素的定位控制。position屬性定義了這些元素在頁面上的位置關系。display屬性定義元素在頁面上是堆疊還是并排及是否出現。**
**盒模型中涉及三個概念:邊框、外邊距(margin)、內邊距(padding)。**
**邊框有三個屬性:寬度、樣式、顏色。邊框會增大元素的尺寸,因此邊框會改變布局。**
**盒子內邊距(padding)指盒子內容與盒子邊框之間的距離。內邊距處于盒子內部,設置背景色延伸可以用內邊距。**
**盒子外邊距(margin)設置盒子與相鄰元素之間的距離。多數塊級元素有默認外邊距,因此需要初始化。**
~~~
*{margin:0;padding:0;}
~~~
盒子外邊距有折疊外邊距的問題,即上下外邊距相遇時,會相互折疊,直到一個元素外邊距接觸到另外一個元素,通俗講即最后外邊距效果是較大的外邊距,而不是累加。
**盒子的大小,通過以上內邊距與外邊距的定義,我們知道內邊距與邊框屬于盒子大小,而外邊距不屬于,通常情況下,設置元素的width是盒子內容的寬度,而不是盒子本身的寬度,如果再設置內邊距和邊框,盒子寬度會增加,這個需要特別注意。**
**浮動和清除**
**浮動的原理:只要設置了寬度的元素,而且頁面有足夠空間,那么相應元素就會像欄一樣排列在一起。**
**在很多布局情況下,我們不想任何元素都向上浮動元素旁邊,也就是讓它保持在浮動元素下方。即[清除浮動](http://bbs.csdn.net/topics/390342944?page=1)。**
~~~
.clearfix:atfer{
content:".";
display:block;
visibility:hidden;
height:0;
clear:both;
}
.clearfix{display:inline-block}
.clearfix{display:block}
~~~
**position屬性**
**如上所述,position屬性定義了元素在頁面中的位置關系。這里要了解一個關鍵概念:定位環境。定位環境就是當我們使用top、left、right、bottom時移動元素時,我們會參照另外一個元素移動它,而這個作為參照的元素就是定位環境。即相對于哪個元素移動。**
**通常開發時,經常設置需要作為需定位元素祖先元素的position屬性為relative,就可以使需要定位的元素修改定位環境。**
**相對定位作為靜態元素,所占據空間及其他元素位置都不變,即只是視覺上移動,并沒有脫離文檔流,文檔中,仍然有此元素的位置。**
**絕對定位與相對定位不同之處在于,它會把元素完全移出文檔流。其他文檔流的內容,會隨著abosolute的設置而緊跟文檔流移動。**
**固定定位也是脫離文檔流,只不過定位環境是視口,即瀏覽器顯示網頁的窗口。**
**display屬性**
**display:none與visiblity:hidden區別在于,前者原先占據的空間都會被移除,而后者元素占據空間會得到保留,只是不顯示。**
**display:block和inline可以根據語義化需要,來針對性的修改默認元素的display屬性。**
**浮動布局**
**對帶有關鍵寬度的元素,好的布局方法是嵌套一層內部div。別為那些構成主分欄的div直接添加視覺樣式,要添加就給他們內部div添加。這也是結構與樣式分形學,進一步細分。**
~~~
#main_wrapper {
width:840px; /* widths of columns will change proportionately as this width is changed */
margin-left:auto; /* centers layout in browser */
margin-right:auto; /* centers layout in browser */
text-align:left; /* resets the centering hack for IE6 on the body tag */
}
#header {
}
#nav {
width:22%; /* this width + content width must total 100% */
float:left; /* floats on nav and content divs make them sit side by side */
}
#content {
float:left; /* floats on nav and content divs make them sit side by side */
width:78%; /* this width + nav width must total 100% */
top:0px;
}
#footer {
clear:both; /* makes the footer sit below whichever column is longest */
}
~~~
**overflow屬性用于控制元素如何處理它們包含的內容,overflow:hidden規則能夠使較窄分欄在上述情況下保持寬度不變。之前樂帝處理圖片等比例放縮就用到此屬性。**
**兩欄流動式布局**
**兩欄流動式布局,設置min-width和max-width屬性,以使布局不會失控,同時給導航欄設置定寬,使內容欄動態改變寬度。**
**三欄布局**
**三欄固定寬度布局,設置浮動同時設置每欄所占百分比寬度大小即可。**
**三欄流動式布局文檔流及關鍵樣式如下:**
****
~~~
#threecolwrap {
float:left;
width:100%;
background:url(../../../chapter_5/code/images/3_col_faux_art_right.gif) repeat-y right;
}
#twocolwrap {
float:left;
width:100%;
display:inline; /* stops IE doubling margin on float*/
<span style="color:#ff0000;">margin-right:-170px; /* CWS - neg margin move */</span>
background: url(../../../chapter_5/code/images/3_col_faux_art_left.gif) repeat-y left;
}
#nav {
float:left;
<span style="color:#ff0000;">width:150px;</span>
display:inline; /* stops IE doubling margin on float*/
}
#content {
width:auto;
<span style="color:#ff0000;">margin-left:150px;
margin-right:170px;</span>
}
#promo {
float:left;
<span style="color:#ff0000;">width:170px;</span>
}
~~~
**通過設置#nav和#promo定寬,并設置content外邊距,實現流動三列布局。**
**設計界面組件**
**表格:表格涉及標簽語義化,添加樣式的目標是盡量添加最少的視覺因素,以保證用戶對數據的理解。table標簽使用border-collapse可以將默認的兩個單元格雙邊框減少到單邊框。**
**表單:表單需要注意的是并列排列的表單控件,從語義關系上,可以使用無序列表來實現對齊等操作。**
**列表:列表也會根據瀏覽器不同而不同,彌補差異的方法是,將列表的外邊距和內邊距都重設置為0,然后重新添加樣式。**
**行內元素應用內邊距和邊框時,不會影響包含元素,解決方法是設置display屬性。**
- 前言
- 前端編程提高之旅(一)----插件
- 前端編程提高之旅(二)----網站常見特效的jquery實現
- 前端編程提高之旅(三)----瀏覽器兼容之IE6
- 前端編程提高之旅(四)----backbone初體驗
- 前端編程提高之旅(五)----寫給大家看的css書
- 前端編程提高之旅(六)----backbone實現todoMVC
- 前端編程提高之旅(七)----marionette實現todoMVC
- 前端編程提高之旅(八)----D3.js數據可視化data join解析
- 前端編程提高之旅(九)----延遲對象
- 前端編程提高之旅(十)----表單驗證插件與cookie插件
- 前端編程提高之旅(十一)----jquery代碼的組織
- 前端編程提高之旅(十二)----position置入值應用
- 前端編程提高之旅(十三)----jquery選擇器
- 前端編程提高之旅(十四)----jquery DOM操作
- 前端編程提高之旅(十五)----jquery事件
- 前端編程提高之旅(十六)----jquery中的動畫
- 前端編程提高之旅(十七)----jquery中表單、表格和ajax
- 前端編程提高之旅(十八)----移動端web流行交互技術方案研究