2. 程式人生 > 實用技巧 >圓角屬性 背景屬性 選擇器進階 css三大特性 標籤顯示特點與轉換 盒子居中技巧

圓角屬性 背景屬性 選擇器進階 css三大特性 標籤顯示特點與轉換 盒子居中技巧

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

圓角屬性

  • <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .box1 {
          width: 300px;
          height: 300px;
          background-color: red;
          /* 
             圓角屬性
           */
          /* border-radius: 30px; */
          /* border-radius: 10px 20px 30px 40px; */
          /* 
             如果設定為50%，會變成一個圓形，橢圓還是正圓根據寬高來控制
           */
          border-radius: 50%;
         }
        /* 半圓 */
        .box2 {
          width: 400px;
          height: 200px;
          background-color: blue;
          border-radius: 200px 200px 0 0;
         }
        /* 四分之一圓 */
        .box3 {
          width: 300px;
          height: 300px;
          background-color: deeppink;
          border-radius: 300px 0 0 0;
         }
      </style>
    </head>
    <body>
      <div class="box1"></div>
      <div class="box2"></div>
      <div class="box3"></div>
    </body>
    </html>

背景屬性

  • .box {
          width: 100%;
          height: 500px;
          /* 背景顏色 */
          background-color: red;
          /* 背景圖片 */
          background-image: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3547703274,3363083080&fm=11&gp=0.jpg);
          /* 
            是否重複
            預設是repeat重複，可以設定為no-repeat不重複
           */
          background-repeat: no-repeat;
          /* 設定背景圖片的尺寸: 第一個值代表寬度 第二個值代表高度 */
          background-size: 200px 300px;
          /* 
            背景圖片定位
              1.固定的畫素值
              2.百分比
              3.方向的英文單詞(center/left/right/top/bottom)
           */
          /* background-position: 100% 100%; */
          background-position: right bottom;
        }

  • background-color : red

  • background-image: url(./img/bg.jpg)

  • background-repeat: no-repeat

  • background-size: 50% 50%

  • background-position: 50% 50%

  • background:red url(./img/bg.jpg) no-repeat top

選擇器進階

  • 群組選擇器

    • /* 
             群組選擇器
               多個選擇器組合到一起用逗號分隔
           */
          .box,h3,p,span {
            color: gold;
           }
       
     
    -

  • 交集選擇器

    • /* 
             交集選擇器
               用兩個或者兩個以上條件尋找
               即有div又有.box1類名
           */
          div.box1 {
            color: deeppink;
           }

  • 子代選擇器

    • /* 
             子代選擇器
           */
          .wrap>.box {
            color: blue;
           }
     
    -

  • 後代選擇器

    • /* 後代選擇器 */
          .wrap .box {
            color: gold;
           }

  • 偽類連結選擇器

    • :link 未訪問狀態

    • :visited 已訪問狀態

    • :hover 滑鼠懸停狀態

    • :active 滑鼠點選那一刻

css三大特性

  • 層疊性

    • 樣式衝突就近原則，也就是後引入生效

    • 樣式不衝突的程式碼不會受影響

  • 繼承性

    • 子標籤繼承父標籤的樣式

      • 文字字型屬性都會繼承，text-, line- ,font-, color

  • 優先順序

    • 選擇器型別權值
      萬用字元選擇器 0
      標籤選擇器 1
      類選擇器，偽類選擇器 10
      ID選擇器 100

    • 複合選擇器的權值計算方式：組成其所有單一選擇器的權值之和 ul>li .red 1+1+10=12

    • 行內樣式優先

      • 權值1000

    • ！important 無限權重

    • 繼承樣式的權值為最低，甚至比萬用字元選擇器還低

標籤顯示模式特點與轉換

  • 標籤的巢狀規則

    • h標籤和p標籤只能巢狀其他行內標籤或者文字

    • h標籤和p標籤不能巢狀其他塊級標籤

    • a標籤屬於行內標籤，但是比較特殊，可以巢狀任何標籤，除了a標籤

    • 其他行內標籤只能巢狀文字，或者行內標籤

    • ul和ol子標籤必須是li

  • 塊級標籤

    • div h1-h6 p ul li ol li dl dt dd

    • 總是從新行開始

    • 高度、行高、外邊距以及內邊距都可以控制

    • 寬度預設是容器的100%

    • 可以容納內聯標籤和其他塊級標籤

  • 行內標籤

    • strong b em i ins u del s span

    • 和相鄰行內標籤在一行上

    • 高、寬無效，但水平方向的padding和margin可以設定，垂直方向的無效

    • 預設寬度就是它本身內容的寬度

    • 行內標籤只能容納文字或者其他行內標籤

  • 行內塊標籤

    • img input td

    • 和相鄰的行內標籤在一行，但之間會有白色縫隙

    • 預設寬度就是它本身內容的寬度

    • 高度、行高、外邊距以及內邊距都可以控制

  • 標籤顯示模式轉換 display

    • 塊轉行內：display : inline;

    • 行內轉塊 ： display : block;

    • 塊、行內轉行內塊 ： display : inline-block;

外邊距傳遞和塌陷

  • 給父級設定邊框或內邊距

  • 給父標籤新增overflow:hidden屬性，觸發BFC

盒子居中技巧

  • <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style>
         * {
          padding: 0;
          margin: 0;
         }
        .box {
          width: 300px;
          height: 300px;
          background-color: red;
          text-align: center;
          line-height: 300px;
         }
        .box span {
          background-color: blue;
         }
    ​
        .wrap {
          width: 400px;
          height: 400px;
          background-color: gold;
          overflow: hidden;
         }
        .box1 {
          width: 200px;
          height: 200px;
          background-color: green;
          margin: 100px auto;
         }
      </style>
    </head>
    <body>
      <div class="box">
        <span>hello world</span>
      </div>
      <div class="wrap">
        <div class="box1"></div>
      </div>
    </body>
    </html>

相關推薦

圓角屬性 背景屬性 選擇器進階 css三大特性 標籤顯示特點與轉換 盒子居中技巧

圓角屬性 <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document&

第四天, 內填充, 邊框, 三角形, 外邊距,, 盒模型的計算, 背景屬性, 選擇器進階, css的三大特性, 標籤分類及轉化

day04 知識回顧 1、你所知道的基礎選擇器有哪些，它們的優先順序如何？ 萬用字元0

04 圓角屬性、背景屬性、選擇器進階、css三大特性、標籤顯示模式特點與轉換、外邊距傳遞和塌陷、盒子居中技巧

04圓角屬性、背景屬性、選擇器進階、css三大特性、標籤顯示模式特點與轉換、外邊距傳遞和塌陷、盒子居中技巧

CSS基礎-選擇器進階,背景相關屬性（顏色/圖片）

CSS基礎-選擇器進階,背景相關屬性（顏色/圖片） 目標：能夠理解 複合選擇器 的規則，並使用 複合選擇器 在 HTML 中選擇元素

CSS三大特性及屬性，選擇器進階，外邊距塌陷問題

max-width和min-width: 用來設定元素的最大寬度和最小寬度 max-height和min-height: 用來設定元素的最大高度和最小高度

VUE中的scoped屬性和深度選擇器