WEB01_Day03(上)-盒子模型、文字相關樣式、CSS三大特性、定位

阿新 • • 發佈：2021-08-08

一、盒子模型

1.1 定義：

　　盒子模型是所有標籤(HTML元素)都擁有的模型特徵。盒子模型中規定所有標籤擁有的層級結構，使用盒子模型可以進行對標籤元素進行修飾和定位處理。如圖所示：

元素的寬和高
元素的內邊距
元素的邊框
元素的外邊距

1.2 盒子模型：元素寬高

　　盒子模型中使用寬和高進行控制元素的大小。如果需要對於元素的大小進行賦值，可以使用畫素px進行賦值，也可以使用百分比的方式進行賦值(對上級元素進行百分比設定賦值)

注意：塊級元素可以進行設定寬和高，行內元素不可以設定寬和高，行內塊可以進行設定寬和高

1.3 盒子模型：內邊距

表示方式：padding
作用：用來表示元素內容到邊框之間的距離
賦值的方式：
- padding:5px; 表示上下左右四個方向的內邊距值為5畫素。
- padding:10px 5px; 表示上下的畫素值為10畫素，左右的畫素值為5畫素。
- padding:1px 2px 3px 4px; 表示順時針方位(上右下左)的內邊距的值分別為1、2、3、4畫素
- padding-left/right/top/bottom:3px; 表示距離單獨的某一個方位的內邊距畫素值為3畫素。
特徵：內邊距這個範圍內是可以顯示顏色或者圖片。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>內邊距案例</title>
  <style type="text/css">
    div {
      background-color: rgb(70, 99, 180);
      width: 533px;
      height: 300px;
      /* 上方內邊距 */
      /* padding-top: 10px; */
      /* 右側內邊距 */
      /* padding-right: 10px; */
      /* 下方內邊距 */
      /* padding-bottom: 10px; */
      /* 左側內邊距 */
      /* padding-left: 10px; */
      /* 四個方向的畫素值一樣 */
      /* padding: 10px; */
      /* 上下畫素   左右畫素 */
      /* padding: 10px 20px; */
      padding: 10px 20px 30px 40px;

     }
  </style>
</head>
<body>
  <div>
    <!-- 設定內邊距：元素到邊框的距離，在此距離中會顯示背景顏色和圖片 -->
    <img src="../img/1.jpg">
  </div>
</body>
</html>

1.4 盒子模型：邊框

邊框：border
作用:可以設定元素的邊框,包括邊框粗細,顏色樣式等,讓元素更美觀
賦值方式 :
- border:邊框粗細邊框樣式顏色; 四個方向新增邊框
- border-left/right/top/bottom: 邊框粗細邊框樣式顏色; 單獨某個方向賦值
- border-radius: 圓⻆值越大越圓當值大於寬高(包括邊框)一半時為正圓

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>邊框案例</title>
  <style type="text/css">
    div {
      /*
       dotted - 定義點線邊框
       dashed - 定義虛線邊框
       solid - 定義實線邊框
       double - 定義雙邊框
       groove - 定義 3D 坡口邊框。效果取決於 border-color 值
       ridge - 定義 3D 脊線邊框。效果取決於 border-color 值
       inset - 定義 3D inset 邊框。效果取決於 border-color 值
       outset - 定義 3D outset 邊框。效果取決於 border-color 值
       none - 定義無邊框
       hidden - 定義隱藏邊框
       */
      background-color: violet;
      width: 533px;
      height: 300px;
      padding: 10px;
      border: 10px solid blue;
      /* border-bottom:10px solid coral; */
      border-radius: 3px;
     }
  </style>
</head>
<body>
  <div>
    <img src="../img/1.jpg">
  </div>
</body>
</html>

1.5 盒子模型：外邊距

