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;