CSS學習筆記

時間 2019-11-19

標籤 css 學習筆記欄目 CSS 简体版

原文原文鏈接

CSS學習筆記

2016年12月15日整理

CSS基礎

Chapter1

在console輸入escape("宋體")  ENTER
    就會出現unicode編碼
    顯示"%u5B8B%u4F53" 就是\5B8B\4F53

    font-family: 中文，英文，最好的是unicode編碼
    eg. font-family: "SimSun","SimHei",sans-serif;

    字體名稱 英文名稱 Unicode 編碼

    宋體   SimSun         \5B8B\4F53
    新宋體   NSimSun         \65B0\5B8B\4F53
    黑體   SimHei         \9ED1\4F53
    微軟雅黑  microsoft yahei \5FAE\8F6F\96C5\9ED1 
    楷體      _GB2312  KaiTi_GB2312   \6977\4F53_GB2312
    隸書   LiSu             \96B6\4E66
    幼園   YouYuan         \5E7C\5706
    華文細黑  STXihei         \534E\6587\7EC6\9ED1
    細明體   MingLiU         \7EC6\660E\4F53
    新細明體  PMingLiU         \65B0\7EC6\660E\4F53

CSS(cascading style sheet) 層疊樣式表

CSS書寫位置：css

1. 行內式：基本不用。代碼可維護性極差，css代碼和html結構沒有實現分離，影響的範圍只有當前標籤  
 <p style="color:red">...</p>
 2. 內嵌式：少用。代碼可維護性較差，沒有實現css代碼與html結構的徹底分離，影響的範圍只有當前頁面
     <head>
     <style type="text/css">
         ...                 
     </style>
     </head>
 3. 外聯式：多用。代碼可維護性高，css與html結構徹底分離，影響範圍廣，當前整個網頁站點
     <link rel="stylesheet" href="CSS/main.css">
 4. 導入式：和外聯式同樣都是導入某一個文件夾的CSS樣式，不過寫法不一樣,而且@import必須寫在全部CSS樣式的前面（不推薦使用）
     @import url(CSS/main.css)

選擇器

基礎選擇器：

標籤選擇器 p { }

類選擇器 .classname { }html

1. 不能以純數字或者以數字開頭定義類名
 2. 不推薦使用漢字定義類名
 3. 不能以特殊符號或者以特殊符號開頭（"_"除外）定義類名
 4. 不建議使用標籤名或者屬性名定義類名
 5. 一個標籤能夠同時調用多個類樣式，多個標籤能夠同時調用一個類樣式
 6. 不要去試圖用一個類名，把某個標籤的全部樣式寫完。這個標籤要多攜帶幾個類，共同形成這個標籤的樣式。
 7. 每個類要儘量小，有「公共」的概念，可以讓更多的標籤使用。

id選擇器 #idname { }瀏覽器

1. id的命名要以字母開頭，能夠有數字、下劃線,大小寫嚴格區別
 2. id名是惟一的，能夠說id是js專用
 3. 一個標籤只能調用一個id樣式

通配符選擇器 * { }
（基本不用，由於會選中全部標籤，效率低下）

複合選擇器 p.classname { }
1. 標籤指定式選擇器/交集選擇器
  p.classname { } &
  p#idname { }（通常寫成 #idname { }）
2. 後代選擇器
  div p { }
  標籤之間必須屬於嵌套關係
3. 並集選擇器/分組選擇器
  div, p { }
選擇器IE兼容問題
1. IE6可以兼容：標籤選擇器、id選擇器、類選擇器、後代、交集選擇器、並集選擇器、通配符
2. IE7可以兼容：兒子選擇器div>p、下一個兄弟選擇器h3+p
3. IE8可以兼容： ul li:first-child ul li:last-child等

Chapter2

標籤的分類：

HTML將標籤分爲容器級和文本級
1. 文本級：p、span、a、b、i、u、em
2. 容器級：div、h系列、li、dt、dd

CSS將標籤分爲塊級元素、行內元素和行內塊元素佈局

1. 塊級元素 `<div>`, `<p>`, `<li>`, `<h1>`...
     1. 元素本身獨佔一行顯示（默認有寬度）；
     2. 能夠設置寬度和高度；
     3. 當嵌套一個塊級元素，子元素若是不設置寬度，那麼該子元素的寬度爲父元素的寬度。
 2. 行內元素 `span`, `a`, `font`, `strong`...
     1. 元素在一行上顯示
     2. 不能直接設置寬度和高度
 3. 行內塊元素 `image`, `input`
     1. 元素在一行上顯示
     2. 能夠設置寬度和高度

