html-day09隐藏显示&BFC
1.多种显示与隐藏方式的区别
1.display:none; 不占据原位置 2.visibility:hidden; 会占据原位置 [visibility:visible;显示] 3.opacity:0; 会占据原位置。可以点击触摸等。
2.表格
1.表格相关的属性 1.border-spacing:*px; 双线边框之间的间隔 2.border-collapse:collapse; 双线边框变细边框 注意:必须配合td的边框一起使用才会生效。 3.table-layout:fixed; 让表格等分宽度。 注意:必须要给table设置宽度才会生效. 2.表格相关的标签 <thead></thead> 表格头 <tbody></tbody> 表格身体 <tfoot></tfoot> 表格脚 注意:table>tbody>tr
3.表单
1.表单字段集 <fieldset> <legend>字段集标题</legend> </fieldset> 2.label标签:改善用户的鼠标体验 语法1: <input id='id名'> <label for='要关联选项的id名'>要关联的内容</label> 语法2: <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普通按钮' value='值或者按钮上的文字'> 推荐使用button
4.BFC:块格式化上下文,是一个独立的区域,区域与区域之间不会互相影响。 【面试题】
触发、生成BFC: 1.浮动 2.overflow的值不为默认值的时候。--hidden 、 auto 、scroll 3.定位position的值为fixed和absolute; 4.display的属性值为inline-block、flex和inline-flex; 应用场景: 1.清除浮动 2.解决margin的bug 3.实现两列自适应布局
两列自适应布局:左边宽度固定,右边宽度自适应
左边设置宽度,左浮动。右边不设置宽度,加overflow:hidden;
上边固定,下边自适应:
上边设置宽高,下边设置宽度,不设置高度,设置定位position:absolute;top:上边盒子的高度;bottom:0;left:0;