CSS學習筆記

来源:http://www.cnblogs.com/FireNowiii/archive/2017/01/04/6249198.html
-Advertisement-
Play Games

CSS學習筆記 2016年12月15日整理 CSS基礎 Chapter1 在console輸入escape("宋體") ENTER 就會出現unicode編碼 顯示"%u5B8B%u4F53" 就是\5B8B\4F53 font family: 中文，英文，最好的是unicode編碼 eg. fon ...


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
  1. CSS(cascading style sheet) 層疊樣式表

  2. 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)
  3. 選擇器
    1. 基礎選擇器：
      1. 標簽選擇器 p { }

      2. 類選擇器 .classname { }

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

      3. id選擇器 #idname { }

        1. id的命名要以字母開頭，可以有數字、下劃線,大小寫嚴格區別
2. id名是唯一的，可以說id是js專用
3. 一個標簽只能調用一個id樣式
      4. 通配符選擇器 * { }
        （基本不用，因為會選中所有標簽，效率低下）
    2. 複合選擇器 p.classname { }
      1. 標簽指定式選擇器/交集選擇器
        p.classname { } &
        p#idname { }（一般寫成 #idname { }）
      2. 後代選擇器
        div p { }
        標簽之間必須屬於嵌套關係
      3. 並集選擇器/分組選擇器
        div, p { }
    3. 選擇器IE相容問題
      1. IE6能夠相容： 標簽選擇器、id選擇器、類選擇器、後代、交集選擇器、並集選擇器、通配符
      2. IE7能夠相容： 兒子選擇器div>p、下一個兄弟選擇器h3+p
      3. IE8能夠相容： ul li:first-child ul li:last-child等

Chapter2

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

    2. CSS將標簽分為塊級元素、行內元素和行內塊元素

      1. 塊級元素 `<div>`, `<p>`, `<li>`, `<h1>`...
    1. 元素自己獨占一行顯示（預設有寬度）；
    2. 可以設置寬度和高度；
    3. 當嵌套一個塊級元素，子元素如果不設置寬度，那麼該子元素的寬度為父元素的寬度。
2. 行內元素 `span`, `a`, `font`, `strong`...
    1. 元素在一行上顯示
    2. 不能直接設置寬度和高度
3. 行內塊元素 `image`, `input`
    1. 元素在一行上顯示
    2. 可以設置寬度和高度

    3. 所有的文本級標簽，都是行內元素，除了p是個文本級，但是是個塊級元素。
      所有的容器級標簽都是塊級元素。

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

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

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

    2. 繼承性

      1. 繼承性發生的前提：標簽之間屬於嵌套關係；
**與文字有關的屬性都可以實現繼承**
2. 文字顏色color可以實現繼承
3. 文字font-xxx 可以實現繼承
4. 行高line-hight 可以實現繼承
5. text-indent, text-align 可以實現繼承
6. 特殊：
    1. `<a href="#"></a>` 不能繼承父元素中的文字顏色（層疊掉了）
    2. `<h1></h1>`        標題標簽不能繼承父元素中的文字大小
  4. 優先順序（特定性、權重）
    1. 數值越大，特定性遠大，規則就越特定
    2. 選擇上了，數權重，(id的數量，類的數量，標簽的數量)。
      如果權重一樣，誰寫在後面聽誰的。

    3. 沒有選擇上，通過繼承影響的，就近原則，誰描述的近聽誰的。
      如果描述的一樣近，比如選擇器權重，如果權重再一樣重，誰寫在後面聽誰的。

      !important > 行內式 > id > 類/偽類 > 元素名 > 認樣式
先按作者、讀者、瀏覽器的順序排列，然後如果作者跟讀者出現同分數的，最後出現的規則越優先
    4. !important使用註意事項
      1. !important提升的是一個屬性，而不是一個選擇器
      2. !important無法提升繼承的權重，該是0還是0
      3. !important不影響就近原則
        如果大家都是繼承來的，!importan不能影響就近原則呢，應該按照“就近原則”來計算權重
      4. !important做網站的時候，不允許使用。因為會讓css寫的很亂
  5. 繼承的權重為0，權重會疊加

