HTML怎么設(shè)置input框大小，實例在線

TML怎么設(shè)置input框大小，實例在線

HTML設(shè)置input框大小的方法

HTML input元素定義的輸入框的大小，可以通過CSS的width屬性和height屬性來分別設(shè)置input框的寬度和高度，如果只是設(shè)置這些，input輸入框中的字體并不會跟著改變大小，如果還需要設(shè)置input輸入框內(nèi)字體的大小，則需要另外進(jìn)行設(shè)置。下面的實例來先介紹一下改變input框大小的設(shè)置方法。語法如下：

input{width:value1;height:value2}

提示：input為元素選擇器，也可以通過其它的選擇器，比如id選擇器、類選擇器等等。

HTML設(shè)置input框大小的實例代碼，及在線編輯器

<input type='text'><br><br>
<input type='text' id='inp'>

<style>
  #inp{width:100%;height:50px;}
</style>

笨鳥工具-璞玉天成，大器晚成
原文及在線編輯器：HTML怎么設(shè)置input框大小，實例在線 - HTML教程

、html概述

1、html標(biāo)簽是用來給文本添加語義的，而不是用來修飾文本的；

2、<meta charset="GBK">指定字符集（GB2312、UTF-8），html保存和指定字符一樣，才不會亂碼；

3、<!DOCTYPE html> DTD文檔申明告訴瀏覽器我用的什么協(xié)議來寫的，不是html標(biāo)簽；

4、webstorm快捷鍵大全：https://www.cnblogs.com/yeminglong/p/5995421.html

二、基礎(chǔ)標(biāo)簽

1、h、p 和 hr 標(biāo)簽

三個標(biāo)簽都是占一行

2、注釋：

3、圖片：<img src=" ">

不會獨占一行；
保證不變形，指定寬或者高即可；
title 和 alt 屬性；
src 可以是相對路徑（../ 上一級）和絕對路徑，路徑中盡量不含中文，相對路徑不可跨盤符，路徑分隔統(tǒng)一寫 / ，絕對路徑的可移植性不好；

4、換行： 用于內(nèi)容未完的換行

5、跳轉(zhuǎn)：<a href=" "></a>

支持文字和圖片的跳轉(zhuǎn)；
地址必須加 http 或者 https；
href 可以指定本地的地址；
target（_self 和 _blank）屬性控制跳轉(zhuǎn)是否打開新的選項卡；
title 提示作用；

6、base 標(biāo)簽：<base target="_self ">

統(tǒng)一指定 a 標(biāo)簽怎么打開，寫在 head 中

7、假鏈接：點擊不會跳轉(zhuǎn)

a 標(biāo)簽的 href 屬性值為 # 或者 javascript
# 會跳轉(zhuǎn)到頁面的頂部，而 js 不會

8、錨點：<a href="#id值"><\a>

可以跳轉(zhuǎn)到頁面的指定位置
可以跳轉(zhuǎn)到其他頁面的指定位置，只需在 # 前面加上頁面的路徑即可
跳轉(zhuǎn)無過度動畫

三、列表標(biāo)簽

1、無序列表（!）

<ul><li><\li><\ul>；
整體不可分割；
ul 除了 li 不建議再加其他的標(biāo)簽，li 標(biāo)簽中可以放其他標(biāo)簽來豐富內(nèi)容；
li 中還可嵌套列表；
ws快捷生成 ul>li*3>h2+p；

2、有序列表（*）

<ol><li><\li><\ol>；

3、定義列表

dt 是標(biāo)題，dd 是具體的描述；
推薦一個 dt 一個 dd ，也可以一個 dt 對多個 dd 或者沒有 dd；
dl 中不建議加其他標(biāo)簽，二 dt 和 dd 可以加；
應(yīng)用：網(wǎng)站尾部，圖文混排（仿京東做個網(wǎng)站的尾部）；

四、表格標(biāo)簽

1、格式

表格的邊框默認(rèn)不顯示（border）

2、屬性

（1）寬高

table 和 td 可用；
默認(rèn)高寬根據(jù)內(nèi)容調(diào)整；
td 設(shè)置高寬只會改變當(dāng)前單元格的狀態(tài)，而不會改變 table 的高寬；

（2）水平和垂直對齊（align 和 valign）

水平對齊三個都可以用，而垂直對齊針對 tr 和 td；
table 設(shè)置 align 控制表格在水平方向的對齊，給 tr 和 td 設(shè)置都是控制單元格里的內(nèi)容的對齊方式，不過 tr 影響一行，td 影響一個，tr 和 td 都設(shè)置 td 會覆蓋 tr 的效果；
tr 和 td 設(shè)置 valign 都是控制單元格內(nèi)容的垂直方向的對齊，不過 tr 影響一行，td 影響一個，tr 和 td 都設(shè)置 td 會覆蓋 tr 的效果；

