table | form所不为人知的背后
一、table 表格
1.1、table默认样式
虽说近几年table布局已经越来越少，但毕竟是曾经的霸主，肯定有其可取之处。例如table的默认样式是其子集平分table的宽度，而且默认的垂直方向上居中。在这接触一个新的display属性，display：table；平时见表格都是单线，而table的默认border-collapese：separate；意为边框分离而且单元格与单元格之间的空隙为2px,边框的颜色为灰色，一般我们会把这样的属性值更改为collapse，合并。
1.2、 tr默认属性
tr作为table下的直接子集，有其包裹着th tr，th 和 tr不能直接写在table下。tr默认的display属性值为table-row；它的vertical-align和border-color默认继承其父级。
1.3、td �默认属性
单元格包裹着我们想要用户直接看到的内容。display属性值为table-cell，有了这个属性，就有了垂直方向上的居中.
1.4、小拓展
传统的居中方式有line-height，但line-height只针对于文字，而对于元素或者说图片的话不支持，还有用position定位，但是一般不推荐用定位使元素居中。这时候就可以用div来模仿table属性，例如：如何让一个矩形图片水平垂直居中？
方法一、利用img图片
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>图片水平垂直居中</title>
<style>
div {
width:300px;
height:300px;
background: gray;
display: table;
}
div a {
display: table-cell;
vertical-align: center;
text-align: center;
}
div img {
max-width: 300px;
max-height: 300px;
}
</style>
</head>
<body>
<div>
<a href="###">
<img src="bg.png" alt="" />
</a>
</div>
</body>
</html>
解析：vertiacal-align，只作用于inline元素（inline：<img>,<span>,<strong>.<em>……），和table-cell元素 即td，所以将包裹着img标签的a标签display：table-cell。自然a标签里面的图片就垂直居中了.对于将img设置max-width: 300px;max-height: 300px;避免图片过大，影响图片的居中方式
图片水平垂直居中
方法二、利用背景图实现
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
ul li {
width: 300px;
height: 300px;
border: 1px solid red;
float: left;
}
ul .li1 {
background: url("https://timgsa.baidu.com/timg? image&quality=80&size=b9999_10000&sec=1503899395122&di=33d5e9e5826f7e1db626dbe186bf016b&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201506%2F01%2F181549qb80jsgvdsgygw3s.jpg") no-repeat center center;
background-size: contain;
}
ul .li2 {
background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1503899801325&di=890246b43f542021a5b8b3e954eb2b53&imgtype=jpg&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F48540923dd54564e69924e3bbade9c82d1584f39.jpg") no-repeat center center;
background-size: contain;
margin: 0 10px;
}
ul .li3 {
background: url("http://gw.alicdn.com/imgextra/i4/33074580/TB2VLNKX5j_F1JjSZFCXXc5eFXa_!!33074580.jpg_970x970q50s150.jpg_.webp") no-repeat center center;
background-size: contain;
}
<body>
<ul>
<li class="li1"></li>
<li class="li2"></li>
<li class="li3"></li>
</ul>
</body>
二、form表单
2.1、表单的含义
所谓表单就是创建一个表单区域，双标签块级块级元素。form表单有两个属性值 action：提交后台地址，method 提交信息、数据的方式，其提交的方式有两种 get方法和post方法，但get提交的方法保密性不好，一般不使用。
2.2、表单分类
input 表单元数据，单标签行块级元素。其type类型分为type="text";定义文本输入框type="password";定义密码输入框type="submit"; 定义数据信息提交按钮 type="reset"; 定义数据名称（字段名称）
input有一个focus伪类。鼠标点击输入框触发的状态，也可以成为聚焦。
input：focus{ color：red;}