外邊距：margin
作用：設定元素邊框到上級元素或其它同級元素的距離,這個距離不會出現當前元素的背景,但是也計算在當前元素總的寬和高中
賦值方式 :
- margin-left /top/right /bottom 單獨給某一個方向新增外邊距
- margin:10px 給四個方向新增10個畫素外邊距
- margin: 10px 20px 上下10 左右20px
- margin: 0 auto 上下0 左右自動居中
- margin: 10px 20px 30px 40px
案例一：同級元素之間外邊距設定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>外邊距01</title>
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
     }

    #d1 {
      background-color: red;
      width: 100px;
      height: 80px;
      display: inline-block;
      /* 上右下左外邊距相同 */
      /* margin: 10px; */
      /* margin-top margin-right margin-left */
      /* margin-bottom: 10px; */
      margin-right: 20px;
     }

    #d2 {
      background-color: green;
      width: 100px;
      height: 80px;
      display: inline-block;
      /* margin: 0 auto; */
     }
  </style>
</head>
<body>
  <div id="d1">第一個div</div>
  <div id="d2">第二個div</div>
</body>
</html>

案例二：上級元素之間外邊距設定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>外邊距02</title>
  <style type="text/css">
    #father {
      width: 300px;
      height: 300px;
      background-color: red;
      /* 解決外邊距粘連問題 */
      overflow: hidden;
     }
    #son {
      width: 150px;
      height: 150px;
      background-color: green;
      margin-left: 20px;
      /* 
       設定距離父級元素的上外邊距時，會對父級的div的位置產生影響
       執行以後可以發現，父級div整體是向下進行移動了，
       這種現象也稱之為外邊距粘連問題。
       */
      margin-top: 30px;
     }
  </style>
</head>
<body>
  <div id="father">
    <div id="son"></div>
  </div>
</body>
</html>

二、文字相關樣式

2.1文字修飾和字型設定

文字水平對齊方式 text-align:left/right/center
文字修飾 text-decoration:overline/underline/line-through/none
文字陰影 text-shadow: 顏色 x偏移值 y偏移值濃度值越大越模糊
行高 line-height: 20px 實現文字垂直居中
字型大小 font-size:20px;
字型加粗 font-weight: bold加粗 normal去掉加粗效果
斜體 font -style:italic(斜體)/oblique(傾斜)/normal(正常)
字體系列設定 font-family:xxx,xxxx;
font : 字型 xxx,xxx,xxxx;(最不常用的)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字修飾和字型設定</title>
  <style type="text/css">
    div {
      width: 700px;
      height: 100px;
      /* 設定div背景顏色 */
      background-color: moccasin;
      /* 設定字型顏色 */
      color: orangered;
      /* 設定字型大小 */
      font-size: 50px;
      /* 設定行高(一行文字所佔用的告訴，顯示的時候會垂直居中) */
      line-height: 90px;
      /* 水平對齊方式 */
      text-align: center;
      /* 
       文字修飾
       text-decoration:overline/underline/line-through/none 
       */
      text-decoration: overline;
      /* 
       加粗
       normal  預設值。定義標準的字元。
       bold    定義粗體字元。
       bolder  定義更粗的字元。
       lighter 定義更細的字元。
       */
      font-weight: bold;
      /* 斜體 */
      font-style: italic;
      /* 設定字型 */
      font-family: 宋體;
      /* 文字陰影 (顏色  x軸偏移量  y軸偏移量  濃度)*/
      text-shadow: seagreen -8px -8px 2px;
      /* font:italic bold 12px/20px arial,sans-serif; */
     }

    a {
      text-decoration: none;
     }
    span {
      text-decoration: line-through;
     }

  </style>
</head>
<body>
  <div>今天是星期日</div>
  <a href="https://www.tmooc.cn/">達內慕課網</a>程式設計師的首選學習平臺
  <span>原價xxx價格</span>現價xxx錢

</body>
</html>

2.2 CSS專案實戰

