填补知识空缺--表格边框问题、input的预选项、浮动

1.表格双边框和消除双边框问题：

与表格相关的标签有：table,caption,tr,th,td

table 表格的标志和容器，caption表格的标题，tr行，th每列的标题，td内容

表格的边框默认为不显示

边框css写法（如下图）

也可直接在table标签中写

不过这样写，caption不显示边框，caption的边款需要在css中单独写，并且不能改变边框样式。

消除双边框：

法一：利用cellspacing属性（表格里单元格之间的距离）

设置cellspacing="0"(需要直接在table标签中设置)，缺点：合并的边框宽度增加变为了2px。

在css无法设置cellspacing以及cellpadding属性（表格里单元格内的空白部分;），因为它们在HTML5中已被删除

法二：

用css实现：

（1）html5中和cellspacing有相似功能的是---->border-spacing（相邻表格单元格边框之间的间距） 而padding可以实现cellpadding的效果。

（2）最完美的实现方法：（border-collapse:collapse;）

border-collapse：css中用来决定表格的边框是分开的还是合并的

属性值：

empty-cells 属性设置是否显示表格中的空单元格（仅用于“分离边框”模式）。

法三：这是一个特别的方法（是看到的哈，不是我想的）

不设置border属性，而是设置border-spacing:1px;（在css中）或直接在标签中设置cellspacing="1"

然后给表格设置背景色，给tr设置与body标签背景相同的颜色（制造掏空的效果）

2.input和select的结合版（运用HTML5中的list属性）

运用input的list属性引用<datalist>元素，<datalist>元素中添加多个<option>元素作为input的预选项

3.浮动理解：（结合黑马视频和Head First HTML与CSS 第二版 书籍）

谈到浮动，我们需要先了解一下标准流（正常流）

HTML中的元素可分为块元素和内联元素（行内与行内块）

正常流就是：块元素从上往下流（每个块元素独占一行），内联元素是从容器的左上角流到右下角，每当容器宽度不够时，内联元素会自动流到下一行。

而当一个块级元素添加了float属性（浮动），浏览器将把该元素从标准流中删除，该元素之后的元素自动填补空缺而该元素将浮动在这些元素上方，但这些元素内的内联元素会环绕着该元素流动（float属性一开始就是用来方便制作图文环绕效果的）。注意，所有元素在设置浮动之前必须设置它的宽度，若该元素没有设置宽度，浏览器将会把它的宽度视为0（彻底消失），因为它没有父级。