Front-end learning-Frequently seen width

0. Preface width is often used in HTML design. width can effectively control the width and height of webpage elements, but width has two completely different forms: attributes and styles. In HTML, attributes and webpage tags are enclosed in <>, while styles are accompanied by styles. The object meta in table has the width attribute, while most form controls do not have the width attribute. You can only set the width through the style. This method is often incorrect: <input type = "text" width = "100px"> The following describes the problem through several examples.
1. width in the table -- attributes and styles in the Attribute Table can change the width to indicate that the problematic table has an outer border. [Webpage effect]
Figure 1 set the cell width in the table [attribute method]

<! DOCTYPE html> [Style method]
<! DOCTYPE html> [Difference] [1] attribute Syntax: <tr> <td width = "100px"> 100px </td> </tr> [2] Table Syntax: <tr> <td style = "width: 200px"> 200px </td> </tr> [3] The effect is identical.

2. width in the form -- style although the cells in the table can control the width through the width attribute, the form does not have the width attribute (except the image control in the form), because there is no attribute, only the form width can be set through the style. <Input type = "text" width = "100px"> This method has no effect, because the text box does not have this attribute. [Webpage effect]

Figure 2 set the width of the form text control [style method]
<! DOCTYPE html> [Summary] [1] <input type = "text" value = "100px" style = "width: 100px"> set the width