04-2個常用的文字屬性

村里唯一的运维發表於2024-06-11

01 text-decoration

<!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>Document</title>
   <style>
      .baidu {
         text-decoration: underline;
         cursor: pointer;
      }
      .google {
         text-decoration: line-through;
      }
      .binying {
         text-decoration: overline;
      }
   </style>
</head>
<body>
   <!-- a元素預設有新增text-decoration -->
   <a href="http://www.baidu.com">百度一下</a>
   <!-- span元素新增下劃線 -->
   <span class="baidu">百度一下</span>
   <!-- 裝飾線其它的值 -->
   <span class="google">谷歌一下</span>
   <span class="binying">必應一下</span>
</body>
</html>

效果如下
image

02 text-align

2.1 常用值

2.2 直接翻譯

是設定文字的對齊方式
但是可以讓圖片居中,這個解釋就不是那麼合適

<!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>Document</title>
   <style>
      .box {
         background-color: red;
         color: white;
         height: 200px;
         text-align: center;
      }
      img {
         width: 100px;
      }
   </style>
</head>
<body>
   <div class="box">
      <img src="./images/diqiu.jpg" alt="圖片">
   </div>
</body>
</html>

效果如下

2.3 MDN解釋

定義行內內容(例如文字)如何相對它的塊父元素對齊
用2個div元素演示(div是塊級元素)
設定居中發現並沒有居中

<!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>Document</title>
   <style>
      .box {
         background-color: red;
         height: 300px;
      }
      .content {
         background-color: green;
         height: 200px;
         width: 200px;
      }
   </style>
</head>
<body>
   <div class="box">
      <div class="content"></div>
   </div>
</body>
</html>

效果如下
image
用屬性text-align設定居中，可以發現這個綠色的盒子沒有居中

<!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>Document</title>
   <style>
      .box {
         background-color: red;
         height: 300px;
         /* 設定居中沒有起到效果,可以發現這個解釋不合理 */
         text-align: center;
      }
      .content {
         background-color: green;
         height: 200px;
         width: 200px;
      }
   </style>
</head>
<body>
   <div class="box">
      <div class="content"></div>
   </div>
</body>
</html>

效果如下
image
所以MDN對這個屬性的解釋也不是那麼準確

2.4 官方解釋

image 這也就能解釋為什麼上述的實驗中為什麼沒有居中的原因，div是一個塊級元素 改變元素的屬性 
<!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>Document</title>
   <style>
      .box {
         background-color: red;
         height: 300px;
         text-align: center;
      }
      .content {
         background-color: green;
         height: 200px;
         width: 200px;
         display: inline-block;
      }
   </style>
</head>
<body>
   <div class="box">
      <div class="content"></div>
   </div>
</body>
</html>

效果如下
image

相關文章