css寫法，css選擇器，css幾種常見樣式，盒模型定位，浮動(dòng)，元素塌陷問題，雪碧圖

KaltZK 發(fā)布于2019-08-29 16:17 / 2251人閱讀

摘要：選擇器權(quán)重值選擇器在選擇的時(shí)候是從后往前選擇的，不是從前往后。內(nèi)聯(lián)權(quán)重值常用的幾個(gè)樣式表示通配符，所有標(biāo)簽都使用。

css的寫法

1.內(nèi)聯(lián)樣式:樣式直接寫在標(biāo)簽里面。
2.內(nèi)部樣式：樣式寫在

哈哈

哈哈是藍(lán)色

哈哈

交換類選擇器的順序，哈哈還是藍(lán)色

哈哈

style> 交換類選擇器定義的順序，哈哈變成了紅色

哈哈

嘎嘎

嘎嘎的樣式會(huì)重疊，藍(lán)色字體，綠色背景，這樣實(shí)現(xiàn)多樣化，沒有多id選擇器，盡量使用類選擇器。

h1

 h1，p全是淺藍(lán)色
 
 

   
   h1
   p

 h1是淺藍(lán)色,選中了同時(shí)滿足既是h1標(biāo)簽又是ff類的。
 
3.id選擇器  權(quán)重值100
css選擇器在選擇的時(shí)候是從后往前選擇的，不是從前往后。比如


    DIV

他是先找id是div的，再看他是不是div標(biāo)簽，css中id是唯一的，這里多判斷了一次，多此一舉。
4.分組選擇器（用，分隔 表示同時(shí)選中不同的選擇器）    
5.后代選擇器（用空格表示 誰的后代）
6.子代選擇器（用>表示 ）
#div h1{
    background: blue;
    }

    h1
    
        h11
      

h1,h11全是藍(lán)色。

只想讓兒子h1是藍(lán)色
 #div1 > h1{
    background: blue;
    }

    h1
    
        h11
      

h1是藍(lán)色。

7.偽類選擇器
#div2:hover{
    background: red;
}
div2
鼠標(biāo)劃到div2上背景變成紅色，IE6只支持給加hover

#ul1 li:first-child{
    background: red;
 }
 
     item1
     item2
 
 item1背景是紅色。
 
 #ul1 li:nth-child(2)
      }
表示第二個(gè)列表項(xiàng)是紅色

#ul1 li:nth-child(2n)
      }
表示偶數(shù)項(xiàng)列表項(xiàng)是紅色

#ul1 li:nth-child(2n+1)
      }
表示奇數(shù)項(xiàng)列表項(xiàng)是紅色

#div3 h1:nth-child(1){
    color: red;
   }

    h1
    pppppp
    h1h1h1h1

h1是紅色


 #div3 p:nth-child(1){
    color: red;
   }

    h1
    pppppp
    h1h1h1h1

都沒有變化，nth-child（1）和前面什么標(biāo)簽沒有關(guān)系，就表示第一個(gè)孩子。想要和標(biāo)簽類型與關(guān)要使用nth-of-type(1)
  #div3 p:nth-of-type(1){
    color: red;
   }

    h1
    pppppp
    h1h1h1h1


pppppp是紅色

8.偽對(duì)象選擇器
   #p1{
       height: 200px;
       width: 100px;
       background: #ccc;
     }
    #p1；first-line{
        color: red;
        }
   
       哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
       哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
       哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
       哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
     
   顯示出來的每一行不一點(diǎn)就是代碼中寫的字?jǐn)?shù)，加了偽對(duì)象選擇器，第一行哈哈哈。。。是紅色。
   
偽類 偽對(duì)象區(qū)別？
偽類的對(duì)象是真實(shí)存在的，想給她設(shè)置樣式的時(shí)候直接選中。
偽對(duì)象的對(duì)象是不存在的，相當(dāng)于瀏覽器選中的一行哈哈哈，給它加了一個(gè)隱式的元素，對(duì)這個(gè)元素設(shè)置樣式。
內(nèi)聯(lián)權(quán)重值 1000
常用的幾個(gè)css樣式
*表示通配符，所有標(biāo)簽都使用。
rgba( , , , )最后一個(gè)值是透明度 0-1 值越小越透明
opacity的值是會(huì)繼承的，解決辦法1：把兩個(gè)div設(shè)置成兄弟，不是父子。
                  解決方法2：使用rgba()。

