前端6.03

完善

子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素

使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠

解决父子元素的外边距重叠

.box1:before{

content: "";

display:table可以将一个元素设置为表格显示

display: table;

}

解决父元素高度塌陷

.clearfix:after{

content: "";

display: block;

clear: both;

}

经过修改后的clearfix是一个多功能的样式，既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠

表单

现实生活中的表单是用来提交信息的，比 如：办理银行卡填写的申请表、找工作填 写的简历、入学时填写的个人信息表。这 些都是表单的一种

网页中的表单是用来向服务器提交信息的， 我们最常用到的表单就是baidu的搜索框

使用

标签来创建一个表单

表单中必须要有两个属性action和method

action表示提交表单到服务器中的地址

method表示提交表单的方法

文本框

密码框

多选框

单选框

提交按钮

下拉列表

北京

input是我们使用的最多的表单项，它可以 根据不同的type属性呈现不同的状态。

type属性可选值：

text：文本框

password：密码框

submit：提交按钮

radio：单选按钮

checkbox：多选框

reset ：重置按钮

select用于创建一个下拉列表。

option表示下拉列表中的列表项。

optgroup用于为列表项分组。

fieldset用来为表单项进行分组。

legend用于指定每组的名字。

label标签用来为表单项定义描述文字

框架集

框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面

框架集可以同时引入多个页面，而内联框架只能引入一个

在h5标准中，推荐使用框架集，而不使用内联框架

使用frameset来创建一个框架集，注意frameset不能和body出现在同一个页面中

所以要使用框架集，页面中就不可以使用body标签

属性：

rows，指定框架集中的所有的框架，一行一行的排列

cols， 指定框架集中的所有的页面，一列一列的排列

这两个属性frameset必须选择一个，并且需要在属性中指定每一部分所占的大小

frameset中也可以再嵌套frameset

frameset和iframe一样，它里边的内容都不会被搜索引擎所检索

所以如果搜索引擎检索到的页面是一个框架页的话，它是不能去判断里边的内容的

使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面

而我们每单独加载一个页面，浏览器都需要重新发送一次请求，引入几个页面就需要发送几次请求，用户的体验比较差

如果非得用建议使用frameset而不使用iframe

ie6png的修复

在IE6中对图片格式png24支持度不高，如果使用的图片格式是png24，则会导致透明效果无法正常显示

解决方法：

1.可以使用png8来代替png24，即可解决问题，但是使用png8代替png24以后，图片的清晰图会有所下降

2.使用JavaScript来解决该问题，需要向页面中引入一个外部的JavaScript文件，然后在写一下简单的JS代码，来处理该问题

css过渡动画

transition：border-radius 500ms ease,width 500ms ease 500ms,height 500ms ease 1s,background-color 500ms ease 1.5s;

transition: all 500ms ease;

css圆角  阴影  透明度

圆角

border-top-left-radius: 100px 50px;左上角为椭圆圆角

border-top-left-radius: 100px;

border-top-right-radius: 100px;左、右上角为正圆圆角

border-radius: 40px;曲率半径为40的圆角矩形

border-radius: 20%;最大200px，20%即40px

border-radius: 50%;正圆

box-shadow：水平偏移 垂直偏移 羽化大小 扩展大小 颜色

阴影

box-shadow：水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影   inset

透明度

opacity: 0.3;透明度30%，文字也透明了

背景色变透明，但文字不会透明background-color: rgba(255,215,0,0.3);

边框透明border: 2px solid rgba(0,0,0,0.3);

运动曲线

匀速   transition: all 1s linear;

开始和结束慢速，中间加速     transition: all 1s

ease;

开始慢速，结尾突然停止   transition: all 1s ease-in;

突然开始，结束时慢速     transition: all 1s ease-out;

开始和结束时慢速     transition: all 1s ease-in-out;

贝塞尔（贝兹）曲线  transition: all 1s cubic-bezier(0.250,0.250,0.750,0.750);匀速   超出再缩回的弹性效果