學習筆記二之css

剛學完江哥的前端視頻的HTML部分，就迫不及待來重溫css了。

01

感想

學完HTML部分，對HTML整體掌握差不多之后，我繼續了我的css學習。

css之前也有學過，不過腦子里思緒很亂，包括自己看書以及在網站上看各種老師的視頻，結果下來真的感覺很糟糕，可能一方面是每個老師的講課風格不同使用的軟件也不同導致貪吃的我最后不消化了，一方面可能也是因為自己沒有做好整理吧。。。總之，很繁亂，有了看江哥HTML5的經驗，這一次我汲取了以往的經驗不再眉毛胡子一把抓了，我學會了整合優化，更是注重條理化分析記憶，整體下來這次感覺還nice。通過這次，我明白老師真的很重要，在網上各種不連續的視頻真的是費心費力費神最后還白費勁，前提是如我這般笨。。。。。所以，個人覺得最好還是能找一個專業的老師帶一帶，能夠從一而終學到底，我很期待即將到來的學習之旅。

前面學了HTML，知道HTML負責給標簽添加語義，從結構上定義網頁，而css則負責給網頁添加各種樣式，即 Cascading Style Sheets。感覺css比HTML復雜多了，首先就是標簽都變得復雜了，不像HTML那樣很簡短，而且每個大塊都是一大堆的東西要記憶，比HTML更繁亂。這一次跟著南江老師學習css,因為老師的語言很通俗，知識點后先易后難先淺層后深入倒是很好理解，再用實際案例鋪開知識點，而且還有清晰的大綱，記憶難度也小了很多。而且南江老師講的知識點很全面，比如清除浮動，以前看那么多類視頻都只知道一種清除浮動的方式，我是第一次在老師這里了解到原來還有那么多種別的方式，大開眼界。。最后不得不說，江哥介紹的快捷鍵真的很快捷，很like，頓時感覺很專業的樣子，不再像以前學校上課感覺老師多厲害那樣，原來某種程度上我和大牛只差了個快捷鍵。。。

總體看來，還是重在整合。css部分，文本屬性，文字屬性，顏色屬性，以及背景屬性這幾個繁小知識點，盡管繁簡，卻是用得最多的，幾乎每個網頁上都是要用的。然后就是大塊的知識點了，因為css重點在樣式，所以重要的該屬css選擇器和css屬性了。選擇器包括三大基本選擇器，標簽選擇器，類選擇器和id選擇器，以及由三大基本選擇器延伸出的后代選擇器，子元素選擇器，交集選擇器，并集選擇器，兄弟選擇器，屬性選擇器，序選擇器和通配符選擇器。css的三大特性又是另一大塊，還好是重在理解的。對于網頁，有顯示模式以及如何轉換網頁的顯示模式。然后就是邊框，外邊距和內邊距一起組成的大盒子，成了css的形象比喻，css成了一個大盒子，里面裝滿了各種小盒子，每個小盒子都可以拿來放在網頁上，還可以在各種盒子里放各種東西。以及由此產生的盒子浮動問題和清除浮動問題。這樣想來，學會css還是不難的，但同樣，練習是重點，只說不練只會眼高手低。

學HTML5就選李南江，選培訓機構我只選小碼哥

02

筆記

• css文字屬性

  
  
  
  

• css文本屬性

  
  
  
  

• css顏色屬性

  
  
  
  

• css選擇器

  • 后代選擇器和子元素選擇器

    
    
    
    

• 交際選擇器和并集選擇器

  
  
  
  

• 兄弟選擇器

  
  
  
  

• 序選擇器

  
  
  
  
  
  

• 屬性選擇器

  
  
  
  

• 通配符選擇器

  
  

