<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??碼云GVP開源項目 12k star Uniapp+ElementUI 功能強大 支持多語言、二開方便! 廣告
                自實習也有幾個月的時間了,以愛奇藝實習為敲門磚,進入了目前這家公司。如果說當初能進愛奇藝是臨時突擊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屬性,以使布局不會失控,同時給導航欄設置定寬,使內容欄動態改變寬度。** **三欄布局** **三欄固定寬度布局,設置浮動同時設置每欄所占百分比寬度大小即可。** **三欄流動式布局文檔流及關鍵樣式如下:** **![](https://box.kancloud.cn/2016-02-24_56cd5e4215716.jpg)** ~~~ #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屬性。**
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看