成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

重拾css(3)——學(xué)習(xí)css的思路

Kaede / 3091人閱讀

摘要：如果我們以為重點看，從上圖中我們可以總結(jié)出學(xué)習(xí)的三個突破點。這次我們向瀏覽器這位機器人學(xué)習(xí)一下，看看它寫出來的能給我們什么幫助。對選擇器來說，有一個很重要的話題級別。布局布局是的重頭戲，每個系統(tǒng)的布局都有其各自的特點。

眾所周知，css的運行環(huán)境是瀏覽器，那么我們有必要先來認識下瀏覽器。

1.瀏覽器是怎樣工作的

有篇文章叫《瀏覽器的工作原理：新式網(wǎng)絡(luò)瀏覽器幕后揭秘》，文中言簡意賅的介紹了瀏覽器的工作過程，我們先將css拎出來說說。

上圖是webkit內(nèi)核渲染html和css的流程圖。大家可以從圖中看到，html的解析是一條線，css的解析是一條線，兩者會在某一點結(jié)合，形成最終的視圖。

如果我們以CSS為重點看，從上圖中我們可以總結(jié)出學(xué)習(xí)CSS的三個突破點。

瀏覽器如何加載和解析CSS——CSS的5個來源；

CSS和html如何結(jié)合起來——選擇器；

CSS能控制哪些顯示方式——盒子模式、浮動、定位、背景、字體等；

本系列文章也是按照這個思路和框架，一步一步展開的。

2.css的加載過程

css(Cascading Style Sheets)即層疊樣式表?！皹邮奖怼贝蠹冶容^好理解，那何為“層疊”呢？從字面意思來看，層疊肯定是需要多層疊加起來。而這個“多層CSS”到底有幾層，每一層是什么，我們程序猿用到的將是哪些層？這幾個問題將是我們討論的重點。

另外，這么多層次疊加，如果出現(xiàn)沖突怎么處理，以哪個為準(zhǔn)？這也是我們討論的重點。

最后，在這些層次中有一個“瀏覽器默認樣式”層，即瀏覽器默認的各個html元素的樣式。這次我們向瀏覽器這位“機器人”學(xué)習(xí)一下，看看它寫出來的css能給我們什么幫助。

3.css與html的結(jié)合

CSS如何與html結(jié)合呢——當(dāng)然是通過選擇器。CSS提供了多種多樣的選擇器類型，而且每個級別都在不斷的增加新的選擇器類型，使得選擇器更加靈活易用。本系列將拿出一篇文章專門講解選擇器。

聰明的人類也通過css提供的選擇器在其他臨近的方面開疆拓土，例如jquery，zen-coding。

對css選擇器來說，有一個很重要的話題——級別。在大部分web前端面試題中，你都會看到css選擇器級別的判斷問題?！禼ss設(shè)計指南》書中給出了一個概念——特指度，而且給出了計算公式和計算規(guī)則，還給出了一個簡單的背誦口訣。想的真周到。

最后，與選擇器關(guān)聯(lián)密切的還有偽類和偽元素，我們也將拿出一篇文章專門講解偽類和偽元素，以及它們最典型的用法。

4.頁面呈現(xiàn)

頁面呈現(xiàn)可以分為兩類——文字，塊。

針對文字來說，我們可以設(shè)置字體、字號、加粗、斜體、背景色等等；

對于塊來說情況比較多，有盒子模型、浮動、定位、display、背景等；

本系列會拿出很大的篇幅去講解其中的基礎(chǔ)知識，以及他們的一些重點應(yīng)用。

5.布局

布局是css的重頭戲，每個系統(tǒng)的布局都有其各自的特點。無好無壞，肯定是各有優(yōu)缺點，不妨拿出幾個比較典型的例子來一起分析一下。例如：

經(jīng)典三列布局

Bootstrap柵格布局

百度首頁布局

微博布局

人人網(wǎng)布局

瀑布流布局

... ...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/112118.html

相關(guān)文章

  • 重拾css(1)——寫在前邊的話

    摘要：本系列文章重拾主要參考王福朋知多少，結(jié)合自己的理解和學(xué)習(xí)需要，修改或添加了一些內(nèi)容，難免有失偏頗，僅供自我學(xué)習(xí)參考之用。 工作中或多或少的寫一些css，但總感覺掌握的不夠扎實，時而需要查閱一下知識點。我想，一方面跟缺少科班出身式的系統(tǒng)學(xué)習(xí)有關(guān)，另一方面也苦于一直未尋覓到一套合我胃口教程。直到我讀到了王福朋css知多少系列文章，使我有了重新系統(tǒng)學(xué)習(xí)css的想法。 本系列文章（重拾css）...

    li21 評論0 收藏0

  • 重拾css(4)——樣式來源與層疊規(guī)則

    摘要：摘自設(shè)計指南樣式來源上文中提到，之所以有層疊的概念，是因為有多個樣式來源。優(yōu)先級相同條件下例如都來自引用樣式，覆蓋的默認規(guī)則是后者覆蓋前者，但是有一個特殊情況，其實優(yōu)先級最高。 這一節(jié)就開始實踐上一節(jié)的思路！ 1.層疊的概念 簡言之，層疊就是瀏覽器對多個樣式來源進行疊加，最終確定結(jié)果的過程。舉一個簡單的例子： showImg(https://segmentfault.com/img/b...

    gityuan 評論0 收藏0

  • 小技巧 - 收藏集 - 掘金

    摘要：然而學(xué)習(xí)布局，你只要學(xué)習(xí)幾個手機端頁面自適應(yīng)解決方案布局進階版附源碼示例前端掘金一年前筆者寫了一篇手機端頁面自適應(yīng)解決方案布局，意外受到很多朋友的關(guān)注和喜歡。 十分鐘學(xué)會 Fiddler - 后端 - 掘金一.Fiddler介紹 Fiddler是一個http抓包改包工具，fiddle英文中有欺騙、偽造之意，與wireshark相比它更輕量級，上手簡單，因為只能抓http和https數(shù)據(jù)...

    A Loity 評論0 收藏0

  • 重拾css(11)——position

    摘要：和不同，其他三個元素的位置重新排列了。只要元素會脫離文檔結(jié)構(gòu)，它就會產(chǎn)生破壞性，導(dǎo)致父元素坍塌。的絕對定位元素的定位永遠是相對于瀏覽器邊界的，和其他元素沒有關(guān)系。 1.引言 在學(xué)習(xí)position之前，我們應(yīng)該去思考一個問題：什么情況下我們需要定位？如果沒有定位將無法滿足我們怎樣的需求？我們要知道，被人類創(chuàng)造出來的每一個知識，都有它的用途，都要解決一些之前遇到的問題。 如果沒有定位，我...

    劉明 評論0 收藏0

  • CSS魔法堂：重拾Border之——解構(gòu)Border

    摘要：本系列將稍微深入探討一下那個貌似沒什么好玩的魔法堂重拾之解構(gòu)魔法堂重拾之圖片作邊框魔法堂重拾之不僅僅是圓角魔法堂重拾之更廣闊的遐想解構(gòu)說起我們自然會想起，而由條緊緊包裹著的邊組成，所以的最小操作單元是。 前言 ?當(dāng)CSS3推出border-radius屬性時我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來模擬圓角了，但發(fā)現(xiàn)border-radius還分水平半徑和垂直半徑，然后又發(fā)現(xiàn)...

    lingdududu 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<