學子商城練習(一)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>學子商城1</title>
  <style type="text/css">
    body {
      /* 字型顏色 */
      color: #666;
      /* 字型設定 */
      font: 12px "simhei", Arial, Helvetica, sans-serif;
      /* 背景顏色 */
      background-color: #f5f5f5;
     }

    #container {
      width: 611px;
      height: 376px;
      background-color: #e8e8e8;
      /* 背景圖片 */
      background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png");
      /* 圖片去除重複顯示 */
      background-repeat: no-repeat;
      /* 設定背景圖片的位置 */
      background-position: 90% 70%;
      background-size: 318px 319px;
      /* 解決外邊距粘連問題 */
      overflow: hidden;
     }

    #container>div{
      width: 245px;
      height: 232px;
      /*  */
      margin: 68px 0 0 36px;
     }

    .p1 {
      font-size: 32px;
      color: #333;
     }
    .p3 {
      font-size: 24px;
      color: #0aa1ed;
      font-weight: bold;
      margin-bottom: 12px;
     }
    input {
      width: 133px;
      height: 40px;
      color: #fff;
      background-color: #0aa1ed;
      font-size: 20px;
      border: 0;
      /* 設定圓角 */
      border-radius: 3px;
      /* 設定指標樣式 */
      cursor: pointer;
     }



  </style>
</head>
<body>
  <div id="container">
    <div>
      <p class="p1">靈越 燃7000系列</p>
      <p class="p2">
         酷睿雙核i5處理器|256GB SSD| 8GB記憶體<br>
         英特爾HD顯示卡620含共享顯示卡記憶體
      </p>
      <p class="p3">￥4999.00</p>
      <input type="button" value="檢視詳情">
    </div>
  </div>
</body>
</html>

學子商城練習(二)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>學子商城02</title>
  <style type="text/css">
    body {
      /* 字型顏色 */
      color: #666;
      /* 字型設定 */
      font: 12px "simhei", Arial, Helvetica, sans-serif;
      /* 背景顏色 */
      background-color: #f5f5f5;
     }
    
    #container {
      width: 375px;
      height: 376px;
      background-color: #e8e8e8;
      background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img2.png");
      background-repeat: no-repeat;
      background-size: 286px 248px;
      background-position: 80% 90%;
      overflow: hidden;
     }

    #container>div {
      width: 253px;
      height: 233px;
      /*  */
      margin: 38px 0 0 25px;
     }

    .p1 {
      font-size: 32px;
      color: #333;
      margin-bottom: 12px; 
     }

    .p3 {
      font-size: 24px;
      color: #0aa1ed;
      /* 設定和按鈕的外邊距 */
      margin-bottom: 12px;
     }

    a {
      width: 132px;
      height: 40px;
      background-color:#0aa1ed ;
      border: 0;
      color: #fff;
      /* a標籤是一個行內元素，需要變成塊級元素才能設定寬和高 */
      display: block;
      font-size: 20px;
      text-decoration: none;
      text-align: center;
      border-radius: 3px;
      /* 行高 */
      line-height: 40px;
     }

  </style>
</head>
<body>
  <div id="container">
    <div>
      <p class="p1">顏值 框不住</p>
      <p class="p2">
         酷睿雙核i5處理器|256GB SSD| 8GB記憶體<br>
         英特爾HD顯示卡620含共享顯示卡記憶體
      </p>
      <p class="p3">￥6888.00</p>
      <a href="">檢視詳情</a>
    </div>
  </div>
</body>
</html>

三、CSS三大特性

繼承性

元素可以繼承上級元素的文字相關樣式，元素自帶效果不受繼承影響

比如:超連結a標籤的字型顏色，h1-h6字型大小
層疊性

多個選擇器有可能選擇到同一個元素，如果作用的樣式不同則全部層疊生效，如果作用的樣式相同則由優先順序決定
優先順序

作用範圍越小優先順序越高 id>class>標籤名>繼承(繼承屬於間接選中)

四、定位(非常重要)

4.1 定義

　　排列(擺放)元素的方式

4.2 分類

靜態定位(文件流定位)

顯示特點:預設情況下,塊元素垂直排列,行內元素左右排列，這種預設排列的方式叫預設定位,也叫文件流定位

格式:position:static(預設)

移動元素:通過外邊距

缺點:定位單調上下或者左右

特殊定位

浮動定位: 可以讓塊元素左右排列

相對定位: 讓元素以自身為目標產生微小的偏移

絕對定位: 讓元素以父輩為目標產生較大的偏移

固定定位: 讓元素以視窗為目標產生巨大的偏移

4.3 相對定位

顯示特點:目標不離隊(不脫離流)以自身為目標產生偏移,通常偏移量很小,不管元素在哪裡仍然佔用原來的位置