（3）內(nèi)邊距和外邊距（cellpadding 和 cellspacing）

兩個屬性都是 table 的；
外邊距是指格子與格子之間的空隙，而內(nèi)邊距是指格子與文字之間的間隙；

（4）細(xì)線表格

先給 table 設(shè)置 bgcolor；
再給 tr 設(shè)置 bgcolor；
最后 table 設(shè)置 cellspacing；

3、表格的其他標(biāo)簽

（1）caption：表格的標(biāo)題標(biāo)簽，必須寫在 table 內(nèi)而且需緊跟 table

（2）th：th 和 td 同級，th 有加粗的效果

4、表格的結(jié)構(gòu)

（1）組成：caption 標(biāo)題、thead 表頭、tbody 主體、tfoot 尾部

（2）說明：

瀏覽器自動添加 tbody；
table 設(shè)置高度后，tfoot 和 thead 的高度是不會變化的；

5、單元格的合并

（1）水平方向：td 屬性 colspan="2"；

（2）垂直方向：td 屬性 rowspan="2"；

五、表單標(biāo)簽

1、格式

2、input 標(biāo)簽

（1）type=text：

（2）password：

（3）radio：互斥要設(shè)置 name 相同；默認(rèn)選中 checked

（4）checkbox：選中 checked

（5）button：

（6）image：

（7）reset：value 修改標(biāo)題

（8）submit：

form 的 action 確定提交的地址
提交數(shù)據(jù)加 name 屬性

（9）hidden：

-----------------------------------------------------------------------------------------------------------------------

*相關(guān)標(biāo)簽：

label 標(biāo)簽：讓文字與 input 標(biāo)簽綁定；兩種綁定的方式：

datalist 標(biāo)簽：給輸入框綁定輸入的提示：<datalist><option>haha</option></datalist>
h5 中新增的 input 標(biāo)簽：email 、url 、number 、color、date（瀏覽器的支持不好）

3、非 input 標(biāo)簽

（1）select

（2）textarea

cols 和 rows 指定輸入的行列，但是還是可以無限輸入
默認(rèn)可拉伸，也可通過 css 固定大小

4、練習(xí)

（1）表單標(biāo)簽除了 button 外都可以用 value 來指定提交的值

（2）表單添加邊框可以在 form 中添加 fieldset 來實現(xiàn)

六、多媒體標(biāo)簽

1、video 標(biāo)簽

（1）格式：<video src=" " autoplay="autoplay"></video>；

（2）屬性：controls（控制條）poster（海報）loop（循環(huán)）preload（預(yù)加載，與autoplay沖突）muted（靜音）width/height；

（3）另一種 video 格式：解決瀏覽器的兼容

（4）讓所有的瀏覽器支持 video 標(biāo)簽：通過 js 框架來實現(xiàn)

2、audio 標(biāo)簽

（1）使用基本和 video 一樣，屬性只有寬高和 poster 不能用，也是兩種格式

3、details 和 summary 標(biāo)簽

（1）格式：

4、marquee標(biāo)簽（跑馬燈效果）

（1）w3c 不推薦，但是瀏覽器的支持好

（2）屬性：direction（方向）scrollamount（滾動的速度）loop（滾動次數(shù)，默認(rèn)-1）behavior（滾動類型 slide）

（3）廢棄的標(biāo)簽： <hr>加粗下劃線斜體<s>刪除線（無語義）

替代的標(biāo)簽：<ins><del>（加入了語義）

5、字符實體

（1）&nbsp；空格 &lt；&gt； &copy；版權(quán)符號

（2）理解：html 占用了的不顯示的特殊字符用另外的代替符號表示，使他們正常在 html 頁面上顯示

常，我們希望限制元素相對于其父元素的寬度，同時使其具有動態(tài)性。因此，有一個基礎(chǔ)寬度或高度的能力，使其擴(kuò)展的基礎(chǔ)上，可用的空間。比如說，我們有一個按鈕，它的寬度應(yīng)該是最小的，不應(yīng)該低于它的寬度。這就是最大和最小屬性變得方便的地方。

在本文中，我們將詳細(xì)介紹CSS的最大和最小寬度和高度屬性，并使用可能的用例和技巧詳細(xì)解釋每一個屬性。

width 屬性

