前端學習——經常出現的width
0.前言
在HTML設計中width經常出現,width可以有效的控制網頁元素的寬度和高度,但是width卻有兩種完全不同的表現形式——屬性和樣式。在HTML中,屬性和網頁標籤相伴並被包裹在<>內,而樣式則和style相伴。table中相關元素有width屬性,而表單控制元件中多數沒有width屬性,只能通過樣式設定寬度。這樣的寫法往往是錯誤的:
<input type="text" width="100px">
下面就通過幾個例子說明問題。
1.表格中的width——屬性
表格中屬性和樣式都可以改變寬度,為了說明問題表格具有外邊框。
【網頁效果】
圖1 設定表格中的單元格寬度
【屬性方法】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試Table</title>
</head>
<body>
<div style="margin:0px auto;width:300px">
<div style="margin-top:20px">
<table border="1px" align="center">
<tbody>
<tr><td width="100px">100px</td></tr>
<tbody>
</table>
</div>
<div style="margin-top:20px">
<table border="1px" align="center">
<tbody>
<tr><td width="200px">200px</td></tr>
<tbody>
</table>
</div>
</div>
</body>
</html> <span style="background-color: inherit; font-family: Tahoma;"> </span>
【樣式方法】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試Table</title>
</head>
<body>
<div style="margin:0px auto;width:300px">
<div style="margin-top:20px">
<table border="1px" align="center">
<tbody>
<tr><td style="width:100px">100px</td></tr>
<tbody>
</table>
</div>
<div style="margin-top:20px">
<table border="1px" align="center">
<tbody>
<tr><td style="width:200px">200px</td></tr>
<tbody>
</table>
</div>
</div>
</body>
</html>
【差異】
【1】屬性寫法:<tr><td width="100px">100px</td></tr>
【2】表格寫法:<tr><td style="width:200px">200px</td></tr>
【3】效果完全相同
2.表單中的width——樣式
雖然表格中的單元格可以通過width屬性控制寬度,但是表單卻沒有width屬性(除了表單中的圖片控制元件),由於沒有屬性只能通過樣式設定表單寬度。
<input type="text" width="100px">這種寫法是沒有效果的,因為text文字框沒有這個屬性。
【網頁效果】
圖2 設定表單text控制元件寬度
【樣式方法】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試Input</title>
</head>
<body>
<div style="margin:0px auto;width:300px">
<div style="margin-top:20px">
<input type="text" value="100px" style="width:100px">
</div>
<div style="margin-top:20px">
<input type="text" value="200px" style="width:200px">
</div>
</div>
</body>
</html>
【總結】
【1】<input type="text" value="100px" style="width:100px"> 設定寬度
相關文章
- web前端小白經常出現“四”個錯誤Web前端
- 我的前端學習經歷前端
- 前端學習(2339):React出現的歷史背景前端React
- 那些常見的Web前端學習誤區分享!Web前端
- 經常出現 HTTP Status 500 -錯誤HTTP
- 前端學習路線及面試經驗前端面試
- 使用scope="session"的javaBean時,經常會出現ClassCastExceptionSessionJavaBeanASTException
- 討論:學習Java是否一定要學習前端常識麼?Java前端
- 換IP經常出現的問題及其解決方案
- 招聘中經常伴隨Java出現的20項技術Java
- ie6實現min-width/max-width
- 前端系統學習——前端學習路線前端
- 前端學習前端
- 現在加入Web前端學習還有市場嗎?自己是否適合學習前端Web前端
- 經驗分享:如何系統學習 Web 前端技術?Web前端
- 前端學習之Bootstrap學習前端boot
- gitea連線ldap經常出現未啟用狀態GitLDA
- max-width和width的區別
- 現在學習web前端好找工作嗎?Web前端
- 神經網路:提升深度學習模型的表現神經網路深度學習模型
- 如何解決Hive中經常出現的資料傾斜問題Hive
- jdon執行一段時間後經常出現的錯誤
- 如何學習前端?前端
- 前端學習方法前端
- 前端學習框架前端框架
- Java--異常的學習Java
- 如何處理MySQL經常出現CPU佔用率達到99%MySql
- 在使用海外IP代理時會經常出現哪些誤解?
- 我的前端學習路線前端
- 好程式設計師Java教程分享Java中經常出現的問題程式設計師Java
- Web前端如何學?Web前端學習方法分享Web前端
- 對於剛開始學習的人Xcode最經常使用的快捷鍵XCode
- web前端學習——零基礎web前端學習路線Web前端
- java的個人學習經驗Java
- 一張圖學習常見this的指向
- ChatGpt的出現,前端真的已死?ChatGPT前端
- web前端學習之路Web前端
- 前端學習路線前端