學(xué)習(xí)筆記二之css

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

01

感想

學(xué)完HTML部分躁染，對HTML整體掌握差不多之后，我繼續(xù)了我的css學(xué)習(xí)鹰溜。

css之前也有學(xué)過虽填，不過腦子里思緒很亂，包括自己看書以及在網(wǎng)站上看各種老師的視頻曹动，結(jié)果下來真的感覺很糟糕斋日，可能一方面是每個老師的講課風(fēng)格不同使用的軟件也不同導(dǎo)致貪吃的我最后不消化了，一方面可能也是因為自己沒有做好整理吧墓陈。恶守。」北兀總之兔港，很繁亂，有了看江哥HTML5的經(jīng)驗赊级，這一次我汲取了以往的經(jīng)驗不再眉毛胡子一把抓了押框，我學(xué)會了整合優(yōu)化，更是注重條理化分析記憶理逊，整體下來這次感覺還nice橡伞。通過這次盒揉，我明白老師真的很重要，在網(wǎng)上各種不連續(xù)的視頻真的是費(fèi)心費(fèi)力費(fèi)神最后還白費(fèi)勁兑徘，前提是如我這般笨刚盈。。挂脑。藕漱。。所以崭闲，個人覺得最好還是能找一個專業(yè)的老師帶一帶肋联，能夠從一而終學(xué)到底，我很期待即將到來的學(xué)習(xí)之旅刁俭。

前面學(xué)了HTML橄仍，知道HTML負(fù)責(zé)給標(biāo)簽添加語義，從結(jié)構(gòu)上定義網(wǎng)頁牍戚，而css則負(fù)責(zé)給網(wǎng)頁添加各種樣式侮繁，即 Cascading Style Sheets。感覺css比HTML復(fù)雜多了如孝，首先就是標(biāo)簽都變得復(fù)雜了宪哩，不像HTML那樣很簡短簿废，而且每個大塊都是一大堆的東西要記憶笔时，比HTML更繁亂。這一次跟著南江老師學(xué)習(xí)css,因為老師的語言很通俗蕾额，知識點(diǎn)后先易后難先淺層后深入倒是很好理解但荤，再用實際案例鋪開知識點(diǎn)罗岖，而且還有清晰的大綱涧至，記憶難度也小了很多腹躁。而且南江老師講的知識點(diǎn)很全面，比如清除浮動南蓬，以前看那么多類視頻都只知道一種清除浮動的方式纺非，我是第一次在老師這里了解到原來還有那么多種別的方式，大開眼界赘方。烧颖。最后不得不說，江哥介紹的快捷鍵真的很快捷窄陡，很like炕淮，頓時感覺很專業(yè)的樣子，不再像以前學(xué)校上課感覺老師多厲害那樣跳夭，原來某種程度上我和大牛只差了個快捷鍵涂圆。们镜。。

總體看來润歉，還是重在整合模狭。css部分，文本屬性踩衩，文字屬性嚼鹉，顏色屬性，以及背景屬性這幾個繁小知識點(diǎn)驱富，盡管繁簡锚赤，卻是用得最多的，幾乎每個網(wǎng)頁上都是要用的褐鸥。然后就是大塊的知識點(diǎn)了宴树，因為css重點(diǎn)在樣式，所以重要的該屬css選擇器和css屬性了晶疼。選擇器包括三大基本選擇器酒贬，標(biāo)簽選擇器，類選擇器和id選擇器翠霍，以及由三大基本選擇器延伸出的后代選擇器锭吨，子元素選擇器，交集選擇器寒匙，并集選擇器零如，兄弟選擇器，屬性選擇器锄弱，序選擇器和通配符選擇器考蕾。css的三大特性又是另一大塊，還好是重在理解的会宪。對于網(wǎng)頁肖卧，有顯示模式以及如何轉(zhuǎn)換網(wǎng)頁的顯示模式。然后就是邊框掸鹅，外邊距和內(nèi)邊距一起組成的大盒子塞帐，成了css的形象比喻，css成了一個大盒子巍沙，里面裝滿了各種小盒子葵姥，每個小盒子都可以拿來放在網(wǎng)頁上，還可以在各種盒子里放各種東西句携。以及由此產(chǎn)生的盒子浮動問題和清除浮動問題榔幸。這樣想來，學(xué)會css還是不難的，但同樣削咆，練習(xí)是重點(diǎn)喳篇，只說不練只會眼高手低。

學(xué)HTML5就選李南江态辛，選培訓(xùn)機(jī)構(gòu)我只選小碼哥

02