Chapter3

1. 行高

  1. 行高 = 文字大小 + 上間距 + 下間距
    行高、字型大小，一般都是偶數

  2. 行高的作用:
    當行高值為父容器的高度時，可以讓父容器中的文字垂直顯示
  3. 行高的單位：
    1. 單獨給一個元素設置行高
    當給一個獨立的元素設置行高值的時候，除了以px為單位的行高值與文字大小無關，其他都與文字大小有關（與文字大小的積）
    1. 盒子嵌套，給父元素設置行高值，子元素的行高問題
    行高可以實現繼承
    當父元素設置的行高值除不帶單位情況下，都是先與父元素的文字大小相乘最後的結果，被子元素繼承。
    當父元素設置的行高值不帶單位時，行高 = 子元素文字大小 * 行高值

  4. 表單優化寫法：

    <!-- for裡面寫input的id -->
<label for="username"></label>
    用戶名： 
<input type="text" class="username" id="username" />  
什麼表單元素都有label
  5. 繼承的盒子在父盒子寬度範圍內，padding值不會影響該盒子大小。(box-sizing: content-box時)
  6. 外邊距合併問題：
    1. 當兩個盒子垂直顯示的時候，外邊距以設置的最大值為準
    2. 盒子嵌套（外邊距塌陷）：
      1. 給父盒子設置邊框
      2. 給父盒子設置overflow:hidden;，但會觸發BFC(Block formatting contexts)
  7. 行內元素不要給上下的margin和padding
    1. 上下的margin和padding會被忽略
    2. 左右margin和padding會起作用
  8. margin最好用於兄弟關係之間，padding最好用於父子關係之間

  9. a:link、a:visited都是可以省略的，a標簽涵蓋了link、visited的狀態

    Chapter4

  10. 標準流(文檔流)
    元素預設的顯示方式就是標準流。

    1. 空白摺疊現象：比如，如果我們想讓img標簽之間沒有空隙，必須緊密連接
2. 高矮不齊，底邊對齊
3. 自動換行，一行寫不滿，換行寫
  11. 三種脫標方法
    1. 浮動
    2. 絕對定位
    3. 固定定位
  12. 浮動 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*/
}
  13. overflow 的使用
    overflow: visible/hidden/scroll/auto
  14. 定位(position)
    1. 靜態定位(static): 元素標準流的顯示方式

    2. 絕對定位(absolute)

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

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

      1. 元素設置了相對定位後占原來的位置（沒有脫標）
2. 設置相對定位以自己的位置為參照設置位置
3. 相對定位不能進行元素的模式轉換
4. 子絕父相（子元素設置絕對定位，父元素設置相對定位）（子絕父絕的其他情況也是可以的）

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

      1. 固定定位不占位置（脫標）
2. 將行內元素轉化為行內塊元素
3. IE6不相容。
  15. 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

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

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

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

  3. 標簽包含規範

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

  4. 規避脫標流

    1. 網頁佈局過程中，能用標準流佈局就用流佈局。
2. 標準流不能解決用浮動
3. 浮動不能解決用定位
4. margin-left: auto;  子盒子會被擠到右邊
   margin-right: auto; 子盒子會被擠到左邊
   可以將盒子自動衝到另一邊。
  5. 圖片與文字垂直對齊
    1. 每一種inlne-block元素，都有一個預設的 vertical-align: baseline
      <img>屬於行內元素，但在表現上更傾向於 inline-block
    2. 使用 vertical-align: middle; 可以將圖片與文字垂直對齊
    3. vertical-align 與 inline-block 更搭配
  6. CSS可見性（隱藏的三種方式）：
    1. overflow: hidden 將超出部分進行隱藏
    2. display: none; 將元素隱藏後不占位置
    3. visibility: hidden; 將元素隱藏後占原來的位置

  7. 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;
    }
  8. 精靈圖/雪碧圖(spirit.png)：減少了http請求
    1. 是一種處理網頁背景圖像的方式。精靈圖也是一種背景圖片

    2. 精靈圖的使用

      1. 使用fw一定要用打開的方式打開精靈圖
