H5基础-10

---

一、多种显示与隐藏方式的区别

1.display:none;—不占据原位置
2.visibility:hidden;—会占据原位置
 visibility:visible;—显示
3.opacity:0;—会占据原位置，可以点击触摸等

二、表格

1.表格相关的属性

1.border-spacing:*px;---双线边框之间的间隔
2.border-collapse:collapse;---双线边框变细边框
注：必须配合td的边框一起使用才会生效
3.table-layout:fixed;---让表格等分宽度
注：必须给table设置宽度才会生效

2.表格相关的标签

< caption >< / caption >---表格标题，必须紧随table标签之后
< thead >< / thead >---表格头
< tbody >< / tbody >---表格身体
< tfoot >< / tfoot >---表格脚
注：tr是table的孙子 table>tbody>tr

三、表单

1.表单字段级

< fieldset >
   < legend >字段集标题< / legend >
< / fieldset >

2.label标签：改善用户的鼠标体验

语法一：
< input id=‘id名’ >
< label for=‘要关联选项的id名’>
语法二：
< label >< input >要关联的内容< / label>

3.下拉列表

< select name='名字' >
  < option value='值'>选项< / option >
  < option value='值'>选项< / option >
< / select >
说明：value是提交到后端的选项的值，有value就提交value的值，没有就提交option的内容

4.多行文本域

< textarea name=’’  placeholder=’’ >< / textarea>
注：该标签之间不能有任何东西

5.input的其它type属性

< input type='file---文件丨hidden丨submit---提交丨reset---重置丨button---普通' name='' value='值或者按钮上的文字'>

四、BFC

概念：块格式化上下文，是一个独立的区域，区域和区域之间不会互相影响

1.触发、生产BFC：

A.浮动
B.overflow的值不为默认值
C.position的属性值为fixed和absolute
D.display的属性值为inline-block丨flex丨inline-flex

2.应用场景：

A.清除浮动
B.解决margin的bug
C.实现两列自适应布局