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

时间：2014-06-30 09:09:39 阅读：276 评论：0 收藏：0 [点我收藏+]

0.前言

在HTML设计中width经常出现，width可以有效的控制网页元素的宽度和高度，但是width却有两种完全不同的表现形式——属性和样式。在HTML中，属性和网页标签相伴并被包裹在<>内，而样式则和style相伴。table中相关元素有width属性，而表单控件中多数没有width属性，只能通过样式设置宽度。这样的写法往往是错误的：

下面就通过几个例子说明问题。

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"> 设置宽度

前端学习——经常出现的width,布布扣,bubuko.com

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

标签：html width

原文地址：http://blog.csdn.net/xukai871105/article/details/35566507

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行