全部的文本級標籤，都是行內元素，除了p是個文本級，可是是個塊級元素。
全部的容器級標籤都是塊級元素。
學習

元素之間的轉換
1. display: inline
2. display: block
3. display: inline-block

CSS特性

層疊性：層疊性是一種能力，就是處理衝突的能力。字體

1. 樣式覆蓋。與樣式的**調用順序**沒關，與樣式的**定義順序**有關；
 2. 層疊性發生的前提： 樣式衝突。

繼承性優化

1. 繼承性發生的前提：標籤之間屬於嵌套關係；
 **與文字有關的屬性均可以實現繼承**
 2. 文字顏色color能夠實現繼承
 3. 文字font-xxx 能夠實現繼承
 4. 行高line-hight 能夠實現繼承
 5. text-indent, text-align 能夠實現繼承
 6. 特殊：
     1. `<a href="#"></a>` 不能繼承父元素中的文字顏色（層疊掉了）
     2. `<h1></h1>`        標題標籤不能繼承父元素中的文字大小

優先級（特定性、權重）
1. 數值越大，特定性遠大，規則就越特定
2. 選擇上了，數權重，(id的數量，類的數量，標籤的數量)。
  若是權重同樣，誰寫在後面聽誰的。
3. 沒有選擇上，經過繼承影響的，就近原則，誰描述的近聽誰的。
  若是描述的同樣近，好比選擇器權重，若是權重再同樣重，誰寫在後面聽誰的。網站
```
!important > 行內式 > id > 類/僞類 > 元素名 > 認樣式
 先按做者、讀者、瀏覽器的順序排列，而後若是做者跟讀者出現同分數的，最後出現的規則越優先
```
4. !important使用注意事項
  1. !important提高的是一個屬性，而不是一個選擇器
  2. !important沒法提高繼承的權重，該是0仍是0
  3. !important不影響就近原則
    若是你們都是繼承來的，!importan不能影響就近原則呢，應該按照「就近原則」來計算權重
  4. !important作網站的時候，不容許使用。由於會讓css寫的很亂
繼承的權重爲0，權重會疊加

Chapter3

1. 行高

行高 = 文字大小 + 上間距 + 下間距
行高、字號，通常都是偶數
編碼
行高的做用:
當行高值爲父容器的高度時，可讓父容器中的文字垂直顯示
行高的單位：
1. 單獨給一個元素設置行高
當給一個獨立的元素設置行高值的時候，除了以px爲單位的行高值與文字大小無關，其餘都與文字大小有關（與文字大小的積）
1. 盒子嵌套，給父元素設置行高值，子元素的行高問題
行高能夠實現繼承
當父元素設置的行高值除不帶單位狀況下，都是先與父元素的文字大小相乘最後的結果，被子元素繼承。
當父元素設置的行高值不帶單位時，行高 = 子元素文字大小 * 行高值

表單優化寫法：url

<!-- for裏面寫input的id -->
 <label for="username"></label>
     用戶名： 
 <input type="text" class="username" id="username" />  
 什麼表單元素都有label

繼承的盒子在父盒子寬度範圍內，padding值不會影響該盒子大小。(box-sizing: content-box時)
外邊距合併問題：
1. 當兩個盒子垂直顯示的時候，外邊距以設置的最大值爲準
2. 盒子嵌套（外邊距塌陷）：
  1. 給父盒子設置邊框
  2. 給父盒子設置overflow:hidden;，但會觸發BFC(Block formatting contexts)
行內元素不要給上下的margin和padding
1. 上下的margin和padding會被忽略
2. 左右margin和padding會起做用
margin最好用於兄弟關係之間，padding最好用於父子關係之間
a:link、a:visited都是能夠省略的，a標籤涵蓋了link、visited的狀態

Chapter4

標準流(文檔流)
元素默認的顯示方式就是標準流。

1. 空白摺疊現象：好比，若是咱們想讓img標籤之間沒有空隙，必須緊密鏈接
 2. 高矮不齊，底邊對齊
 3. 自動換行，一行寫不滿，換行寫

