前端学习——经常出现的width
时间：07-29来源：作者：点击数：
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"> 设置宽度
方便获取更多学习、工作、生活信息请关注本站微信公众号
湘公网安备 43102202000103号