今日份学习

表格相关的

1. border-spacing:20px                                                                                                                      单元格间距
单元格间距(该屈性必须给able添加)表示单元格边框
之间的距离，不可取负值
2. bordercapseseprate/ollapse,
合并相邻单元格边框
合并相邻单元格边框(该屈性必须给table添加)
separate(边框分开)默认值: cllapse(边框合并
3.empty-cllshow/hide;
无内容时单元格的设置
定义当单元格无内容时，是否显示该单元格的边框区
域: show: 显示:hide:隐藏;
4.table-layoutauto/fixedt
是否固定单元格的宽度
fixed: 固定宽， 定义时则宽度会平均分配:高度则会
随内容变化
H5新增加的表单属性H5新增加的表单type属性值

表单相关的

回顾:
表单的作用:用来收集用户的信息的;
表单的组成:
①表单域: <form name="" method="get/post" action-""> </form>
②表单控件: <input type="text" value="/>
③提示信息

1.<fieldset></fieldset>

fieldset表单字段集，相当于一个方框。fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象
2. <legend> </legend>字段级标题
3. <label for="box"> </label>        label提示信息标签for= “绑定控件id名”
4 .<input type="file"/>-
上传文件框multiple= multiple" multiple属性可实现多选
5. <input type="hidden"/>
隐藏字段对于用户来说通常是不可见的，通常会存储一个默认值，通过js来
修改
6.<type="radio" name="sex"/>单选按钮单选按钮里的name属性必须写，同一组单选按钮的
name属性值必须一样。

7<input type="checkbox"

name="like" disabled="disabled" checked="checked"/>

type="checkbox"多选按钮name可加可不加
checked=" chacked (选中) disabled="disabled"禁用
8.<select>
<option>北京</option>
<option>.上海</option>
</select>

下拉菜单
<textarea cols="40" rows="5"文本域</textarea>
文本域 cols="字符宽度” rows="行数”

Get和post的区别

安全性：post币get更安全一些

get会在后面挂载参数post不会

get是从服务器获取数据,post是向服务器传送数据

服务器接收get和post数据时使用方法不同

1.表单常用的CSS样式 outline 定义和用法：outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 注意：轮廓线不会占据空间，也不一定是矩形。 作用：清除input框获取焦点之后的样式。语法：outline:none

2. appearance: none; 定义：appearance 属性可以使元素看上去像标准的用户界面元素 作用：修改元素的样式【可用于清除下拉表单、单选框自带的样式】

3.:focus 定义和用法：元素获取焦点之后的样式操作 作用：input框获取焦点之后的样式操作。 语法：选择器:focus{属性：属性值}

4. :ckecked 定义：元素选中之后的样式操作 作用：美化单选框与复选框选中之后的样式 语法：选择器:checked{属性:属性值}

H5新增加的表单type属性值

type新增加的属性值

注意，跟 input 标签设置样式一样，但是要设置标签中局部的样式不能实现。如改变日历的背景色，颜色框的按钮效果等，这些都不可以实现。

H5新增加的表单属性

表单新增加的属性

 H5新增加的表单标签

新增加的表单标签

datalist提供一个事先定义好的列表，通过id与input关联，当在input内输入时就会有自动完成（autocomplete）的功能，用户将会看见一个下拉列表供其选择

 输出标签

<output name="x" for="a b"></output>       

<form action="" οninput="x.value=parseInt(a.value)+parseInt(b.value)">     

<input id="a" type="range" min="0" max="100">100+     

<input id="b" type="text" value="50">=     

<output name="x" for="a b"></output> </form>

BFC概念和应用

BFC内部的Box会在垂直方向，一个接一个的放置。

Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠（应用：防止marin重叠）

BFC的区域不会与float box发生重叠（应用：自适应两栏布局）

4、计算BFC的高度时，浮动元素也参与计算（应用：清除内部浮动）

5、每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此。

6、BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素

BFC的触发条件

1.根元素 html默认就是一个BFC

2.float的值不为none 单纯的div不是BFC，如果添加了浮动就是BFC

3.overflow的值不为visible  单纯的div不是BFC，如果添加了overflow：hidden等就是BFC

4.display的值为 inline-block/ table-cell/ table-caption/ flex/ inline-flex

5.position的值为absolute或fixed