整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML怎么設置input框大小,實例在線

          HTML怎么設置input框大小,實例在線

          TML怎么設置input框大小,實例在線

          HTML設置input框大小的方法

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

          input{width:value1;height:value2}

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

          HTML設置input框大小的實例代碼,及在線編輯器

          <input type='text'><br><br>
          <input type='text' id='inp'>
          
          <style>
            #inp{width:100%;height:50px;}
          </style>

          笨鳥工具-璞玉天成,大器晚成

          原文及在線編輯器:HTML怎么設置input框大小,實例在線 - HTML教程

          、html概述

          1、html標簽是用來給文本添加語義的,而不是用來修飾文本的;

          2、<meta charset="GBK">指定字符集(GB2312、UTF-8),html保存和指定字符一樣,才不會亂碼;

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

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

          二、基礎標簽

          1、h、p 和 hr 標簽

          • 三個標簽都是占一行

          2、注釋:<!-- -->

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

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

          4、換行:<br> 用于內容未完的換行

          5、跳轉:<a href=" "></a>

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

          6、base 標簽:<base target="_self ">

          • 統(tǒng)一指定 a 標簽怎么打開,寫在 head 中

          7、假鏈接:點擊不會跳轉

          • a 標簽的 href 屬性值為 # 或者 javascript
          • # 會跳轉到頁面的頂部,而 js 不會

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

          • 可以跳轉到頁面的指定位置
          • 可以跳轉到其他頁面的指定位置,只需在 # 前面加上頁面的路徑即可
          • 跳轉無過度動畫

          三、列表標簽

          1、無序列表(!)

          • <ul><li><\li><\ul>;
          • 整體不可分割;
          • ul 除了 li 不建議再加其他的標簽,li 標簽中可以放其他標簽來豐富內容;
          • li 中還可嵌套列表;
          • ws快捷生成 ul>li*3>h2+p;

          2、有序列表(*)

          • <ol><li><\li><\ol>;

          3、定義列表

          ?

          • dt 是標題,dd 是具體的描述;
          • 推薦一個 dt 一個 dd ,也可以一個 dt 對多個 dd 或者沒有 dd;
          • dl 中不建議加其他標簽,二 dt 和 dd 可以加;
          • 應用:網站尾部,圖文混排(仿京東做個網站的尾部);

          四、表格標簽

          1、格式

          ?

          • 表格的邊框默認不顯示(border)

          2、屬性

          (1)寬高

          • table 和 td 可用;
          • 默認高寬根據內容調整;
          • td 設置高寬只會改變當前單元格的狀態(tài),而不會改變 table 的高寬;

          (2)水平和垂直對齊(align 和 valign)

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

          (3)內邊距和外邊距(cellpadding 和 cellspacing)

          • 兩個屬性都是 table 的;
          • 外邊距是指格子與格子之間的空隙,而內邊距是指格子與文字之間的間隙;

          (4)細線表格

          • 先給 table 設置 bgcolor;
          • 再給 tr 設置 bgcolor;
          • 最后 table 設置 cellspacing;

          3、表格的其他標簽

          (1)caption:表格的標題標簽,必須寫在 table 內而且需緊跟 table

          (2)th:th 和 td 同級,th 有加粗的效果

          4、表格的結構

          (1)組成:caption 標題、thead 表頭、tbody 主體、tfoot 尾部

          (2)說明:

          • 瀏覽器自動添加 tbody;
          • table 設置高度后,tfoot 和 thead 的高度是不會變化的;

          5、單元格的合并

          (1)水平方向:td 屬性 colspan="2";

          (2)垂直方向:td 屬性 rowspan="2";

          五、表單標簽

          1、格式

          ?

          2、input 標簽

          (1)type=text:

          (2)password:

          (3)radio:互斥要設置 name 相同;默認選中 checked

          (4)checkbox:選中 checked

          (5)button:

          (6)image:

          (7)reset:value 修改標題

          (8)submit:

          • form 的 action 確定提交的地址
          • 提交數據加 name 屬性

          (9)hidden:

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

          *相關標簽:

          • label 標簽:讓文字與 input 標簽綁定;兩種綁定的方式:

          ?

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

          3、非 input 標簽

          (1)select

          ?

          (2)textarea

          • cols 和 rows 指定輸入的行列,但是還是可以無限輸入
          • 默認可拉伸,也可通過 css 固定大小

          4、練習

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

          (2)表單添加邊框可以在 form 中添加 fieldset 來實現

          六、多媒體標簽

          1、video 標簽

          (1)格式:<video src=" " autoplay="autoplay"></video>;

          (2)屬性:controls(控制條)poster(海報)loop(循環(huán))preload(預加載,與autoplay沖突)muted(靜音)width/height;

          3)另一種 video 格式:解決瀏覽器的兼容

          ?

          (4)讓所有的瀏覽器支持 video 標簽:通過 js 框架來實現

          2、audio 標簽

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

          3、details 和 summary 標簽

          (1)格式:

          ?

          4、marquee標簽(跑馬燈效果)

          (1)w3c 不推薦,但是瀏覽器的支持好

          (2)屬性:direction(方向)scrollamount(滾動的速度)loop(滾動次數,默認-1)behavior(滾動類型 slide)

          (3)廢棄的標簽:<br><hr><font><b>加粗<u>下劃線<i>斜體<s>刪除線(無語義)

          替代的標簽:<strong><ins><em><del>(加入了語義)

          5、字符實體

          (1)&nbsp;空格 &lt;&gt; &copy;版權符號

          (2)理解:html 占用了的不顯示的特殊字符用另外的代替符號表示,使他們正常在 html 頁面上顯示

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

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

          width 屬性

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

          Min Width

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

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

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

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

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

          min-width 和 padding

          在內容較長的情況下,min-width可以擴展按鈕的寬度,而水平方向上的padding應該被添加,以實現一個合適的外觀按鈕。

          Max Width

          在設置max-width值時,它的好處在于防止width屬性使用的值超過max-width的指定值。max-width的默認值是none。

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

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

          使用最小寬度和最大寬度

          當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值。 結果是元素寬度未超過其包含的塊/父元素的50%。

          height 屬性

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

          min-height

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

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

          我們有一個帶有描述文本的部分。目標是為section設置一個最小高度,這樣它就可以處理短或長內容。考慮下面的基本情況

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

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

          是的,你猜對了!section的高度將展開以包含新內容。有了它,我們就可以構建靈活的組件,并對其內容做出響應。

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

          max-height

          在設置max-height值時,它的好處在于防止height屬性使用的值超過max-height的指定值。注意,max-height的默認值是none。

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

          最小和最大屬性的用例

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

          標簽列表

          當有一個標簽列表時,建議限制一個標簽的最小寬度,這樣如果它的內容很短,它的外觀就不會受到影響。

          通過具有這種靈活性,無論內容有多短,標簽都將看起來不錯。 但是,如果內容作者輸入了一個非常長的標簽名稱,而他使用的內容管理系統(tǒng)沒有標簽的最大字符長度,將會發(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,標簽寬度將被限制為特定值。 但是,這還不夠,標簽名稱應被截斷。

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

          按鈕

          對于按鈕的最小值和最大值有不同的用例,因為按鈕組件有多種變體。考慮下面的圖:

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

          使用 flexbox 將最小寬度設置為零

          min-width的默認值是auto,它被計算為0。當一個元素是一個flex項時,min-width的值不會計算為零。flex 項目的最小大小等于其內容的大小。

          根據CSSWG:

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

          考慮下面的例子

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

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

          由于title是flex項目,因此解決方案是重置min-width并將其強制為零。

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

          下面是修復后的樣子

          根據CSSWG:

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

          意味著,將overflow設置為visible值以外的值會導致min-width被計算為0,這解決了我們不設置min-width: 0的問題。

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

          使用 flexbox 將最小高度設置為零

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

          考慮以下示例:

          用紅色表示的文本應該在父文本中裁剪。因為面板主體是一個flex項目,所以它的min-height與它的內容相等。為了防止這種情況,我們應該重新設置最小高度值。看看HTML和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,這將重置該屬性,并且現在應該可以正常工作。

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

          混合最小寬度和最大寬度

          在某些情況下,我們有一個最小寬度的元素,但同時,它沒有最大寬度。這可能會導致組件太寬,而我們并不想這樣做。考慮以下示例

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

          我為圖像添加了以下CSS:

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

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

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

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

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

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

          最大寬度和ch單位

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

          <!-- HTML代碼 -->
          
          <div>0000</div>
          
          /* CSS代碼 */
          
          div {
            width: 3ch;
            background: powderblue;
          }

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

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

          對高度未知的元素進行動畫處理

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

          請考慮以下示例:

          單擊菜單按鈕后,菜單應隨動畫從上到下滑動。 如果沒有固定的高度(不建議這樣做),除非使用JavaScript,否則這是不可能的。 但是,對于max-height,這是可能的。 想法是為高度添加一個較大的值,例如max-height:20rem,可能無法達到,然后我們可以使用動畫從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 元素的最小高度

          一般來說,我不喜歡給元素添加固定的高度。我覺得這樣做,會破壞流式布局的結構。但有些情況設置固定高度卻很有用。

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

          是,當內容較長時,它會溢出并離開hero包裝器,這可不太好。

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

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

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

          模態(tài)組件

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

          思路1

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

          思路2

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

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

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

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

          最小高度和粘性頁腳

          當一個網站的內容不夠長,它希望看到頁腳粘到底部。讓我們用一個可視化的例子來更好地展示這一點。

          請注意,頁腳未粘貼在瀏覽器窗口的末尾。 那是因為內容不足以達到瀏覽器窗口高度的長度。 修復后,其外觀應如下所示:

          首先,將body元素作為flexbox容器,然后將其最小高度設置為視口高度的100%。

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

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

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

          我們有一個尺寸為644 * 1000像素的圖像。 為了使其流暢,我們需要以下內容:

          • 縱橫比:高度/寬度
          • 容器的寬度:可以是固定數字,也可以是動態(tài)數字(100%)
          • 設置height為視口寬度的100%乘以縱橫比
          • 設置max-heigh,該高度是容器的寬度乘以縱橫比
          • max-width設置為等于容器寬度

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


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


          主站蜘蛛池模板: 婷婷亚洲综合一区二区| 无码视频一区二区三区| 日韩在线一区高清在线| 精品视频在线观看你懂的一区| 人妻av无码一区二区三区| 国产精品亚洲高清一区二区| 免费高清av一区二区三区| 久久久久一区二区三区| 日韩制服国产精品一区| 日本一区二区三区在线视频观看免费 | 亚洲国产韩国一区二区| 中文人妻无码一区二区三区| 一区二区三区免费精品视频| 国产一区二区三区国产精品| 日韩视频一区二区在线观看| 亚洲av成人一区二区三区观看在线 | 精品中文字幕一区在线| 最新中文字幕一区| 无码AV中文一区二区三区| 国精产品一区一区三区免费视频 | 国产午夜精品一区二区三区| 在线日韩麻豆一区| 精品在线视频一区| 亚洲美女高清一区二区三区 | 午夜肉伦伦影院久久精品免费看国产一区二区三区| 激情综合一区二区三区| 中文字幕一区二区三区精彩视频| 中文字幕一区二区三区人妻少妇| 91一区二区视频| 狠狠爱无码一区二区三区| 国产日韩高清一区二区三区| 国产高清不卡一区二区| 国产av一区二区精品久久凹凸| 精品一区二区三区影院在线午夜| 国内偷窥一区二区三区视频| 国产日韩一区二区三区| 中文人妻av高清一区二区| 国内精品一区二区三区最新| 久久精品国产一区二区三区| 亚洲福利电影一区二区?| 精品人妻少妇一区二区|