2021-05-26 Day09-BFC和表单、表格补充

回顾

1.width:auto;height:auto;
2.min-width/max-width
  min-height/max-height
	body{
		min-width:1200px;
	}
3.平分body高度
	html,body{
		height:100%;
	}
4.高度塌陷问题
	- 父容器固定高度
	- 父容器添加oveflow:hidden;(触发了BFC)
	- 父容器:after{
		content:"";
		display:block;
		height:0;
		clear:both;
	}
		父容器{zoom:1;}

表单元素补充

1.单选按钮
	<input type="radio" name="gender" value="male">男
	<input type="radio" name="gender" value="female" checked>女
	- 相同的name,不同的value
	- 默认被选中checked="checked"可以简写为一个checked
2.复选框
	<input type="checkbox" name="city" value="bj">北京
	<input type="checkbox" name="city" value="sh">上海
	<input type="checkbox" name="city" value="sz">深圳
	- 相同的name,不同的value
	- 默认被选中checked="checked"可以简写为一个checked
3.下拉菜单
	<select name="age" size="5">
		<option value="a">0-12岁</option>
		<option value="b">13-18岁</option>
		<option value="c">19-30岁</option>
		<option value="d">30以上</option>
	</select>
	- size显示的条数,不规定的话只显示1条
	- 默认被选中selected="selected"可以简写为一个selected
4.多行文本域
	<textarea name="intro" rows="4" cols="40"></textarea>
	- rows显示的行数
	- cols一行显示的字符数(一个汉字是两个字符)
		更建议使用width和height来更改文本域的尺寸
	- resize: none;禁止更改元素的尺寸
5.文件上传
	<input type="file">
6.表单字段集
	<fieldset>
		<legend>千锋教育</legend>
		<p>
			千锋教育创建于2011年,已经10周年了
		</p>
	</fieldset>
7.关联文本
	方法一：
	<label>
		<input type="checkbox" name="tiaokuan" value="agree"/>我同意此条款
	</label>
	方法二：
	<input type="checkbox" name="tiaokuan" value="agree" id="agree"/>
	<label for="agree">我同意此条款</label>
		for要和id属性相关联

表格补充

1.表格行分组
	thead表头、tbody表主体、tfoot表尾
	tr行，th表头单元格(文本加粗并居中)
2.表格标题
	<caption></caption>
3.表格边框
	td,th{
		border: 1px solid #000;
	}
4.单元格间距
	table{border-spacing:20px;}
5.单元格合并
	table{border-collapse:collapse;}
6.表格标题位置
	table{caption-side: bottom;}
7.无内容单元格隐藏
	td{empty-cells: hide;}
	- 生效的前提是单元格不能合并
8.固定表格布局
	table{table-layout:fixed;}
	不仅要固定每一列的宽度，也要固定表格宽度

BFC块级格式化上下文,是一个独特的渲染区域

BFC布局规则
	一、内部的Box会在垂直方向，一个接一个地放置。
	二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）
	三、每个元素的margin box的左边， 与包含块border box的左边相接触
	四、BFC的区域不会与float box重叠。
	五、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
	六、计算BFC的高度时，浮动元素也参与计算
触发BFC的条件
	html本身就是BFC
	float不为none
	position为absolute和fixed
	overflow不为visible
	display:inline-block/flex/inline-flex/table-cell/table-caption

定位的特殊用法

定位设置元素的尺寸

左侧固定右侧自适应布局？

1.固定定位
2.浮动+margin
3.BFC
4.calc()函数
	width:calc(100% - 200px) ;符号左右必须有空格
5.flex方法