筆記

• css文字屬性

  
  
  
  

• css文本屬性

  
  
  
  

• css顏色屬性

  
  
  
  

• css選擇器

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

    
    
    
    

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

  
  
  
  

• 兄弟選擇器

  
  
  
  

• 序選擇器

  
  
  
  
  
  

• 屬性選擇器

  
  
  
  

• 通配符選擇器

  
  

• css三大屬性

  • 繼承性：給父元素設(shè)置一些屬性麸澜，字元素也可以使用
  • 層疊性：處理屬性間的沖突設(shè)置
  • 優(yōu)先級：解決出現(xiàn)層疊時如何層疊的問題
    • 是否是間接選中（即繼承）？如果是間接選中奏黑，那么誰離目標(biāo)近就聽誰的
  • 是否是相同選擇器炊邦？如果是直接選中，并且都是同類型的選擇器熟史，那么就是誰寫在后面聽誰的
  • 如果都是直接選中馁害，并且不是同類型的的選擇器，那么按照id>類>標(biāo)簽>通配符>繼承>瀏覽器默認(rèn)的順序展示效果蹂匹。
  • 碘菜！important :提升指定屬性的優(yōu)先級為最高
  • 優(yōu)先級權(quán)重問題：當(dāng)多個選擇器混合使用時，根據(jù)優(yōu)先級順序判定誰的綜合優(yōu)先級最高

• div和span（HTML標(biāo)簽）

  • div限寞，一般用于配合css完成網(wǎng)頁的基本布局（容器級標(biāo)簽：ul,ol,dl,li等）忍啸；

• span，一般用于配合css修改網(wǎng)頁中的一些布局信息（文本級標(biāo)簽：p,bius,strong,em,del,ins等）履植。

• css元素顯示模式

  • 塊級元素（所有容器級標(biāo)簽都是塊級元素）
  • 行內(nèi)元素（除p外的文本級標(biāo)簽都是行內(nèi)元素）
  • 行內(nèi)塊級元素

• css模式轉(zhuǎn)換

  • display

    
    
    
    
    
    

• 背景顏色

  • background-color
  • 取值：英文單詞计雌，rgb,rgba,十六進(jìn)制

• 背景圖片

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

• 邊框

  • border：邊框?qū)挾?邊框樣式 邊框顏色玫霎；
  • 也可分別連寫設(shè)置以及分開設(shè)置凿滤。

• 內(nèi)邊距
  • 邊框和內(nèi)容之間的距離；
  • padding:上 右 下 左庶近；
  • 可分別設(shè)置翁脆；
• 外邊距
  • 標(biāo)簽和標(biāo)簽之間的距離；
  • margin：上 右 下 左鼻种；
  • 可分別設(shè)置反番；
  • 默認(rèn)布局的垂直方向上，默認(rèn)情況下外邊距是不會疊加的普舆，會出現(xiàn)合并現(xiàn)象恬口，按最大的顯示校读；水平方向不合并
• css盒模型
  • 僅僅是一個比喻沼侣，HTML中的所有標(biāo)簽都是盒子
  • 內(nèi)容的寬高：自己設(shè)置的width和height值
  • 元素的寬高
    • 寬=左border+左padding+width+右padding+右border；
    • 高同理歉秫。
  • 元素空間的寬高
    • 寬：左margin+左border+左padding+width+右padding+右border+右margin蛾洛；
    • 高同理。
  • 增加了padding后元素的寬高也會變化，如果想要保持元素的寬高不變轧膘，則要減去部分內(nèi)容的寬高
  • box-sizing
    • 可以保證給盒子增加了padding和border之后钞螟，盒子元素的寬高不變
    • 取值
      • content-box:元素寬高=border+padding+寬高
      • border-box：元素寬高=width/height
• 行高
  • line-height,每行內(nèi)容的高度
  • 可以實現(xiàn)文字的垂直居中