三種脫標方法
1. 浮動
2. 絕對定位
3. 固定定位
浮動 float:left/right;
1. 特色： 脫標，貼邊，字圍，收縮
  收縮：一個浮動的元素，若是沒有設置width，那麼將自動收縮爲文字的寬度（這點很是像行內元素）
```
1. 設置了浮動的元素不佔原來的位置（脫標）
 2. 一旦浮動，全部標籤就不區分行內元素、塊級元素，將可以並排，而且可以設置寬高
 3. 可讓塊級元素在一行上顯示    
 4. 浮動能夠行內元素轉化爲行內塊元素
 5. 設置了浮動的元素，影響其後面的元素
 6. 模式轉換的過程當中，能用display就用display
```
2. 做用：
```
1. 浮動用來解決文字圖片環繞問題
 2. 製做導航欄
 3. 網頁佈局
```
3. 清除浮動
```
1. 清除浮動不是刪除浮動，清除浮動指的是清除浮動的影響
 2. 當子元素設置了浮動，父元素沒有高度的時候，形成頁面佈局混亂。  
    這種狀況下進行清除浮動。
```
4. 清除浮動帶來的影響的七種方式
  1. 給浮動元素的父盒子添加height
    工做中用的不多，由於父盒子的高度能被內容撐高
    加高度很麻煩，還要手動，而且不能適應頁面的快速變化
  2. 給浮動元素的父盒子設置 overflow: hidden（該盒子BFC了）
    若是父盒子中有定位的元素，通常不推薦使用該種方式清除浮動，會把超出父盒子的定位的元素隱藏掉。
  3. 使用 clear: both;
    1. 外牆法：在浮動元素的父盒子後面添加一個<div>並設置.clearfix { clear: both; }
      缺點：白白添加一個div，對網頁結構很差。而且浮動元素的父盒子沒高度，不能設置背景顏色跟背景圖片等。
    2. 內牆法：在浮動元素後面直接添加一個<div>並設置.clearfix { clear: both; }
      缺點：白白添加一個div，對網頁結構很差。浮動元素的父盒子有高度，能夠設置背景顏色跟背景圖片等
    3. 直接在浮動元素的父盒子後面的盒子添加一個.clearfix { clear: both; }屬性
      缺點：有一個很是大的、致命的問題，margin失效，兩個div之間，沒有任何的間隙
  4. 使用僞元素清除浮動①
    給父盒子添加 class="clearfix"
```
.clearfix:after{
     content:"";
     display: block;
     height:0;
     line-height:0;
     clear: both;
     visibility: hidden;
 }
 .clearfix{
     zoom: 1;     /* 爲了兼容IE瀏覽器 */
 }
```
  5. 推薦：使用僞元素清除浮動②
```
.clearfix:before,.clearfix:after {
     content: "";
     display: table;
 }
 .clearfix:after { clear: both; }
 .clearfix{
     *zoom:1;/*IE/7/6*/
 }
```
overflow 的使用
overflow: visible/hidden/scroll/auto

定位(position)

靜態定位(static): 元素標準流的顯示方式

絕對定位(absolute)

1. 當給一個單獨的元素設置絕對定位，以瀏覽器左上角（body）爲基準設置定位的。
 2. 若是父盒子沒有設置定位，子盒子設置定位以瀏覽器左上角爲基準設置定位。
 3. 若是父盒子設置定位，子盒子設置定位父盒子左上角爲基準設置定位。
 4. 給盒子設置了絕對定位，該盒子不佔位置（脫標）
 5. 行內元素轉化爲行內塊元素
 6. 絕對定位的兒子，無視參考的那個盒子的padding

相對定位(relative)：微調元素。作絕對定位的參考，子絕父相

1. 元素設置了相對定位後佔原來的位置（沒有脫標）
 2. 設置相對定位以本身的位置爲參照設置位置
 3. 相對定位不能進行元素的模式轉換
 4. 子絕父相（子元素設置絕對定位，父元素設置相對定位）（子絕父絕的其餘狀況也是能夠的）

固定定位(fixed)： 將元素定在瀏覽器窗口，屏幕滾動也不會移動

1. 固定定位不佔位置（脫標）
 2. 將行內元素轉化爲行內塊元素
 3. IE6不兼容。

IE瀏覽器兼容問題
1. IE6，不支持小於12px的盒子，任何小於12px的盒子，在IE6中看都大
  解決辦法：將盒子的字號，設置小（小於盒子的高），好比0px