• css三大屬性

  • 繼承性：給父元素設置一些屬性，字元素也可以使用
  • 層疊性：處理屬性間的沖突設置
  • 優先級：解決出現層疊時如何層疊的問題
    • 是否是間接選中（即繼承）？如果是間接選中，那么誰離目標近就聽誰的
  • 是否是相同選擇器？如果是直接選中，并且都是同類型的選擇器，那么就是誰寫在后面聽誰的
  • 如果都是直接選中，并且不是同類型的的選擇器，那么按照id>類>標簽>通配符>繼承>瀏覽器默認的順序展示效果。
  • ！important :提升指定屬性的優先級為最高
  • 優先級權重問題：當多個選擇器混合使用時，根據優先級順序判定誰的綜合優先級最高

• div和span（HTML標簽）

  • div，一般用于配合css完成網頁的基本布局（容器級標簽：ul,ol,dl,li等）；

• span，一般用于配合css修改網頁中的一些布局信息（文本級標簽：p,bius,strong,em,del,ins等）。

• css元素顯示模式

  • 塊級元素（所有容器級標簽都是塊級元素）
  • 行內元素（除p外的文本級標簽都是行內元素）
  • 行內塊級元素

• css模式轉換

  • display

    
    
    
    
    
    

• 背景顏色

  • background-color
  • 取值：英文單詞，rgb,rgba,十六進制

• 背景圖片

  • background-image:url();
  • background-repeat:;
    取值為repeat,no-repeat,repeat-x,repeat-y
  • background-position:水平 垂直;
  • 具體方位名詞
    • 水平方向：left center right
    • 垂直方向：top center bottom
  • 具體像素（可接受負值）
  • background-attachment:;
    • 取值：scroll，fixed(不隨滾動條動)
  • background:背景顏色 背景圖片 平鋪方式 關聯方式 定位方式;

• 邊框

  • border：邊框寬度 邊框樣式 邊框顏色；
  • 也可分別連寫設置以及分開設置。

• 內邊距
  • 邊框和內容之間的距離；
  • padding:上 右 下 左；
  • 可分別設置；
• 外邊距
  • 標簽和標簽之間的距離；
  • margin：上 右 下 左；
  • 可分別設置；
  • 默認布局的垂直方向上，默認情況下外邊距是不會疊加的，會出現合并現象，按最大的顯示；水平方向不合并
• css盒模型
  • 僅僅是一個比喻，HTML中的所有標簽都是盒子
  • 內容的寬高：自己設置的width和height值
  • 元素的寬高
    • 寬=左border+左padding+width+右padding+右border；
    • 高同理。
  • 元素空間的寬高
    • 寬：左margin+左border+左padding+width+右padding+右border+右margin；
    • 高同理。
  • 增加了padding后元素的寬高也會變化，如果想要保持元素的寬高不變，則要減去部分內容的寬高
  • box-sizing
    • 可以保證給盒子增加了padding和border之后，盒子元素的寬高不變
    • 取值
      • content-box:元素寬高=border+padding+寬高
      • border-box：元素寬高=width/height
• 行高
  • line-height,每行內容的高度
  • 可以實現文字的垂直居中
