首页 > 代码库 > 前端学习——经常出现的width

前端学习——经常出现的width

2024-07-10 02:34:50   218人阅读

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=http://www.mamicode.com/"100px" style="width:100px">>
    【总结】
    【1】<input type="text" value=http://www.mamicode.com/"100px" style="width:100px"> 设置宽度
 


联系
我们