把background的屬性寫在一行 background： url（"1.jpg") no-repeat rgba(80,80,80,0.5);
    #div1{
        width: 200px;
        height: 200px;
        background: #ccc;
        text-align: center;
        line-height: 200px;
        }
     哈哈
     哈哈會(huì)水平垂直居中在灰色框中，但是line-height=height只能設(shè)置單行文本。
     
     #div1{
        height: 150px;
        width: 150px;
        background: #ccc;
        display: table;
     }
    #div2{
        display: table-cell;
        vertical-align: middle;
    }
    
        
               哈哈哈哈哈哈哈哈哈
               或或或或或或或或或或或或或或
               或或或或或或或或或或或或或或或或或或或

實(shí)現(xiàn)多行文本垂直居中 text-decoration: none;可以去掉下劃線。 text-indent :20px; 首行縮進(jìn)20像素。 盒模型

網(wǎng)頁中所有的元素都是框
行框：由內(nèi)容大小撐起來的。

 display: block轉(zhuǎn)化成塊級(jí)元素。

塊框：垂直分布。

 寬是自適應(yīng)的，意思是占據(jù)父元素的剩余空間，高是內(nèi)容的高度。
 可以設(shè)置寬高。
 display: inline轉(zhuǎn)化成行級(jí)元素。    

display: inline-block 元素水平排列并且可以設(shè)置寬高。

margin設(shè)置一個(gè)值：上下左右

      兩個(gè)值：上下 左右
      三個(gè)值：上 左右 下
      四個(gè)值：上 右 下 左

外邊距合并問題

    #a, #b{
        height: 100px;
        width: 100px;
        background: #f00;
    }
    #a{
        margin-bottom: 50px;
        }
    #b{
        margin-top: 30p取了較大值x;
        }
    a
    b
    兄弟關(guān)系，兩個(gè)紅框垂直分布，取了較大值，間距是50px。
    
    #a, #b{
        height: 100px;
        width: 100px;
        background: #f00;
    }
    #a{
        width :200px;
        height: 200px;
        }
    #b{
        margin-top: 30px;
        background: #0f0;
        }
    
        
    
    父子關(guān)系，父子會(huì)一起向下移動(dòng)30px。
    解決方法： 1.給父元素加邊框，設(shè)置邊框透明也會(huì)有陰影。
              2.給父元素加下內(nèi)邊距，但是父元素會(huì)變寬，設(shè)置狂傲是給內(nèi)容設(shè)置。
              3.給子元素加浮動(dòng) float: left;
              4.給子元素加絕對(duì)定位：poosition: absolute;
              5.給父元素加 overflow: hidden;
   
   去掉在IE6下會(huì)生成怪異盒模型，設(shè)置的寬高包括內(nèi)容，padding,border. 
   box-sizing: content-box; 標(biāo)準(zhǔn)瀏覽器下
   box-sizing: border-box; IE6瀏覽器下 寬高包括三部分。

定位

    相對(duì)定位：相對(duì)于自己之前的位置
             不釋放空間，后面的元素不會(huì)擠上來。    
    絕對(duì)定位：相對(duì)于最近已定位的祖先元素，不一定是父元素
             會(huì)釋放空間，后面的元素會(huì)擠上來。  
    固定定位：相對(duì)于瀏覽器定位
             釋放空間
             塊級(jí)元素加了這個(gè)屬性之后，寬度不再是自適應(yīng)，而是由內(nèi)容撐開。

浮動(dòng)

    #a，#b, #c{
         width： 100px；
         height： 100px；
         }
   #a{
           background: red;
           float: left:
          }
   #b{
           background: green;
          }
   #
           background: blue;
          }   
         
      
        
    紅色會(huì)把綠色蓋住
    如果全都向左浮動(dòng)，三個(gè)快排列在左側(cè)，從左向右 紅 綠 藍(lán)
    如果全都向右浮動(dòng)，三個(gè)快排列在右側(cè)，從右向左 紅 綠 藍(lán)
    
    float可以讓塊級(jí)元素橫過來，display：block也可以讓元素橫過來，兩者的區(qū)別？
    display：block 塊之間會(huì)有間隙，float是緊貼著的。這個(gè)間隙是代碼中不同的div換行導(dǎo)致的。
    inLine-block不會(huì)導(dǎo)致元素釋放空間。浮動(dòng)會(huì)導(dǎo)致元素空間釋放，后面的擠上來。
    
    不想讓某個(gè)元素浮動(dòng)： clear: both;