• css浮動

  • 網頁的布局方式

    • 指瀏覽器如何對網頁中的元素進行排版
    • 排版方式
      • 標準流排版方式
        • 瀏覽器的默認排版方式，對塊級元素進行垂直排版；對行內或者行內塊元素進行水平排版。
      • 浮動流排版方式
        • 是一種半脫離標準流的排版方式，只支持水平排版，只能設置某個元素左對齊或者右對齊。
      • 定位流排版方式
        • 相對定位
          • 就是相對于自己以前在標準流中的位置來移動
          • 格式
            position：relative；
          • 注意
            • 相對定位在同一個方向上的定位屬性只能使用一個
            • 相對定位是不脫離標準流的，會繼續在標準流中占用空間
            • 相對定位是區分塊級元素，行內元素以及行內塊級元素的
          • 應用場景
            • 對元素盡行微調
            • 配合絕對定位來使用
        • 絕對定位
          • 相對于body或者某個定位流中的祖先元素來定位
          • 格式
            position：absolute；
          • 注意
            • 絕對定位是脫離標準流的，不會占用標準流中的空間；
            • 不區分塊級元素，行內元素和行內塊級元素；
            • 如果一個絕對定位的元素是以body作為參考點，那么其實十一網頁首屏作為參考點
            • 一個絕對定位的元素會忽略祖先元素的padding；
          • 絕對定位參考點
            • 默認情況下是以body作為參考點；
            • 如果一個絕對定位的元素有祖先元素，而且祖先元素中有一個是定位流中的元素，那么這個絕對定位的元素就會以定位流中的那個祖先元素為參考點；
            • 如果一個絕地定位的元素有祖先元素，而且祖先元素中有多個是定位流中的元素，那么這個絕對定位的元素會以離它最近的那個定位流的祖先元素為參考點；
          • 絕對定位的水平居中
            • 不能使用margin:0 auto;讓盒子居中；
            • 可以使用left:50%；margin-left：-元素自身寬度一半px;
          • 子絕父相
            • 企業開發中，一半絕對定位和相對定位一起出現，很少單獨使用；
            • 使用子絕父相原因
              • 使用相對定位無法讓內容水平居中；
              • 使用絕對定位內容會脫標；
              • 子絕父相，可以完美的定位
            • 應用場景
              • 對元素進行微調
              • 配合相對定位使用
        • 固定定位
          • 讓某個盒子不隨著滾動條的滾動而滾動
          • 格式
            position：fixed；
            • 注意
              • 脫離標準流，不會占用標準流中的空間；
              • 不區分塊級元素，行內元素以及行內塊級元素；
              • ie6不支持
            • 應用場景
              • 網頁對聯廣告
              • 網頁頭部通欄
        • 靜態定位
          • 默認屬性
          • 應用場景
            • 配合js清除定位屬性

  • z-index屬性

    • 指定定位的元素的覆蓋關系

  • 覆蓋關系
    - 默認定位的元素會覆蓋住沒有定位的元素
    - 默認情況下寫在后面的元素會蓋住前面的定位元素
    - 默認所有元素的z-index屬性值為0，如果設置了該屬性值，那么誰的比較大誰就顯示在前面

  • 定位元素的從父現象
    - 父元素沒有該屬性，那么子元素誰的值大誰就顯示在前面；
    - 父元素該屬性值不一樣，那么誰的父元素該值大就顯示在前面；

  • 應用場景
    - 控制界面的定位元素的覆蓋關系

  • 浮動元素的脫標

    • 當某個元素浮動之后，這個元素看上去就像被從標準流中刪除了一樣，這個即為浮動元素的脫標

  • 浮動元素的排序規則

    • 相同方向上的浮動元素，先浮動的元素會顯示在前面，后浮動的元素會顯示在后面
    • 不同方向上的浮動元素，左浮動的會找左浮動，右浮動的會找右浮動
    • 浮動元素浮動之后的位置，由浮動元素浮動之前在標準流中的位置來確定

  • 浮動元素的貼靠現象

    • 如果父元素的寬度能夠足夠顯示所有的浮動元素，那么浮動的元素就會并排顯示
    • 如果父元素的寬度不能顯示所有的浮動元素，那么會從最后一個元素開始往前貼靠
    • 如果貼靠了前面所有浮動元素之后還是不能顯示，那么最終會貼靠到父元素的左邊或者右邊。

  • 浮動元素的字圍現象

    • 浮動元素不會擋住沒有浮動元素中的文字，沒有浮動的文字胡自動給浮動的元素讓位置
• 清除css浮動
  • 方式一
    • 給前面的父盒子添加高度
    • 開發中能不寫高度就不寫，所以不常用
  • 方式二
    • 利用clear：both；
    • 使用該值后margin會失效，所以不常用
  • 方式三
    • 隔墻法
      • 外墻法
        • 在兩個有浮動子元素的盒子之間添加一個額外的塊級元素
      • 內墻法
        • 在前面一個盒子的最后添加一個額外的塊級元素
  • 方式四
    • 給前面的盒子添加雙偽元素來清除浮動
  • 方式五
    • 給前面的盒子添加偽元素來清除浮動
  • 方式六
    • 給前面一個盒子添加overflow:hidden;屬性

學HTML5就選李南江，選培訓機構我只選小碼哥