```
height: 4px;
 _font-size: 0px;
```
2. IE6留了一個後門，就是隻要給css屬性以前，加上下劃線，這個屬性就是IE6認識的專有屬性
3. IE6不支持用 overflow:hidden; 來清除浮動,但支持使用 overflow:hidden;來將溢出盒子的border的東西隱藏
  解決辦法：在後面追加一條 _zoom:1;,_zoom:1;可以觸發IE6瀏覽器專有的hasLayout機制。
```
overflow: hidden;
 _zoom:1;
```
4. IE6雙倍 margin 的bug
  1. 當出現連續浮動的元素，margin和浮動方向相同時，隊首的元素，會雙倍marign
```
解決辦法
 1. 使浮動的方向和margin的方向相反
 2. 使用hack（不必，不能慣着這個IE6）
    單獨給隊首的元素，寫一個一半的_margin
```
5. IE6的3px的bug
  1. 當子盒子使用 margin-right 踢了父盒子時， margin-right 會多出3px
  2. 當出現這個問題，說明你的代碼不標準，由於不容許子盒子使用 margin-right 踢父盒子

Chapter5

標準流下的盒子（必須有明確的width）居中顯示： margin: 0 auto;

定位的盒子居中顯示（重要）：

.father {
     position: relative;
 }
 .child {
     width: (xxx)px;
     height: 100px;
     position: absolute;
     left: 50%;
     margin-left: -(xxx)px;
 }

標籤包含規範

1. div能夠包含任何標準流下的元素
 2. p標籤中不能包含div 和 標題標籤 及列表標籤。
 3. 標題標籤能夠包含其餘標籤。
 4. 行內元素最好不要包含其餘標籤。

規避脫標流

1. 網頁佈局過程當中，能用標準流佈局就用流佈局。
 2. 標準流不能解決用浮動
 3. 浮動不能解決用定位
 4. margin-left: auto;  子盒子會被擠到右邊
    margin-right: auto; 子盒子會被擠到左邊
    能夠將盒子自動衝到另外一邊。

圖片與文字垂直對齊
1. 每一種inlne-block元素，都有一個默認的 vertical-align: baseline
  <img>屬於行內元素，但在表現上更傾向於 inline-block
2. 使用 vertical-align: middle; 能夠將圖片與文字垂直對齊
3. vertical-align 與 inline-block 更搭配
CSS可見性（隱藏的三種方式）：
1. overflow: hidden 將超出部分進行隱藏
2. display: none; 將元素隱藏後不佔位置
3. visibility: hidden; 將元素隱藏後佔原來的位置

logo優化（內容移除文字）

1.  <div>
         文字
     </div> 
     設置div樣式
     div {
         height: 0;
         width: 200px;
         padding-top: 100px;
         overflow: hidden;
     }
 2.  <a href="#">文字</a>
     a {
         display: inline-block;
         width: 200px;
         height: 200px;
         text-indent:-9999em;
     }

精靈圖/雪碧圖(spirit.png)：減小了http請求
1. 是一種處理網頁背景圖像的方式。精靈圖也是一種背景圖片
2. 精靈圖的使用
```
1. 使用fw必定要用打開的方式打開精靈圖
 2. 使用精靈圖做爲背景圖片的時候，常與background-position配合使用
```
3. 製做精靈圖步驟：
  1. 新建，選擇透明文檔
  2. 右下角，樣式，選擇塑料樣式
  3. 製做，另存爲png格式便可

CSS進階

Chapter1

鼠標樣式
1. cursor: pointer 鼠標變成小手
2. cursor: default; 小白
3. cursor : move; 移動
4. cursor : text ; 文本輸入
a無所不能，裏面什麼均可以放
透明
opacity會繼承父元素的 opacity 屬性，而RGBA設置的元素的後代元素不會繼承不透明屬性
1. opacity: 0.5; （默認值爲1）
  1. 讓盒子半透明,裏面的內容也半透明
  2. 指定不透明度。從0.0（徹底透明）到1.0（徹底不透明）
  3. IE不兼容，使用濾鏡filter: alpha(opacity=50);
2. background: rgba(0,0,0,0.5);
  1. 讓盒子背景半透明,裏面的內容不透明
  2. 指定不透明度。從0.0（徹底透明）到1.0（徹底不透明）