首先要討論的是與寬度相關(guān)的屬性。我們有min-width和max-width，它們中的每一個都很重要，都有自己的用例。

Min Width

設(shè)置min-width的值時，其好處在于防止width屬性使用的值變得小于min-width的指定值。請注意，min-width的默認(rèn)值是auto，它解析為0。

讓我們舉一個基本的例子來說明這一點。

我們有一個按鈕，里面有一個變化的文本。文本的范圍可能從一個單詞到多個單詞。為了確保即使只有一個單詞，它也有最小寬度，應(yīng)該使用min-width。

最小寬度為100px，這樣即使按鈕的內(nèi)容很短，比如Done，或者只有一個圖標(biāo)，它仍然足夠大，可以被注意到。在使用阿拉伯語等多語言網(wǎng)站時，這一點非常重要。考慮以下來自Twitter的示例：

在以前的情況下，按鈕上帶有單詞“??”，表示完成。按鈕的寬度太小，因此在后面的案例中，我增加了它的最小寬度。

min-width 和 padding

在內(nèi)容較長的情況下，min-width可以擴(kuò)展按鈕的寬度，而水平方向上的padding應(yīng)該被添加，以實現(xiàn)一個合適的外觀按鈕。

Max Width

在設(shè)置max-width值時，它的好處在于防止width屬性使用的值超過max-width的指定值。max-width的默認(rèn)值是none。

max-width的常見且簡單的用例是將其與圖像一起使用。考慮以下示例：

圖像比它的父元素大。通過使用max-width: 100%，圖像的寬度不會超過其父圖像的寬度。如果圖像比父圖像小，則max-width: 100%不會對圖像產(chǎn)生實際影響，因為它比父圖像小。

使用最小寬度和最大寬度

當(dāng)min-width和max-width都用于一個元素時，它們中的哪一個將覆蓋另一個?換句話說，哪個優(yōu)先級更高?

html

<div class="wrapper">
  <div class="sub"></div>
</div>

css

.sub {
  width: 100px;
  min-width: 50%;
  max-width: 100%;
}

初始width值為100px，并在其上加上min-width和max-width值。結(jié)果是元素寬度未超過其包含的塊/父元素的50％。

height 屬性

除了最小和最大寬度屬性外，我們還具有與高度相同的屬性。

min-height

設(shè)置min-height的值時，其好處在于防止使用的height屬性值變得小于min-height的指定值。請注意，最小高度的默認(rèn)值為auto，它解析為0。

我們用一個簡單的例子來演示一下。

我們有一個帶有描述文本的部分。目標(biāo)是為section設(shè)置一個最小高度，這樣它就可以處理短或長內(nèi)容?？紤]下面的基本情況

.sub {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  min-height: 100px;
  color: #fff;
  background: #3c78dB;
}

最小高度為100px，使用flexbox時，內(nèi)容水平和垂直居中。如果內(nèi)容更長，會發(fā)生什么？例如一段？

是的，你猜對了!section的高度將展開以包含新內(nèi)容。有了它，我們就可以構(gòu)建靈活的組件，并對其內(nèi)容做出響應(yīng)。

事例源碼:https://codepen.io/shadeed/pen/cfb600cf30acdae9cf6f9cb5347a37cf

max-height

在設(shè)置max-height值時，它的好處在于防止height屬性使用的值超過max-height的指定值。注意，max-height的默認(rèn)值是none。

考慮下面的示例，其中我為內(nèi)容設(shè)置了max-height。但是，因為它大于指定的空間，所以會發(fā)生溢出。因此，文本超出了其父邊界。

最小和最大屬性的用例

我們將介紹min-width，min-height，max-width和max-height的一些常見和不常見的用例。

標(biāo)簽列表

當(dāng)有一個標(biāo)簽列表時，建議限制一個標(biāo)簽的最小寬度，這樣如果它的內(nèi)容很短，它的外觀就不會受到影響。

通過具有這種靈活性，無論內(nèi)容有多短，標(biāo)簽都將看起來不錯。但是，如果內(nèi)容作者輸入了一個非常長的標(biāo)簽名稱，而他使用的內(nèi)容管理系統(tǒng)沒有標(biāo)簽的最大字符長度，將會發(fā)生什么情況呢？我們也可以使用max-width。

.c-tag {
  display: inline-block;
  min-width: 100px;
  max-width: 250px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /*Other styles*/
}

通過使用max-width，標(biāo)簽寬度將被限制為特定值。但是，這還不夠，標(biāo)簽名稱應(yīng)被截斷。

事例地址：https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16

按鈕

