資訊專(zhuān)欄INFORMATION COLUMN
摘要：如果我們以為重點(diǎn)看，從上圖中我們可以總結(jié)出學(xué)習(xí)的三個(gè)突破點(diǎn)。這次我們向?yàn)g覽器這位機(jī)器人學(xué)習(xí)一下，看看它寫(xiě)出來(lái)的能給我們什么幫助。對(duì)選擇器來(lái)說(shuō)，有一個(gè)很重要的話(huà)題級(jí)別。布局布局是的重頭戲，每個(gè)系統(tǒng)的布局都有其各自的特點(diǎn)。
眾所周知，css的運(yùn)行環(huán)境是瀏覽器，那么我們有必要先來(lái)認(rèn)識(shí)下瀏覽器。
1.瀏覽器是怎樣工作的有篇文章叫《瀏覽器的工作原理：新式網(wǎng)絡(luò)瀏覽器幕后揭秘》，文中言簡(jiǎn)意賅的介紹了瀏覽器的工作過(guò)程，我們先將css拎出來(lái)說(shuō)說(shuō)。
上圖是webkit內(nèi)核渲染html和css的流程圖。大家可以從圖中看到，html的解析是一條線(xiàn)，css的解析是一條線(xiàn)，兩者會(huì)在某一點(diǎn)結(jié)合，形成最終的視圖。
如果我們以CSS為重點(diǎn)看，從上圖中我們可以總結(jié)出學(xué)習(xí)CSS的三個(gè)突破點(diǎn)。
瀏覽器如何加載和解析CSS——CSS的5個(gè)來(lái)源；
CSS和html如何結(jié)合起來(lái)——選擇器；
CSS能控制哪些顯示方式——盒子模式、浮動(dòng)、定位、背景、字體等；
本系列文章也是按照這個(gè)思路和框架，一步一步展開(kāi)的。
2.css的加載過(guò)程css(Cascading Style Sheets)即層疊樣式表?！皹邮奖怼贝蠹冶容^好理解，那何為“層疊”呢？從字面意思來(lái)看，層疊肯定是需要多層疊加起來(lái)。而這個(gè)“多層CSS”到底有幾層，每一層是什么，我們程序猿用到的將是哪些層？這幾個(gè)問(wèn)題將是我們討論的重點(diǎn)。
另外，這么多層次疊加，如果出現(xiàn)沖突怎么處理，以哪個(gè)為準(zhǔn)？這也是我們討論的重點(diǎn)。
最后，在這些層次中有一個(gè)“瀏覽器默認(rèn)樣式”層，即瀏覽器默認(rèn)的各個(gè)html元素的樣式。這次我們向?yàn)g覽器這位“機(jī)器人”學(xué)習(xí)一下，看看它寫(xiě)出來(lái)的css能給我們什么幫助。
3.css與html的結(jié)合CSS如何與html結(jié)合呢——當(dāng)然是通過(guò)選擇器。CSS提供了多種多樣的選擇器類(lèi)型，而且每個(gè)級(jí)別都在不斷的增加新的選擇器類(lèi)型，使得選擇器更加靈活易用。本系列將拿出一篇文章專(zhuān)門(mén)講解選擇器。
聰明的人類(lèi)也通過(guò)css提供的選擇器在其他臨近的方面開(kāi)疆拓土，例如jquery，zen-coding。
對(duì)css選擇器來(lái)說(shuō)，有一個(gè)很重要的話(huà)題——級(jí)別。在大部分web前端面試題中，你都會(huì)看到css選擇器級(jí)別的判斷問(wèn)題?！禼ss設(shè)計(jì)指南》書(shū)中給出了一個(gè)概念——特指度，而且給出了計(jì)算公式和計(jì)算規(guī)則，還給出了一個(gè)簡(jiǎn)單的背誦口訣。想的真周到。
最后，與選擇器關(guān)聯(lián)密切的還有偽類(lèi)和偽元素，我們也將拿出一篇文章專(zhuān)門(mén)講解偽類(lèi)和偽元素，以及它們最典型的用法。
4.頁(yè)面呈現(xiàn)頁(yè)面呈現(xiàn)可以分為兩類(lèi)——文字，塊。
針對(duì)文字來(lái)說(shuō)，我們可以設(shè)置字體、字號(hào)、加粗、斜體、背景色等等；
對(duì)于塊來(lái)說(shuō)情況比較多，有盒子模型、浮動(dòng)、定位、display、背景等；
本系列會(huì)拿出很大的篇幅去講解其中的基礎(chǔ)知識(shí)，以及他們的一些重點(diǎn)應(yīng)用。
5.布局布局是css的重頭戲，每個(gè)系統(tǒng)的布局都有其各自的特點(diǎn)。無(wú)好無(wú)壞，肯定是各有優(yōu)缺點(diǎn)，不妨拿出幾個(gè)比較典型的例子來(lái)一起分析一下。例如：
經(jīng)典三列布局
Bootstrap柵格布局
百度首頁(yè)布局
微博布局
人人網(wǎng)布局
瀑布流布局
... ...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112118.html
摘要：本系列文章重拾主要參考王福朋知多少，結(jié)合自己的理解和學(xué)習(xí)需要，修改或添加了一些內(nèi)容，難免有失偏頗，僅供自我學(xué)習(xí)參考之用。 工作中或多或少的寫(xiě)一些css，但總感覺(jué)掌握的不夠扎實(shí)，時(shí)而需要查閱一下知識(shí)點(diǎn)。我想，一方面跟缺少科班出身式的系統(tǒng)學(xué)習(xí)有關(guān)，另一方面也苦于一直未尋覓到一套合我胃口教程。直到我讀到了王福朋css知多少系列文章，使我有了重新系統(tǒng)學(xué)習(xí)css的想法。 本系列文章（重拾css）...
摘要：摘自設(shè)計(jì)指南樣式來(lái)源上文中提到，之所以有層疊的概念，是因?yàn)橛卸鄠€(gè)樣式來(lái)源。優(yōu)先級(jí)相同條件下例如都來(lái)自引用樣式，覆蓋的默認(rèn)規(guī)則是后者覆蓋前者，但是有一個(gè)特殊情況，其實(shí)優(yōu)先級(jí)最高。 這一節(jié)就開(kāi)始實(shí)踐上一節(jié)的思路！ 1.層疊的概念 簡(jiǎn)言之，層疊就是瀏覽器對(duì)多個(gè)樣式來(lái)源進(jìn)行疊加，最終確定結(jié)果的過(guò)程。舉一個(gè)簡(jiǎn)單的例子： showImg(https://segmentfault.com/img/b...
摘要：然而學(xué)習(xí)布局，你只要學(xué)習(xí)幾個(gè)手機(jī)端頁(yè)面自適應(yīng)解決方案布局進(jìn)階版附源碼示例前端掘金一年前筆者寫(xiě)了一篇手機(jī)端頁(yè)面自適應(yīng)解決方案布局，意外受到很多朋友的關(guān)注和喜歡。 十分鐘學(xué)會(huì) Fiddler - 后端 - 掘金一.Fiddler介紹 Fiddler是一個(gè)http抓包改包工具，fiddle英文中有欺騙、偽造之意，與wireshark相比它更輕量級(jí)，上手簡(jiǎn)單，因?yàn)橹荒茏ttp和https數(shù)據(jù)...
摘要：和不同，其他三個(gè)元素的位置重新排列了。只要元素會(huì)脫離文檔結(jié)構(gòu)，它就會(huì)產(chǎn)生破壞性，導(dǎo)致父元素坍塌。的絕對(duì)定位元素的定位永遠(yuǎn)是相對(duì)于瀏覽器邊界的，和其他元素沒(méi)有關(guān)系。 1.引言 在學(xué)習(xí)position之前，我們應(yīng)該去思考一個(gè)問(wèn)題：什么情況下我們需要定位？如果沒(méi)有定位將無(wú)法滿(mǎn)足我們?cè)鯓拥男枨螅课覀円?，被人?lèi)創(chuàng)造出來(lái)的每一個(gè)知識(shí)，都有它的用途，都要解決一些之前遇到的問(wèn)題。 如果沒(méi)有定位，我...
摘要：本系列將稍微深入探討一下那個(gè)貌似沒(méi)什么好玩的魔法堂重拾之解構(gòu)魔法堂重拾之圖片作邊框魔法堂重拾之不僅僅是圓角魔法堂重拾之更廣闊的遐想解構(gòu)說(shuō)起我們自然會(huì)想起，而由條緊緊包裹著的邊組成，所以的最小操作單元是。 前言 ?當(dāng)CSS3推出border-radius屬性時(shí)我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來(lái)模擬圓角了，但發(fā)現(xiàn)border-radius還分水平半徑和垂直半徑，然后又發(fā)現(xiàn)...
閱讀 3318·2021-11-16 11:45
閱讀 2670·2021-09-22 15:23
閱讀 574·2021-07-30 14:58
閱讀 470·2019-08-30 15:54
閱讀 2247·2019-08-29 16:19
閱讀 3028·2019-08-29 12:45
閱讀 949·2019-08-23 17:57
閱讀 1803·2019-08-23 17:54
