看《css知多少》的一些總結－互聯網

文章出處

問題

1、有些瀏覽器不完全支持css3，現在可以用哪個工具去檢測瀏覽器是否支持，以及支持哪些項？

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

2、常用的html標簽，它們的display屬性一般默認為block和inline。有哪些常用標簽的display不是block和inline，這些標簽顯示的時候和block/inline有何區別？

具體display屬性值有如下：

inline可以理解為是流，這是沒有大小和形狀的，它的寬度取決于父容器的寬度。針對inline的標簽，你設置寬度和高度是無效的。

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

對inline元素設置display:block
對inline元素設置float
對inline元素設置position:absolute/fixed

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

所以說inline-block的特點可以總結為：外部看來是“流”，但是自身確實一個“塊”。

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

利用結構化偽類，就會如下這樣寫

這里插一句，如果要在各個菜單之間加下劃線，如下圖所示效果

一般人都會用

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

但是事實上還有一種更加方便的方式（如果你對結構化偽類很了解的話）

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

這里補充說明一下如下兩個結構化偽類：

選擇某一個元素緊挨著的兄弟節點，例如 li + li{…}
選擇某一個元素的所有同胞節點，例如 span ~ a{…}

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

清除浮動、為一個div增加一個“三角”

事實上很多圖標一般都很小（它本身就應該是很小的），但是我需要在這個小圖標上增加事件綁定，那在手機端就更加糟糕了，用戶根本點擊不到，那怎么辦，就可以利用before after可以來增加容器的大小

這里還提一句就是css中屬性content只會在before after里面起作用，在其它屬性中都沒有效果。所以有時候不要給自己的代碼寫一些無用的屬性，增加瀏覽器的解析時間。

5、css——層疊樣式表，其中的“層疊”該如何理解？

這個沒有什么好說的，事實上看到很多博文上都是說ID代表100，class代表10，Element代表1，我表示對這種解釋不太贊同，如果想真正了解的話可以去看一下《CSS權威指南》，也可以去看一下CSS--結構和層疊

6、盒子模型的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的三個突破點。

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

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

css樣式來源

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

布局相關

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

在沒有css3的column-count之前，大家都習慣用display:table-cell來實現多列布局，但是眾所周知table-cell IE6、7不兼容。

縱向margin是會重疊

用div畫下三角

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

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

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

“清空格”這一特性的根本原因是由于float會導致節點脫離文檔流結構。它都不屬于文檔流結構了，那么它身邊的什么換行、空格就都和它沒關系的，它就盡量的往一邊去靠攏，能靠多近就靠多近，這就是清空格的本質。事實上這些空格并沒有真正消失，只是位于float元素的后面罷了。

清除浮動的方法

為父元素添加overflow:hidden
浮動父元素
clear:both
兼容各瀏覽器的clear both方法

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

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