對于按鈕的最小值和最大值有不同的用例，因為按鈕組件有多種變體?？紤]下面的圖：

請注意，按鈕的“Get”寬度太小。如果不設(shè)置最小寬度，則由于任何原因而沒有文本時，情況可能會變得更糟。在這種情況下，設(shè)置最小寬度很重要。

使用 flexbox 將最小寬度設(shè)置為零

min-width的默認(rèn)值是auto，它被計算為0。當(dāng)一個元素是一個flex項時，min-width的值不會計算為零。flex 項目的最小大小等于其內(nèi)容的大小。

根據(jù)CSSWG：

默認(rèn)情況下，flex項目不會縮小到它們的最小內(nèi)容大小(最長單詞或固定大小元素的長度)以下。要更改此設(shè)置，請設(shè)置min-width或 min-height屬性。

考慮下面的例子

這個人的名字有一個很長的單詞，這導(dǎo)致了溢出和水平滾動。盡管如此，我還是在標(biāo)題中添加了下面的CSS來截斷它

.c-person__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

由于title是flex項目，因此解決方案是重置min-width并將其強(qiáng)制為零。

.c-person__name {
    /*Other styles*/
    min-width: 0;
}

下面是修復(fù)后的樣子

根據(jù)CSSWG：

在彈性項目的主軸上可見溢出的項目上，當(dāng)在彈性項目的主軸min-size屬性中指定時，指定自動最小尺寸。

意味著，將overflow設(shè)置為visible值以外的值會導(dǎo)致min-width被計算為0，這解決了我們不設(shè)置min-width: 0的問題。

事例源碼：https://codepen.io/shadeed/pen/398ccffcd437a2fb042f5ce3bdd68c57

使用 flexbox 將最小高度設(shè)置為零

雖然與min-width相比，這是一個不太常見的問題，但是它可能發(fā)生。只是為了確認(rèn)，問題與不能少于其內(nèi)容的彈性項目有關(guān)。結(jié)果min-height值被設(shè)置為與內(nèi)容一樣長。

考慮以下示例：

用紅色表示的文本應(yīng)該在父文本中裁剪。因為面板主體是一個flex項目，所以它的min-height與它的內(nèi)容相等。為了防止這種情況，我們應(yīng)該重新設(shè)置最小高度值?？纯碒TML和CSS是怎么樣的。

HTML

<div class="c-panel">
  <h2 class="c-panel__title"><!-- Title --></h2>
  <div class="c-panel__body">
    <div class="c-panel__content"><!-- Content --></div>
  </div>
</div>

CSS

.c-panel {
  display: flex;
  flex-direction: column;
  height: 180px;
}

.c-panel__body {
  min-height: 0;
}

.c-panel__content {
  overflow-y: scroll;
  height: 100%;
}

通過向面板主體添加min-height: 0，這將重置該屬性，并且現(xiàn)在應(yīng)該可以正常工作。

事例源碼：https://codepen.io/shadeed/pen/dea75b84b1fcfd03e5c21173a40afc20?editors=0100

混合最小寬度和最大寬度

在某些情況下，我們有一個最小寬度的元素，但同時，它沒有最大寬度。這可能會導(dǎo)致組件太寬，而我們并不想這樣做?？紤]以下示例

由于寬度是以像素為單位定義的，因此不能保證上面的方法適用于移動視口。為了解決這個問題，我們可以使用百分比來代替像素作為最小和最大屬性?？紤]下面這個具有article主體的示例。

我為圖像添加了以下CSS：

img {
  min-width: 35%;
  max-width: 70%;
}

事例源碼:https://codepen.io/shadeed/pen/11f49fd1a35ad06ce241bee17c3d3124

####　頁面包裝器/容器

最常用的｀max-width｀用例之一是頁面包裝器或容器。通過向頁面添加最大寬度，我們可以確保內(nèi)容對用戶來說是可讀的、易于瀏覽的。

下面是一個包裝器的例子，它是居中的，左右兩邊有水平的填充。

.wrapper {
    max-width: 1170px;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;
}

最大寬度和ch單位

ch 是一個相對于數(shù)字0的大小，1ch 就是數(shù)字 0 的寬度。如定義一個3ch的寬度，那么就只能裝下 3個0。

<!-- HTML代碼 -->

<div>0000</div>

/* CSS代碼 */

div {
  width: 3ch;
  background: powderblue;
}

在前面的wrapper元素示例中，我們可以利用ch單元，因為它是一個article 主體。

.wrapper {
    max-width: 70ch;
    /* Other styles */
}

對高度未知的元素進(jìn)行動畫處理