• css浮動

  • 網(wǎng)頁的布局方式

    • 指瀏覽器如何對網(wǎng)頁中的元素進(jìn)行排版
    • 排版方式
      • 標(biāo)準(zhǔn)流排版方式
        • 瀏覽器的默認(rèn)排版方式，對塊級元素進(jìn)行垂直排版谎碍；對行內(nèi)或者行內(nèi)塊元素進(jìn)行水平排版鳞滨。
      • 浮動流排版方式
        • 是一種半脫離標(biāo)準(zhǔn)流的排版方式，只支持水平排版蟆淀，只能設(shè)置某個元素左對齊或者右對齊拯啦。
      • 定位流排版方式
        • 相對定位
          • 就是相對于自己以前在標(biāo)準(zhǔn)流中的位置來移動
          • 格式
            position：relative；
          • 注意
            • 相對定位在同一個方向上的定位屬性只能使用一個
            • 相對定位是不脫離標(biāo)準(zhǔn)流的熔任，會繼續(xù)在標(biāo)準(zhǔn)流中占用空間
            • 相對定位是區(qū)分塊級元素褒链，行內(nèi)元素以及行內(nèi)塊級元素的
          • 應(yīng)用場景
            • 對元素盡行微調(diào)
            • 配合絕對定位來使用
        • 絕對定位
          • 相對于body或者某個定位流中的祖先元素來定位
          • 格式
            position：absolute；
          • 注意
            • 絕對定位是脫離標(biāo)準(zhǔn)流的疑苔，不會占用標(biāo)準(zhǔn)流中的空間甫匹；
            • 不區(qū)分塊級元素，行內(nèi)元素和行內(nèi)塊級元素惦费；
            • 如果一個絕對定位的元素是以body作為參考點(diǎn)兵迅，那么其實十一網(wǎng)頁首屏作為參考點(diǎn)
            • 一個絕對定位的元素會忽略祖先元素的padding；
          • 絕對定位參考點(diǎn)
            • 默認(rèn)情況下是以body作為參考點(diǎn)薪贫；
            • 如果一個絕對定位的元素有祖先元素喷兼，而且祖先元素中有一個是定位流中的元素，那么這個絕對定位的元素就會以定位流中的那個祖先元素為參考點(diǎn)后雷；
            • 如果一個絕地定位的元素有祖先元素季惯，而且祖先元素中有多個是定位流中的元素，那么這個絕對定位的元素會以離它最近的那個定位流的祖先元素為參考點(diǎn)臀突；
          • 絕對定位的水平居中
            • 不能使用margin:0 auto;讓盒子居中勉抓；
            • 可以使用left:50%；margin-left：-元素自身寬度一半px;
          • 子絕父相
            • 企業(yè)開發(fā)中候学，一半絕對定位和相對定位一起出現(xiàn)藕筋，很少單獨(dú)使用；
            • 使用子絕父相原因
              • 使用相對定位無法讓內(nèi)容水平居中梳码；
              • 使用絕對定位內(nèi)容會脫標(biāo)隐圾；
              • 子絕父相，可以完美的定位
            • 應(yīng)用場景
              • 對元素進(jìn)行微調(diào)
              • 配合相對定位使用
        • 固定定位
          • 讓某個盒子不隨著滾動條的滾動而滾動
          • 格式
            position：fixed掰茶；
            • 注意
              • 脫離標(biāo)準(zhǔn)流暇藏，不會占用標(biāo)準(zhǔn)流中的空間；
              • 不區(qū)分塊級元素濒蒋，行內(nèi)元素以及行內(nèi)塊級元素盐碱；
              • ie6不支持
            • 應(yīng)用場景
              • 網(wǎng)頁對聯(lián)廣告
              • 網(wǎng)頁頭部通欄
        • 靜態(tài)定位
          • 默認(rèn)屬性
          • 應(yīng)用場景
            • 配合js清除定位屬性

  • z-index屬性

    • 指定定位的元素的覆蓋關(guān)系

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

  • 定位元素的從父現(xiàn)象
    - 父元素沒有該屬性瓮顽，那么子元素誰的值大誰就顯示在前面县好；
    - 父元素該屬性值不一樣，那么誰的父元素該值大就顯示在前面暖混；

  • 應(yīng)用場景
    - 控制界面的定位元素的覆蓋關(guān)系

  • 浮動元素的脫標(biāo)

    • 當(dāng)某個元素浮動之后缕贡，這個元素看上去就像被從標(biāo)準(zhǔn)流中刪除了一樣，這個即為浮動元素的脫標(biāo)

  • 浮動元素的排序規(guī)則

    • 相同方向上的浮動元素拣播，先浮動的元素會顯示在前面善绎，后浮動的元素會顯示在后面
    • 不同方向上的浮動元素，左浮動的會找左浮動诫尽，右浮動的會找右浮動
    • 浮動元素浮動之后的位置禀酱，由浮動元素浮動之前在標(biāo)準(zhǔn)流中的位置來確定

  • 浮動元素的貼靠現(xiàn)象

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

  • 浮動元素的字圍現(xiàn)象

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

學(xué)HTML5就選李南江送淆，選培訓(xùn)機(jī)構(gòu)我只選小碼哥