CSS控制輸入框?qū)捀?/p>

在CSS中，我們可以使用多種方法來(lái)控制輸入框的寬高，以下是一些常見(jiàn)的技巧：

1、使用width和height屬性

通過(guò)CSS的width和height屬性，我們可以直接設(shè)置輸入框的寬度和高度。

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

上述代碼將輸入框的寬度設(shè)置為200像素，高度設(shè)置為30像素。

2、使用padding和border屬性

除了直接設(shè)置寬高，我們還可以利用padding和border屬性來(lái)控制輸入框的大小。

input {
  padding: 10px;
  border: 1px solid #000;
}

上述代碼將輸入框的內(nèi)邊距設(shè)置為10像素，邊框?qū)挾仍O(shè)置為1像素，通過(guò)調(diào)整這些值，我們可以間接改變輸入框的大小。

3、使用box-sizing屬性

CSS的box-sizing屬性可以指定輸入框的盒模型類型，默認(rèn)情況下，輸入框的大小只包括內(nèi)容區(qū)域，而不包括邊框和填充，我們可以將box-sizing屬性設(shè)置為border-box，這樣輸入框的大小就會(huì)包括邊框和填充。

input {
  box-sizing: border-box;
  width: 200px;
  padding: 10px;
  border: 1px solid #000;
}

上述代碼將輸入框的盒模型類型設(shè)置為border-box，這樣寬度就會(huì)包括邊框和填充。

4、使用flex布局

如果我們將輸入框放置在一個(gè)flex容器中，我們還可以利用flex布局來(lái)控制輸入框的大小。

.container {
  display: flex;
}
input {
  flex: 1;
}

上述代碼將輸入框放置在一個(gè)flex容器中，并通過(guò)flex屬性來(lái)分配空間，這樣，輸入框就會(huì)根據(jù)容器的大小自動(dòng)調(diào)整寬度。