09表格 表单 BFC 自适应布局

09表格 表单 BFC 自适应布局

一、表格

表格除了

border=""
width=""
height=""
cellspacing=""
cellpadding=""

html属性外，还有css样式属性

borde-collapse:collapse;	实现表格细边框
	如果要实现真正意义的细边框，必须给td标签加边框
border-spacing:;	实现表格双线边框线与线之间的间隔
	如果设置了表格为细边框，该属性不生效

在表格中，除了

<table>
    <tr>
        <td></td>
    </tr>
</table>

标签，还有其他标签

<table>
    <thead>
        <tr>
            <td></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <foot>
        <tr>
            <td></td>
        </tr>
    </tfoot>
</table>

常常将

<thead></thead>
<tbody></tbody>
<tfoot></tfoot>

标签省略不写，但是需要注意的是，虽然在开发的时候没有写，但是浏览器在解析的时候会自动将tbody标签添加为table的子级元素，tr的父级元素。所以开发的时候无论是否添加了以上三个标签，tr都不是table的子级元素

二、表单

用于收集用户信息

由表单标签、表单域、表单按钮组成

表单标签

数据提交的地址和方式

<form action="" method=""></form>

action=""	主要用于填写数据提交的地址
method=""	主要用于填写数据传输的方式，有get和post两种方式

表单域

数据填入的部分

<input type="text">			单行文本框
<input type="password">		密码框
<input type="radio">		单选
<input type="checkbox">		多选
<input type="file">			文件上传
<input type="hidden">		隐藏域，不被用户看但是要提交到后端的信息

html属性有

name:;				数据提交的桥梁，必须有name才可以提交
value:;				值
placeholder:;		占位符，提示符

除了以上的标签，还有一些其他标签

表单字段集标签

<fieldset>
    <legend>标题</legend>
</fieldset>

label标签

用于提高用户鼠标点击体验
<label><input>要关联的内容</label>

<label for=“id名”>要关联的内容</label><input id=“id名”>

下拉列表

<select name="名字">
    <option value="">内容</option>
    <option value="" selected>内容</option>
</select>
	如果有value值，就提交value值，如果没有就提交提交option的内容
selected
	属性:属性值;
	selected:selected;的缩写，用于显示下拉列表默认选择

多行文本域

<textarea name=""></textarea>
	标签内不要有任何内容，包括空格，否则解析出来的多行文本域是有内容的

三、BFC

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

触发条件

元素被设置了浮动
float:left;
float:right;

元素被设置了部分定位
position:absolute;
position:fixed;

元素被设置了overflow属性,除了
overflow:visible;

元素被设置了display属性
display:inline-block;
display:flex;

作用

解决margin的粘连问题/塌陷问题

清除浮动

自适应布局
	两列布局	左边左浮动，右边设置overflow:hidden;
	上下固定，中间自适应	上下均设置宽高和定位，中间盒子设置宽度，定位坐标要有上下两个方向

四、利用自适应制作一个布局

上下固定，中间自适应，且中间部分左边固定，右边自适应

* {
	margin: 0;
	padding: 0;
}

.top {
	width: 100%;
	height: 50px;
	position: absolute;
	top: 0;
	left: 0;
	background: red;
}

.middle {
	width: 100%;
	position: absolute;
	top: 50px;
	left: 0;
	bottom: 50px;
}

.bottom {
	width: 100%;
	height: 50px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: orange;
}

.middle .left {
	width: 300px;
	height: 100%;
	background: yellow;
	float: left;
}

.middle .right {
	height: 100%;
	background: blue;
	overflow: hidden;
}

<div class="top"></div>
    <div class="middle clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
<div class="bottom"></div>