前端學習——經常出現的width

xukai871105發表於2014-06-28
前端
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"> 設定寬度
 



相關文章