表格和表单

一，表格

1，边框

border

2，宽度和高度

表格的宽度和高度由 width 和 height 属性定义。

3,水平对齐

text-align 属性设置 <th> 或 <td> 中内容的水平对齐方式（左、右或居中）。

4,垂直对齐

vertical-align 属性设置 <th> 或 <td> 中内容的垂直对齐方式（上、下或居中）。

5,表格内间距

<th></th>和<td></td>使用padding属性

6，水平分割线

可以使用border-bottom属性

7，悬停表格

在 tr 元素上使用 :hover选择器

8，条纹表格

使用nth-child()为偶数(even)或奇数(odd)行加背景色

9,响应式表格

overflow-x: auto 超出会显示滚动条

二，表单

1，outline属性

默认情况下，浏览器在获得焦点（单击）时会在输入框周围添加蓝色轮廓。你可以通过向输入框添加outline：none来消除此行为。

2，带图标的输入框

如果希望在输入框中包含图标，请使用background-image 属性，并将其与background-position 属性一起设置。还要注意，我们添加了一个较大的左内边距（padding-left）来留出图标的空间：

input[type="text"] {
	width: 100%;
	height: 46px;
	box-sizing: border-box;
	border: 2px solid #cccccc;
	border-radius: 4px;
	background-color: white;
	background-image: url('img/searchicon.png');
	background-position: 10px 10px;
	background-repeat: no-repeat;
	padding-left: 40px;
}

3,设置文本域样式

使用resize属性可防止对 textareas 调整大小（禁用右下角的“抓取器”）

4,轮廓

1，轮廓样式

• dotted - 定义点状的轮廓。

• dashed - 定义虚线的轮廓。

• solid - 定义实线的轮廓。

• double - 定义双线的轮廓。

• groove - 定义 3D 凹槽轮廓。

• ridge - 定义 3D 凸槽轮廓。

• inset - 定义 3D 凹边轮廓。

• outset - 定义 3D 凸边轮廓。

• none - 定义无轮廓。

• hidden - 定义隐藏的轮廓。

2，轮廓偏移 

outline-offset 属性在元素的轮廓与边框之间添加空间