看《css知多少》的一些總結

問題

一、有些瀏覽器不徹底支持css3，如今能夠用哪一個工具去檢測瀏覽器是否支持，以及支持哪些項？

modernizr:檢測瀏覽器對HTML5和CSS3特性（至於modernizr的介紹，能夠看我另一篇博文HTML5系列四（特徵檢測、Modernizr.js的相關介紹））

二、經常使用的html標籤，它們的display屬性通常默認爲block和inline。有哪些經常使用標籤的display不是block和inline，這些標籤顯示的時候和block/inline有何區別？

 具體display屬性值有以下：

inline能夠理解爲是流，這是沒有大小和形狀的，它的寬度取決於父容器的寬度。針對inline的標籤，你設置寬度和高度是無效的。

如何把inline元素轉換爲塊級元素

1. 對inline元素設置display:block
2. 對inline元素設置float
3. 對inline元素設置position:absolute/fixed

簡單一點的說，通常的文字、圖片它們是inline的，div是block的，而通常的通常的button、input是inline-block的。

因此說inline-block的特色能夠總結爲：外部看來是「流」，可是自身確實一個「塊」。

 

三、一個表格的第一行顯示紅色背景，最後一行顯示藍色背景，中間行使用灰色/白色間隔的背景，如何寫？

利用結構化僞類，就會以下這樣寫

這裏插一句，若是要在各個菜單之間加下劃線，以下圖所示效果

通常人都會用

        ul li
        {
            border-bottom: 1px solid #ccc;
        }
        ul li:last-child
        {
            border-bottom: 0px;
        }

可是事實上還有一種更加方便的方式（若是你對結構化僞類很瞭解的話）

        ul li + li
        {
            border-top: 1px solid #ccc;
        }

這裏補充說明一下以下兩個結構化僞類：

1. 選擇某一個元素緊挨着的兄弟節點，例如 li + li{…}
2. 選擇某一個元素的全部同胞節點，例如 span ~ a{…}

四、僞元素 ::before、::after 是否用過？都是在哪些地方用的？

清除浮動、爲一個div增長一個「三角」

事實上不少圖標通常都很小（它自己就應該是很小的），可是我須要在這個小圖標上增長事件綁定，那在手機端就更加糟糕了，用戶根本點擊不到，那怎麼辦，就能夠利用before after能夠來增長容器的大小

這裏還提一句就是css中屬性content只會在before after裏面起做用，在其它屬性中都沒有效果。因此有時候不要給本身的代碼寫一些無用的屬性，增長瀏覽器的解析時間。

五、css——層疊樣式表，其中的「層疊」該如何理解？

這個沒有什麼好說的，事實上看到不少博文上都是說ID表明100，class表明10，Element表明1，我表示對這種解釋不太贊同，若是想真正瞭解的話能夠去看一下《CSS權威指南》，也能夠去看一下CSS--結構和層疊

六、盒子模型的width實際上是指內容的寬度，不包括padding、border、margin。其實這樣對咱們作css佈局是很不利的，有什麼方法可讓width是所有的寬度？

box-sizing

....

其它還有挺多問題，我一一總結

學習css的思路

瀏覽器是怎麼工做的？

瀏覽器加載了html以後只爲一件東西——dom樹，瀏覽器把html變爲dom樹結構，就完成了對html的結構化。

瀏覽器將載入的html變爲dom樹，可是此時沒有任何顯示樣式。因此顯示的樣式，都是css定義的，瀏覽器只會經過css來渲染視圖樣式

至於後來對視圖的渲染，p是block、br換行，那是整合了css以後的事情。而瀏覽器整合css又是另外一個路線，和解析html是分開的。

html的解析是一條線，css的解析是一條線，二者會在某一點結合，造成最終的視圖。

若是咱們以CSS爲重點看，從上圖中咱們能夠總結出學習CSS的三個突破點。

1. 瀏覽器如何加載和解析CSS——CSS的5個來源；
2. CSS和html如何結合起來——選擇器；
3. CSS能控制那些顯示方式——盒子模式、浮動、定位、背景、字體等；

事實上若是咱們從如上三個方面來了解css的話，思路就豁然開朗了。利用原文博主的一句話就是說藉助別人的力量來提升本身，站在巨人的肩膀上才能看得更遠。

css樣式來源

 

我以前一直到《css權威指南》裏面說的用戶代理樣式一詞很不瞭解，看了博主的文章後才明白，在一些瀏覽器是能夠自定義字號和字體的（用戶在這裏設置了字體和字號以後，它們會覆蓋掉瀏覽器默認的樣式）。

 

 

佈局相關

display:table具備包裹性，除了display:table以外，float及position:absolute也都具備包裹性，什麼叫包裹性，簡單一點的說就是寬度會根據內容而定，包裹的特性其實主要有三個表現：收縮、堅挺、隔絕。

在沒有css3的column-count以前，你們都習慣用display:table-cell來實現多列布局，可是衆所周知table-cell IE六、7不兼容。

縱向margin是會重疊

用div畫下三角

        div
        {
            border: 10px solid;
            border-color: #333 transparent transparent transparent;
        }

 div設置了float以後，其寬度會自動調整爲包裹住內容寬度，而不是撐滿整個父容器。

被設置了float的元素會脫離文檔流。

「清空格」這一特性的根本緣由是因爲float會致使節點脫離文檔流結構。它都不屬於文檔流結構了，那麼它身邊的什麼換行、空格就都和它不要緊的，它就儘可能的往一邊去靠攏，能靠多近就靠多近，這就是清空格的本質。事實上這些空格並無真正消失，只是位於float元素的後面罷了。 

清除浮動的方法

1. 爲父元素添加overflow:hidden
2. 浮動父元素
3. clear:both
4. 兼容各瀏覽器的clear both方法

        .clearfix:after
        {
            content: '';
            display: table;
            clear: both;
        }
        .clearfix
        {
            *zoom: 1;
        }

 看王朋福的css知多少系列的總結