TML怎么設置input框大小,實例在線
HTML input元素定義的輸入框的大小,可以通過CSS的width屬性和height屬性來分別設置input框的寬度和高度,如果只是設置這些,input輸入框中的字體并不會跟著改變大小,如果還需要設置input輸入框內字體的大小,則需要另外進行設置。下面的實例來先介紹一下改變input框大小的設置方法。語法如下:
input{width:value1;height:value2}
提示:input為元素選擇器,也可以通過其它的選擇器,比如id選擇器、類選擇器等等。
<input type='text'><br><br>
<input type='text' id='inp'>
<style>
#inp{width:100%;height:50px;}
</style>
笨鳥工具-璞玉天成,大器晚成
原文及在線編輯器:HTML怎么設置input框大小,實例在線 - 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=" ">
4、換行:<br> 用于內容未完的換行
5、跳轉:<a href=" "></a>
6、base 標簽:<base target="_self ">
7、假鏈接:點擊不會跳轉
8、錨點:<a href="#id值"><\a>
1、無序列表(!)
2、有序列表(*)
3、定義列表
?
1、格式
?
2、屬性
(1)寬高
(2)水平和垂直對齊(align 和 valign)
(3)內邊距和外邊距(cellpadding 和 cellspacing)
(4)細線表格
3、表格的其他標簽
(1)caption:表格的標題標簽,必須寫在 table 內而且需緊跟 table
(2)th:th 和 td 同級,th 有加粗的效果
4、表格的結構
(1)組成:caption 標題、thead 表頭、tbody 主體、tfoot 尾部
(2)說明:
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:
(9)hidden:
-----------------------------------------------------------------------------------------------------------------------
*相關標簽:
?
3、非 input 標簽
(1)select
?
(2)textarea
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) ;空格 <;>; ©;版權符號
(2)理解:html 占用了的不顯示的特殊字符用另外的代替符號表示,使他們正常在 html 頁面上顯示
常,我們希望限制元素相對于其父元素的寬度,同時使其具有動態(tài)性。因此,有一個基礎寬度或高度的能力,使其擴展的基礎上,可用的空間。比如說,我們有一個按鈕,它的寬度應該是最小的,不應該低于它的寬度。這就是最大和最小屬性變得方便的地方。
在本文中,我們將詳細介紹CSS的最大和最小寬度和高度屬性,并使用可能的用例和技巧詳細解釋每一個屬性。
首先要討論的是與寬度相關的屬性。我們有min-width和max-width,它們中的每一個都很重要,都有自己的用例。
設置min-width的值時,其好處在于防止width屬性使用的值變得小于min-width的指定值。 請注意,min-width的默認值是auto,它解析為0。
讓我們舉一個基本的例子來說明這一點。
我們有一個按鈕,里面有一個變化的文本。文本的范圍可能從一個單詞到多個單詞。為了確保即使只有一個單詞,它也有最小寬度,應該使用min-width。
最小寬度為100px,這樣即使按鈕的內容很短,比如Done,或者只有一個圖標,它仍然足夠大,可以被注意到。在使用阿拉伯語等多語言網站時,這一點非常重要。 考慮以下來自Twitter的示例:
在以前的情況下,按鈕上帶有單詞“??”,表示完成。 按鈕的寬度太小,因此在后面的案例中,我增加了它的最小寬度。
在內容較長的情況下,min-width可以擴展按鈕的寬度,而水平方向上的padding應該被添加,以實現一個合適的外觀按鈕。
在設置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%。
除了最小和最大寬度屬性外,我們還具有與高度相同的屬性。
設置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值時,它的好處在于防止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”寬度太小。 如果不設置最小寬度,則由于任何原因而沒有文本時,情況可能會變得更糟。 在這種情況下,設置最小寬度很重要。
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
雖然與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 是一個相對于數字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包裝器,這可不太好。
為了預先解決這個問題,我們可以使用min-height來代替height。我們可以用這種方式先解決問題,盡管這可能會導致頁面看起來很奇怪,但是我認為應該首先防止內容管理系統(tǒng)(CMS)中發(fā)生這樣的事情。這樣,問題就解決了,看起來也不錯。
內容溢出的問題不僅在于內容是否大于固定的hero 高度。它可以發(fā)生在屏幕大小調整作為文本換行的結果。
如果改用min-height,則上述情況根本不會發(fā)生。
對于模態(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像素的圖像。 為了使其流暢,我們需要以下內容:
人才們的 【三連】 就是小智不斷分享的最大動力,如果本篇博客有任何錯誤和建議,歡迎人才們留言,最后,謝謝大家的觀看。
作者:Ahmad shaded 譯者:前端小智 來源:sitepoint 原文:https://www.impressivewebs.com/min-max-width-height-css
*請認真填寫需求信息,我們會在24小時內與您取得聯系。