2. 使用精靈圖作為背景圖片的時候，常與background-position配合使用
    3. 製作精靈圖步驟：
      1. 新建，選擇透明文檔
      2. 右下角，樣式，選擇塑料樣式
      3. 製作，另存為png格式即可

CSS進階

Chapter1

  1. 滑鼠樣式
    1. cursor: pointer 滑鼠變成小手
    2. cursor: default; 小白
    3. cursor : move; 移動
    4. cursor : text ; 文本輸入
  2. a無所不能，裡面什麼都可以放
  3. 透明
    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（完全不透明）
        

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 頁面佈局class常見命名規範
    頭：header 內容：content/container 尾：footer 導航：nav 側欄：sidebar 欄目：column 頁面外圍控制整體佈局寬度：wrapper 左右中：left right center 登錄條：loginbar 標誌：logo 廣告：banner 頁面主體：main ...
  • 談談一些有趣的CSS題目（十一）-- reset.css 知多少？
    開本系列，談談一些有趣的 CSS 題目，題目類型天馬行空，想到什麼說什麼，不僅為了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細節。 解題不考慮相容性，題目天馬行空，想到什麼說什麼，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習一下吧。 不斷更新，不斷更新，不斷更新，重要的事情說三遍 ...
  • 推薦10款超級有趣的HTML5小游戲
    HTML5的發展速度比任何人的都想像都要更快。更加強大有效的和專業的解決方案已經被開發......甚至在游戲世界中！這裡跟大家分享有10款超級趣味的HTML5游戲，希望大家能夠喜歡！ Kern Type, the kerning game 幫助你學習kern游戲的線上小游戲 Z-Type impac ...
  • 一起來玩echarts系列（一）------箱線圖的分析與繪製
    一、箱線圖 Box plot 箱線圖一般被用作顯示數據分散情況。具體是計算一組數據的 、`25%分位數 75%分位數 上邊界 下邊界`，來將數據從大到小排列，直觀展示數據整體的分佈情況。 大部分正常數據在箱體中，上下邊界之外的就是異常數據了。 上下邊界的計算公式是： UpperLimit=Q3+1. ...
  • 跑馬燈效果
    html 代碼<div id="outer"> <span>#</span> <div id="inner"> 德國名企德司達被中國上市公司龍盛集團收購後，其下屬的德司達（南京）染料有限公司因夜間向運河偷排廢酸2698.1噸，公司被揚州中級法院判決構成污染環境罪 </div></div>JavaSc ...
  • 快捷選時間
    舉個慄子<script> var now = new Date();// now.setDate(now.getDate()-num);// var result = '';// result+=now.getFullYear()+'-'+// (now.getMonth()+1)+'-'+// ( ...
  • Javascript學習筆記
    Javascript 2016年12月19日整理 JS基礎 Chapter1 1. JS是一門運行在瀏覽器客戶端的腳本編程語言，前臺語言 1. 組成部分 1. ECMAscript JS標準 2. DOM 通過JS操作網頁元素 3. BOM 通過調用API操作瀏覽器 2. 特點： 封裝，繼承，多態 ...
  • HTML 5 應用程式緩存manifest
    什麼是應用程式緩存（Application Cache）？ HTML5 引入了應用程式緩存，這意味著 web 應用可進行緩存，並可在沒有網際網路連接時進行訪問。 應用程式緩存為應用帶來三個優勢： 離線瀏覽 - 用戶可在應用離線時使用它們 速度 - 已緩存資源載入得更快 減少伺服器負載 - 瀏覽器將只從 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類