格式:position: relative;

移動元素:通過top/bottom/left/right 讓元素相對於初始位置做位置偏移

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>相對定位</title>
  <style type="text/css">
    div {
      width: 100px;
      height: 100px;
      border: 1px solid green;
     }

    /* #d2 {
     
       position: relative;
       left: 150px;
       top: 150px;
     } */

    #d2:hover {
       /* 相對定位 */
       position: relative;
      left: 150px;
      top: 150px;
     }

  </style>
</head>
<body>
  <div>div1</div>
  <div id="d2">div2</div>
  <div>div3</div>
</body>
</html>

4.4 絕對定位

以帶有position屬性的父輩為目標產生偏移，若父輩都有position則以就近的父輩為目標，若父輩都沒有position則以body為目標

顯示特點:目標離隊(脫離流)

格式:position: absolute;

移動元素:通過top/bottom/left/right 讓元素相對於視窗(預設)或某一個上級元素 (需要在上級元素中做相對定位)做位置偏移

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>絕對定位</title>
  <style type="text/css">
    div {
      width: 100px;
      height: 100px;
      border: 2px solid green;
     }

    #d2 {
      position: absolute;
      top: 100px;
      left: 100px;
     }
    
    #father {
      width: 200px;
      height: 200px;
      background-color: royalblue;
      margin: 100px;
      position: relative;
     }

    #son {
      width: 100px;
      height: 100px;
      background-color: lightsalmon;
      /* 以父級元素為基準，進行絕對定位 */
      position: absolute;
      left: 20px;
      top: 20px;
     }

  </style>
</head>
<body>
  <div>div1</div>
  <div id="d2">div2</div>
  <div>div3</div>

  <div id="father">
    <div id="son"></div>
  </div>

</body>
</html>

4.5 固定定位

以瀏覽器視窗為目標產生偏移

顯示特點:目標離隊(脫離流)

格式position: fixed;

移動元素:通過top/bottom/left/right 讓元素相對於視窗做位置偏移

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>固定定位</title>
  <style type="text/css">
    div {
      width: 40px;
      height: 40px;
      border: 2px solid red;
      background-color: blue;
      position: fixed;
      left: 100px;
      top: 400px;
     }
  </style>
</head>
<body>
  <img src="../img/長圖.png">
  <div>一動不動</div>
</body>
</html>

4.6 浮動定位

作用: 可以讓塊元素左右排列顯示

特點: 浮動的目標會離隊(脫離流)

1)元素從當前行向左或向右浮動，當撞到上級元素邊框或其它浮動元素時停止。

2)如果一行顯示不下會自動換行，換行時有可能被卡住

3)如果元素的所有子元素全部浮動則自動識別的高度為0，通過給元素新增 overflow:hidden解決

步驟: 1)目標離隊; 2)弟弟前進; 3)目標到達指定位置;

格式: 左浮動float:left,右浮動float:right

右浮動案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>右浮動</title>
  <style type="text/css">
    div {
      width: 100px;
      height: 100px;
      margin: 10px;
     }
    #d1 {
      background-color: red;
      
     }
    #d2 {
      background-color: green;
      
     }
    #d3 {
      background-color: blue;
      
      
     }
    /* 
     浮動會讓元素脫離文件流，如果是當前文件流中某一個元素設定了浮動，
     為了防止干擾整個文件流，建議其他元素也進行設定浮動
     */
    #d1,#d2,#d3 {
      float: right;
     }

  </style>
</head>
<body>
  <div id="d1">div1</div>
  <div id="d2">div2</div>
  <div id="d3">div3</div>
</body>
</html>

左浮動案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>左浮動</title>
  <style type="text/css">
    div {
      width: 100px;
      height: 100px;
      margin: 10px;
     }
    #d1 {
      background-color: red;
      
     }
    #d2 {
      background-color: green;
      
     }
    #d3 {
      background-color: blue;
      
      
     }
    /* 
     浮動會讓元素脫離文件流，如果是當前文件流中某一個元素設定了浮動，
     為了防止干擾整個文件流，建議其他元素也進行設定浮動
     */
    #d1,#d2,#d3 {
      float: left;
     }

  </style>
