HTML CSS 三大屬性④

你是晚來風發表於2020-12-14
HTMLCSS

元素最大最小設定

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

圓角屬性

  • <!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>

相關文章