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

阿新 • • 發佈：2020-12-22

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 無限權重
- 繼承樣式的權值為最低，甚至比萬用字元選擇器還低

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

標籤顯示模式特點與轉換

標籤的巢狀規則
- 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三大特性及屬性，選擇器進階，外邊距塌陷問題

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

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

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

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

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

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

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