元素塌陷問題

浮動(dòng)導(dǎo)致元素塌陷問題

    list-style: decimal數(shù)字
    
    #ul1{
        background: #ccc;
        list-style: none;
        }
    #ul1 li{
            background: #f00;
            float: left;
        }
      
        item1 
        item2 
        item3 
       
    ul的高度變成0，因?yàn)樽釉馗?dòng)，空間釋放了，沒有子元素?fù)沃冈兀冈貨]有高了。
    解決方法1：已知父元素高度直接加高度。
           2： 在列表項(xiàng)最后再加一個(gè)li，設(shè)置樣式 float: none clear:both, 相當(dāng)于新加一個(gè)空列表項(xiàng)，他不浮動(dòng)，自己撐著空間。
           3：父元素加 overflow: hidden       
           overflow:hidden是解決溢出問題的，這場(chǎng)來說不能解決其他問題，但是他在這就是好使，這叫做css hack ,用特殊手段解決瀏覽器兼容性問題。

雪碧圖

     #div1{         
          width: 136px;
          height: 63px;
          background: url("1.jpg") no-repeat -152px -402px #ccc; 數(shù)字是小塊圖片的左、上外邊距
          }
          
     性能優(yōu)化的一種方式

GPU云服務(wù)器云服務(wù)器 css選擇器基礎(chǔ)選擇器css 浮動(dòng)-前端-css css樣式

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/113648.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

KaltZK

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

【Paper】2018_多機(jī)器人領(lǐng)航-跟隨型編隊(duì)控制

閱讀 3593·2021-11-23 09:51
應(yīng)用SpringAOP及Tlog工具完成日志鏈路追蹤、收集、持久化

閱讀 2795·2021-11-23 09:51
Win11 用戶獎(jiǎng)體驗(yàn)全新的“畫圖”應(yīng)用

閱讀 675·2021-10-11 10:59
ReliableSite：$899/年/E5-1650v3/128GB內(nèi)存/2TB SSD+2TB

閱讀 1672·2021-09-08 10:43
?一文告訴你蓬萊閣到底如何?

閱讀 3223·2021-09-08 09:36
爆肝六萬字整理的python基礎(chǔ)，快速入門python的首選

閱讀 3288·2021-09-03 10:30
ReliableSite：美國服務(wù)器/超高性價(jià)比/可選洛杉磯、紐約、邁阿密機(jī)房/E3 1245 V2

閱讀 3293·2021-08-21 14:08
網(wǎng)友5位數(shù)購買個(gè)人網(wǎng)站域名是否值得（當(dāng)下域名價(jià)值幾何）

閱讀 2195·2021-08-05 09:59

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

css寫法，css選擇器，css幾種常見樣式，盒模型定位，浮動(dòng)，元素塌陷問題，雪碧圖

哈哈

哈哈

哈哈

哈哈

h1

h1

h1

h11

h1

h11

h1

h1h1h1h1

h1

h1h1h1h1

h1

h1h1h1h1

相關(guān)文章

**讀后總結(jié)--精通css高級(jí)web標(biāo)準(zhǔn)解決方案（第二版）**

**【芝士整理】CSS基礎(chǔ)圖譜**

**前端面試題2（CSS）**

**前端面試題2（CSS）**

發(fā)表評(píng)論

0條評(píng)論

KaltZK

男|高級(jí)講師

TA的文章

【Paper】2018_多機(jī)器人領(lǐng)航-跟隨型編隊(duì)控制

應(yīng)用SpringAOP及Tlog工具完成日志鏈路追蹤、收集、持久化

Win11 用戶獎(jiǎng)體驗(yàn)全新的“畫圖”應(yīng)用

ReliableSite：$899/年/E5-1650v3/128GB內(nèi)存/2TB SSD+2TB

?一文告訴你蓬萊閣到底如何?

爆肝六萬字整理的python基礎(chǔ)，快速入門python的首選

ReliableSite：美國服務(wù)器/超高性價(jià)比/可選洛杉磯、紐約、邁阿密機(jī)房/E3 1245 V2

網(wǎng)友5位數(shù)購買個(gè)人網(wǎng)站域名是否值得（當(dāng)下域名價(jià)值幾何）

最新活動(dòng)