如何設置元素寬度？

一、如何設置頁面高度和寬度？

設置頁面的高度和寬度可以使用CSS的height和width屬性，如下所示：

<style>
  body {
    height: 1000px;
    width: 800px;
  }
</style>

上面的代碼將body元素的高度設置為1000像素，寬度設置為800像素。注意，這裡的單位為像素，也可以使用其他長度單位。

二、如何設置像素高寬度？

可以使用CSS的height和width屬性設置元素的像素高寬度，如下所示：

<style>
  div {
    height: 200px;
    width: 300px;
    background-color: yellow;
  }
</style>
<div></div>

上面的代碼將div元素的高度設置為200像素，寬度設置為300像素，並設置了背景顏色為黃色。

三、如何設置圖像的高度和寬度？

使用HTML的<img>標籤可以插入圖像，在該標籤中使用height和width屬性可以設置圖像的高度和寬度：

<img src="example.jpg" width="300" height="200">

上面的代碼將名為example.jpg的圖像插入到頁面中，並設置圖像的高度為200像素，寬度為300像素。

四、如何設置行內元素的寬高？

行內元素（比如<span>、<a>等）默認不接受height和width屬性，但可以使用CSS的line-height屬性設置高度，使用padding和margin屬性設置寬度：

<style>
  span {
    line-height: 40px;
    padding: 0 10px;
    margin: 0 10px;
    background-color: yellow;
  }
</style>
<span>Lorem Ipsum</span>

上述代碼將<span>元素的行高設置為40像素，內邊距設置為上下0像素，左右10像素，外邊距設置為上下0像素，左右10像素，背景顏色為黃色。

五、如何為元素設置透明度？

使用CSS的opacity屬性可以為元素設置透明度，取值範圍為0到1（0表示完全透明，1表示完全不透明）：

<style>
  div {
    opacity: 0.5;
  }
</style>
<div>Lorem Ipsum</div>

上述代碼將<div>元素的透明度設置為0.5，即半透明狀態。

六、如何設置相片的寬度和高度？

與設置圖像的高度和寬度相似，可以使用<img>標籤設置相片的高度和寬度：

<img src="example.jpg" style="width: 200px; height: 300px;">

上述代碼將名為example.jpg的相片插入到頁面中，並設置相片的高度為300像素，寬度為200像素。這裡使用了style屬性，可以在其中設置CSS樣式。

七、元素未設置寬的情況下獲取到寬度

如果一個元素未設置寬度，在一些情況下也可以獲取到其寬度。比如使用JavaScript可以獲取到元素的clientWidth屬性，該屬性等於元素的寬度加上左右內邊距的寬度：

<style>
  div {
    padding: 10px;
    background-color: yellow;
  }
</style>
<div id="myDiv">Lorem Ipsum</div>
<script>
  var myDiv = document.getElementById('myDiv');
  console.log(myDiv.clientWidth); // 輸出：220
</script>

在上述代碼中，<div>元素未設置寬度，但設置了左右內邊距為10像素，因此獲取到的clientWidth為220像素。