CSS3繼承&選擇器權重&畫素&百分比&em&rem&RGB值&HSL值&文件流（佈局）

阿新 • • 發佈：2021-01-29

文章目錄

1、繼承
2、選擇器權重
3、畫素和百分比
4、em和rem
5、RGB值
6、HSL值（不常用）
7、文件流

1、繼承

/*
  樣式的繼承，為一個元素設定的樣式同時也會用到它的後代元素上
  繼承（方便開發）：
  發生在祖先與後代之間，用繼承將通用樣式設定在祖先元素上（設定一次可讓所有元素都具有該元素）
  注意：不是所有樣式都能被繼承
    eg：背景、佈局相關等都不可以繼承
  */
p{
  color: aqua;
}
<p>
        藍色
        <span>
            繼承藍色
        </ 
span>
    </p>

2、選擇器權重

/*
  樣式衝突
    不同的選擇器，選中同一元素，並且為相同的樣式設定不同的值
  發生樣式衝突時，樣式由選擇器的權重（優先順序）決定
  
  選擇的權重（由高->低）（就近原則）
    內聯樣式       1,0,0,0
    id選擇器       0,1,0,0
    類和偽類選擇器  0,0,1,0
    元素選擇器      0,0,0,1
    通配選擇器      0,0,0,0
    繼承的樣式      沒有優先順序
  比較優先順序時：將所有的選擇器的優先順序進行相加（分組選擇器單獨運算）
    選擇器的累加不會超過其最大的數量級，類選擇器再高也不會超過id選擇器
  如果優先順序相同，則優先使用靠下的樣式（下面的覆蓋了上面的）

  可以在某個樣式的後邊 ！important,獲得最高優先順序
    開發中，慎用
*/
div#test{ /*優先順序相加*/}
div,p,span{/*分組選擇器單獨運算*/}

3、畫素和百分比

/*
  長度單位：
    畫素
      螢幕（顯示器）由一個一個小點構成
      不同螢幕的畫素大小不同，畫素越小的螢幕效果越清晰
      所以同樣的200px在不同的裝置下顯示的效果不一樣
    百分比
      屬性值設定為相對於其父元素屬性的百分比
      子元素跟隨父元素的改變而改變
*/
.box1{
  width: 200px;
  height: 200px;
  background-color: aqua;
}
.box2{
  width: 50%;
  height: 50%;
  background-color: black;
}
<body 
>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

展示
在這裡插入圖片描述

4、em和rem

/*
  em
    相對於元素的字型大小計算
    1em=1front-size
    em會根據字型的大小變化而變化

  rem
    相對於根元素（html）的字型大小
*/
.box3{
  width: 10em;
  height: 10em;
  background-color: blue;
}

5、RGB值

/*
  顏色單位
    在CSS中可以直接使用顏色名來設定各種顏色，但是不方便
  RGB值（用吸顏色的工具）
    通過三種顏色的不同來配出不同的顏色
    每一種顏色的範圍在 0-255（0%-100%）之間
    語法：RGB（紅色,綠色,藍色）
  RGBA
    在RGB的基礎上，增加了一個A表示不透明度
    1不透明，0完全透明，0.5半透明
  十六進位制的RGB的值
    語法：#紅色綠色藍色
    顏色濃度 00--ff
    如果顏色兩位兩位重複可以進行簡寫
*/
.box1{
  width: 100px;
  height: 100px;
  background-color: rgb(255,0,0);/*紅色*/
  background-color: rgb(0,0,0);/*黑色*/
  background-color: rgb(255,255,255);/*白色*/
  background-color: rgba(255,0,0,.5);
  background-color: #ffff00;
}

6、HSL值（不常用）

/*
  HSL值 HSLA值（同上A為透明度）
  H 色相（0-360）
  S 飽和度
  L 亮度
*/
.box1{
  width: 100px;
  height: 100px;
  background-color: hsl(60, 100%, 50%);
}

7、文件流

/*
 文件流
            網頁時一個多層的結構
            通過CSS可以分別為每一層設定樣式
            作為使用者只能看到最頂層
            最底層稱為文件流，文件流是網頁的基礎
                我們所建立的元素預設都是在文件流中
            元素的兩個狀態
                在文件流中
                脫離文件流中
            元素在文件流中的特點
                塊元素（eg:div）
                    塊元素會在頁面中獨佔一行（自上向下，垂直排列）
                    預設寬度是父元素全部（撐滿父元素）
                    預設高度是被內容撐開（子元素）
                行內元素(eg:span)
                    行內元素不會獨佔一行，只佔自身的大小
                    行內元素在頁面中自左向右，水平排列
                    如果一行總不能容下左右的行內元素，則會換到第二行幾句自左向右
                    行內元素的預設寬度和高度都是被內容撐開

*/