BFC
BFC 布局规则 块级格式化上下文
1 元素会也块状一层一层往下排列
2 上个元素的下间距和这个元素的上间距会发生重叠 间距去较大的那个值
3 BFC是一个独立的容器 不会影响周围元素的布局
4 计算高度 浮动元素也参与计算
5 元素的左侧会紧挨着父元素的左侧排列
6 BFC中的浮动元素不会影响下面的元素排列
条件
html 是一个BFC
float不能为none
overflow不能为visible
position为 absolute/fixed
dispaly inline-block table table-cell table-caption flex inline-flex
应用 1 防止高度塌陷
2 解决margin上下高度重叠
表格
表格
table tr td
表格行分组
thead tbody tfoot
表格列分组
<colgroup span=""></colgroup>
表格列标题
th
表格标题
<caption></caption>
caption left/right/top/bottom 不支持左右 只有火狐支持
表格的html属性
cellspacing 单元格之间的间距
cellpadding 边框与内容之间的间距
align 对齐方式
colspan 合并列
rowspan 合并行
rules 分隔线
cols/rows/all/groups/none
表格的css属性
border-spacing:;单元格与单元格之间的间距
border-collapse:;合并相邻之间单元格的边框
collapse 合并 separte 不合并(默认)
empty-cells:; 无内容是隐藏单元格
show hide
table-layout:; auto / fixed
表格的宽度受表格之间的内容影响 (默认)
控制表格的宽度 不受内容多少的影响 加快运算
表单
表单 form
action 路径
method 方法 post/get
name 表单名称
表单控件 <input type="radio" name="ral"> 男 radio 单选
<input type="radio" name="ral"> 女
<input type="checkbox" name=""> 篮球 checkbox 多选
<input type="checkbox" name=""> 足球
下拉列表
<select>
<option></option>
<option></option>
</select> select 选择 option 选项
checked="checked" 默认选择
disabled="disabled" 禁止
selected="selected" 默认下拉列表选择
<input type="flie"> 上传文件
textarea 多行文本定义:
语法: <textarea name="" cols="" rows="" ></textarea>
多行文本。rows属性和cols属性用来设置文本输入窗口的高度和宽度,单位是字符。
阻止浏览器对窗口的拖动设置:{resize:none;}(css属性)
表单字段集 fieldset
可以嵌套多个<fieldset></fieldset>
可以生成一个将文字包裹到外面的框
字段集标题 legend
<legend></legend> 只能插入一个标题
提示信息 label
<label for="绑定控件id名"></label>