css进阶读书笔记
說明：努力在十一左右，最遲雙11之前掌握所有css知識要點
一、摘自《寫給大家看的CSS書（第2版）》（雖然書比較舊，09年版的，但對于我這種剛入門的小菜鳥
? ? ? ? 來說，能學到的還是挺多的）
?1.css中層疊樣式概括：
? （1）包含ID的選擇符覆蓋包含累的選擇符，包含類的選擇符覆蓋只包含標簽的選擇符
? （2）如果層疊中的不同位置為同一個標簽的同一個屬性多次定義了值，那么，內聯樣式覆蓋嵌入樣式，
? ? ? ? ? 嵌入樣式覆蓋樣式表中的樣式。但是，當選擇符更有針對性時，無論樣式處于什么位置，都是優
? ? ? ? ? 先適用的——也就是說，（1）優先于（2）
? （3）無論針對性如何，定義的樣式都覆蓋繼承的樣式。
?2.盒子模型的結論：
? （1）特定尺寸的盒子（寬度已定）會隨著內邊距、邊框及外邊距的添加而擴展，進而占據更多的水平空間。
? ? ? ? ? ?實際上，通過width屬性設置的是盒子內容的寬度，而不是盒子本身的寬度。
? （2）無尺寸限制的元素（未設置寬度）會擴展到與它的包含元素同寬。因此，為無尺寸限制的元素添加水
? ? ? ? ? ?平外邊距、邊框、和內邊距，會導致元素內容的寬度變化。
3.絕對定位元素的定位環境是body，所以絕對定位的元素會隨著頁面滾動而移動——它需要保持與body元素
? ?的相對關系，而body元素會隨著頁面滾動而移動。
4.當外部div采取了相對定位之后，絕對定位的后代元素就會按照自己top和left屬性的設置，相對于外部div進行定位。
? 即相對定位的元素必須是絕對定位的祖先元素，才有資格成為定位環境。
5.當把一個元素的display屬性設置為none時，該元素以及嵌套在其中的任何元素，都不會顯示在頁面中。而且，這個
? ?元素原先占據的任何空間都會被移除，就像相關的標記不存在一樣。而visibility屬性恰好相對，后者只有visible和
? ?hidden兩個值。如果一個元素的visibility屬性設置為hidden，會隱藏該元素，但在這個元素占據的空間仍然會得到保留。
6.盡量不要為那些構成主分欄的div直接添加視覺樣式，要按照需要為它們各自的“內部”div添加樣式。
7.當使用Strict類型的DOCTYPE時，不能單獨把行內元素放到頁面中——這是XML中不可改變的規則，該規則要求必須
? ?把行內元素包含在適當的塊級元素中。
8.實際上，在為行內元素應用內邊距和邊框時，它們不會像我們期望那樣影響包含元素。行內元素垂直內邊距不會像塊
? 級元素那樣，沿著文本層次向上傳遞到包含元素。因而包含元素也不會調整自身大小來容納被行內元素占用的更大區域。
? 簡單的補救方法就是把行內元素轉換為塊級元素（display:block;）。
二、摘自《精通CSS+DIV網頁樣式與布局》（08年版，哎，校圖書館借的，比上本還要舊，但還能看，挺不錯的）
?1.word-spacing與letter-spacing的區別：都用來添加它們對應元素的空白，但letter-spacing增加字母之間的空白，而
? word-spacing增加單詞之間的空白。注意：word-spacing對中文無效。
?2.<ul> 和<li>中的list-style-type屬性值沒用明顯區別，但用時盡量只用一種方式。
?3.在很多瀏覽器下，ID選擇器也可以用于多個標記，但這樣做是錯誤的。因為每個標記定義的id不只是CSS可以調用，
? JAVASCRIPT等其它腳本語言同樣也可以調用。如果一個HTML中有兩個相同的id的標記，那么將會導致Javascript在
? 查找id時出錯，eg：函數getElementByID().
?4.ID選擇器不支持像class選擇器那樣的多風格同時使用，類似“id=“one two””是完全錯誤的語法。
?5.很多設計者喜歡使用各種各樣的字體來給頁面添彩，但這些字體在大多數用戶的機器上都沒用安裝。最直接的方式就是
? 將是用了生僻字體的部分，用圖形軟件制作成小的圖片，再加載到頁面中。
6.再設置一個段落文字的顏色時，通常可以利用<span>標記，將需要的部分進行單獨標注，然后再設置<span>標記的顏色屬性
? <span>僅僅是一個行內元素，在它的前后不會換行。<span>沒有結構上的意義，純粹是應用樣式，當其他行內元素都不合適
? 時，就可以使用<span>元素。而<div>是一個塊級元素，它包圍的元素會自動換行。通常情況下，對于頁面中大的區塊使用<div>
? 標記，而<span>標記僅僅用于需要單獨設置樣式風格的小元素，例如一個單詞、一幅圖片和一個超鏈接等。
7.在CSS段落文字的垂直對齊方式是通過vertical-align屬性來具體實現的。對于文字本身而言，該屬性對于塊級元素并不起作用，
? 例如<p>和<div>標記。但對于表格而言，這個屬性則顯得十分重要
8.圖片水平對齊的方式與文字水平對齊的方式基本相同，分為左、中、右3種。不同的是圖片的水平對齊通常不能直接通過設置
? 圖片的text-align屬性，而是通過設置其父元素的該屬性來實現的。
9.各個瀏覽器之間顯示的差異通常都是因為各瀏覽器對部分CSS屬性的默認值不同導致的，通常的解決辦法就是指定該值，而
? 不讓瀏覽器使用默認值。
10.通過“display:block:”語句，可以將超鏈接設置成塊元素，當鼠標進入該塊的任何部分時都會被激活，而不是僅在文字上方時才被激活
11.在進行整個網頁排版時，最下端的“腳注”部分通常需要設置clear屬性，從而消除正文部分各種排版方法對它的影響。
12.內聯元素是無法設置寬度和高度的，width和height只是針對塊狀元素。
13.如果用定位來布局頁面，父級元素的position屬性必須為relative，而定位于父級內部某個位置的元素，最好用absolute，因為它不
受父級元素的padding的屬性影響，當然你也可以用relative，計算的時候不要忘記計算padding的值。
三、摘自《CSS權威指南》（第三版）：
1.CSS要求@import指令出現在樣式表中的其他規則之前。如果一個@import出現在其他規則（如body，color，red）之后，兼容用戶代理會將其忽略。
2.為了實現CSS中的向后可訪問性，建議將聲明包含在一個注釋標記中。注釋標記的開始標記（<!--）緊接著出現在style開始標記之后，注釋標記
（-->）出現在style結束之前。這樣一來，較老的瀏覽器不僅會將style標記完全忽略，還會忽略聲明，因為HTML注釋不會顯示出來。與此同時，能理解
CSS的瀏覽器仍能正常地讀取樣式表。
轉載于:https://www.cnblogs.com/qingguo/p/5686317.html
總結
- 上一篇： UITableView 学习笔记
- 下一篇： CentOS 6.5 伪分布安装