設置input的高度和寬度

一、input的基本概念

input是在HTML中最基本的表單控制項之一，用於收集用戶輸入的數據。通過設置不同的屬性，可以讓input的外觀和行為發生變化。input控制項的高度和寬度是其中非常重要的兩個屬性。

二、設置input的高度

設置input的高度是通過CSS樣式表來實現的，常見的方式有以下兩種：

方式一：使用height屬性設置input的高度。

input {
  height: 30px;
}

這樣設置後，input的高度就變成了30px。如果想要讓所有的input都應用該樣式，可以使用如下代碼：

input[type="text"], input[type="password"], input[type="email"] {
  height: 30px;
}

這裡使用了屬性選擇器，表示選擇屬性類型為text、password和email的所有input控制項，並將它們的高度設置為30px。

方式二：使用line-height屬性設置input的高度。

input {
  height: auto;
  line-height: 30px;
}

這樣設置後，input的高度會根據內容自適應，但是它的行高（也就是字體上下的間距）會被設置為30px，保證了輸入的內容能夠垂直居中顯示。

三、設置input的寬度

和設置input的高度類似，設置input的寬度也是通過CSS樣式表來實現的。

方式一：使用width屬性設置input的寬度。

input {
  width: 200px;
}

這樣設置後，input的寬度就變成了200px。如果想要讓所有的input都應用該樣式，可以使用如下代碼：

input[type="text"], input[type="password"], input[type="email"] {
  width: 200px;
}

這裡同樣使用了屬性選擇器，表示選擇屬性類型為text、password和email的所有input控制項，並將它們的寬度設置為200px。

方式二：使用百分比設置input的寬度。

input {
  width: 50%;
}

這樣設置後，input的寬度會根據父元素的寬度自適應，佔據父元素的50%寬度。

四、同時設置input的高度和寬度

有時候我們需要同時設置input的高度和寬度，可以通過CSS樣式表中的兩個屬性height和width來實現：

input {
  height: 30px;
  width: 200px;
}

這樣設置後，input的高度為30px，寬度為200px。

五、input的自適應

如果想要讓input的大小根據內容自適應，並且不受固定寬度或高度的限制，可以使用以下CSS樣式表中的代碼：

input {
  width: auto;
  height: auto;
}

這樣設置後，input的大小會根據內容自適應，並且不受固定寬度或高度的限制。