</head>
<body>
  <div id="d1">div1</div>
  <div id="d2">div2</div>
  <div id="d3">div3</div>
</body>
</html>

4.7 練習

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>照片牆練習</title>
  <style type="text/css">
    body {
      background-color: cadetblue;
     }
    ul {
      /* 去除列表前面的點 */
      list-style-type: none;
      width: 780px;
      margin: 20px auto;
      /* 去除左側自帶的內邊距 */
      padding: 0;
     }
    li {
      width: 218px;
      padding: 10px;
      margin: 10px;
      border: 1px solid #ccc;
      float: left;
      background-color: #fff;
     }
    p {
      text-align: center;
     }
    li:hover {
      position: relative;
      left: 2px;
      top: -2px;
     }

  </style>
</head>
<body>
  <!-- 無序列表實現照片牆 -->
  <ul>
    <li>
      <img src="../img/01.jpg">
      <p>啊，Teacher蒼！！！</p>
    </li>
    <li>
      <img src="../img/02.jpg">
      <p>您在何方？</p>
    </li>
    <li>
      <img src="../img/03.jpg">
      <p>莫非是去了xx地方</p>
    </li>
    <li>
      <img src="../img/04.jpg">
      <p>聽說那邊的風景還不錯</p>
    </li>
    <li>
      <img src="../img/05.jpg">
      <p>回來的時候記得帶點土特產</p>
    </li>
    <li>
      <img src="../img/06.jpg">
      <p>想您！！！</p>
    </li>
  </ul>
</body>
</html>

4.8 總結

相對定位：如果偏移量較小，並且不脫離文件流(不離開之前的位置)
固定定位：如果元素需要掛載到視窗上不動
浮動定位：如果塊級元素需要左右排列
絕對定位：如果以上的定位都不能滿足要求，就採用絕對定位(不要糾結)

WEB01_Day03(上)-盒子模型、文字相關樣式、CSS三大特性、定位

一、盒子模型 1.1 定義：　　盒子模型是所有標籤(HTML元素)都擁有的模型特徵。盒子模型中規定所有標籤擁有的層級結構，使用盒子模型可以進行對標籤元素進行修飾和定位處理。如圖所示：

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

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

css規範、行高、三大特性、背景、盒子模型

CSS書寫規範空格規範選擇器與 {}之間必須包含空格示例： .selector{} 屬性名與之後的 : 之間不允許包含空格，: 與屬性值之間必須包含空格

CSS三大特性及盒子模型，border；padding及margin的介紹

今天是CSS的第三天，主要學習了CSS的三大特性及盒子模型。重點掌握border；padding及margin的用法！

相空間重構求關聯維數——GP演算法、自相關法求時間延遲tau、最近鄰演算法求嵌入維數m

技術標籤：演算法相空間重構求關聯維數——GP演算法、自相關法求時間延遲tau、最近鄰演算法求嵌入維數m

CSS三大特性與盒子模型

------------恢復內容開始------------ CSS三大特性 CSS層疊性 CSS繼承性 CSS優先順序 !important都具有最大優先順序>行內》ID 》標籤》萬用字元》繼承

鎖：synchronized（synchronized保證三大特性、synchronized的特性）

1、synchronized保證三大特性原子性（1）使用synchronized保證原子性在第一個執行緒獲取到鎖之後，在他執行完之前不允許其他的執行緒獲取鎖並操作共享資料，從而保證了程式的原子性。synchronized保證原子性的原

專案初始化、元件資料區域性化處理、子元件、父元件、路由邏輯跳轉、元件傳參、元件的生命週期鉤子、路由傳、全域性配置自定義css與js、

```python\"\"\"1）路由：邏輯跳轉、路由傳參2）專案元件的資料區域性化處理：data: {} => data: function(){ return {} } => data(){ return{} }3）元件的宣告週期4）元件間通訊5）各種第三方外掛：vuex、axi

4-10 CSS 三大特性（層疊性、繼承性、優先性（權重））

13.1 層疊性　　長江後浪推前浪，後浪死在沙灘上。（但是樣式不衝突，不會造成層疊）

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

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