在某些情況下，我們面臨著使手風(fēng)琴或移動菜單具有意想不到的內(nèi)容高度的挑戰(zhàn)。在這種情況下，max-height可能是一個很好的解決方案。

請考慮以下示例：

單擊菜單按鈕后，菜單應(yīng)隨動畫從上到下滑動。如果沒有固定的高度（不建議這樣做），除非使用JavaScript，否則這是不可能的。但是，對于max-height，這是可能的。想法是為高度添加一個較大的值，例如max-height：20rem，可能無法達(dá)到，然后我們可以使用動畫從max-height: 0變換到max-height: 20rem。

.c-nav {
    max-height: 0;
    overflow: hidden;
    transition: 0.3s linear;
}

.c-nav.is-active {
    max-height: 22rem;
}

點擊菜單按鈕可以看到動畫的運行。

事例源碼：https://codepen.io/shadeed/pen/164c7ef67f5d4541bddb8bc12b2772da

Hero 元素的最小高度

一般來說，我不喜歡給元素添加固定的高度。我覺得這樣做，會破壞流式布局的結(jié)構(gòu)。但有些情況設(shè)置固定高度卻很有用。

考慮下面的例子，在這里我們有一個設(shè)置了固定高度的hero部分。

是，當(dāng)內(nèi)容較長時，它會溢出并離開hero包裝器，這可不太好。

為了預(yù)先解決這個問題，我們可以使用min-height來代替height。我們可以用這種方式先解決問題，盡管這可能會導(dǎo)致頁面看起來很奇怪，但是我認(rèn)為應(yīng)該首先防止內(nèi)容管理系統(tǒng)(CMS)中發(fā)生這樣的事情。這樣，問題就解決了，看起來也不錯。

內(nèi)容溢出的問題不僅在于內(nèi)容是否大于固定的hero 高度。它可以發(fā)生在屏幕大小調(diào)整作為文本換行的結(jié)果。

如果改用min-height，則上述情況根本不會發(fā)生。

模態(tài)組件

對于模態(tài)組件，它需要最小和最大寬度，以便可以適應(yīng)移動設(shè)備到PC的屏幕上的適應(yīng)。

思路1

.c-modal__body {
    width: 600px;
    max-width: 100%;
}

思路2

.c-modal__body {
    width: 100%;
    max-width: 600px;
}

對于我來說，我更喜歡第二個思路，因為我只需要定義max-width: 600px。modal是一個<div>元素，因此它已經(jīng)具有其父元素的100％寬度，對嗎？

考慮下面為模態(tài)設(shè)計簡化的測試案例。請注意，如果可用視口空間不足，則寬度如何更改為其父級的100％。

事例源碼：https://codepen.io/shadeed/pen/5dcb1c4c6773cc3a97a766c327c36443

最小高度和粘性頁腳

當(dāng)一個網(wǎng)站的內(nèi)容不夠長，它希望看到頁腳粘到底部。讓我們用一個可視化的例子來更好地展示這一點。

請注意，頁腳未粘貼在瀏覽器窗口的末尾。那是因為內(nèi)容不足以達(dá)到瀏覽器窗口高度的長度。修復(fù)后，其外觀應(yīng)如下所示：

首先，將body元素作為flexbox容器，然后將其最小高度設(shè)置為視口高度的100％。

事例源碼：https://codepen.io/shadeed/pen/aeb14f2819b9cc4805275b88c2d55645?editors=1100

最大寬度/高度和視口單位的流體比率

為了使比例容器能夠根據(jù)視口大小進(jìn)行響應(yīng)縮放，引入了padding hack。現(xiàn)在，我們可以通過組合CSS中的視口單位和最大寬度/高度來模仿相同的行為。

我們有一個尺寸為644 * 1000像素的圖像。為了使其流暢，我們需要以下內(nèi)容：

縱橫比：高度/寬度
容器的寬度：可以是固定數(shù)字，也可以是動態(tài)數(shù)字（100％）
設(shè)置height為視口寬度的100％乘以縱橫比
設(shè)置max-heigh，該高度是容器的寬度乘以縱橫比
max-width設(shè)置為等于容器寬度

人才們的【三連】就是小智不斷分享的最大動力，如果本篇博客有任何錯誤和建議，歡迎人才們留言，最后，謝謝大家的觀看。

作者：Ahmad shaded 譯者：前端小智來源：sitepoint 原文：https://www.impressivewebs.com/min-max-width-height-css

在線咨詢

上一篇：JavaScript，原生、jQuery、Axios
下一篇：HTML onClick事件-點擊即可觸發(fā)的魔法

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商