css基础知识

完善

解决父子元素的外边距重叠问题
    box1:before{
        content: "";
        display:table可以将一个元素设置为表格显示
    }
经过修改后的clearfix是一个多功能的样式，既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠
    .clearfix:before,
    .clearfix:after{
        content: "";
        display: table;
        clear: both;
    }
    .clearfix{
        zoom: 1;
    }

表单:

表单的作用就是用来将用户信息提交给服务器的
比如：百度的搜索框 注册 登录这些操作都需要填写表单
语法:
    使用<form>标签来创建一个表单,表单中必须要有两个属性action和method
    action表示提交表单到服务器中的地址
    method表示提交表单的方法,一个表单可以包含多个表单项
    文本框
    <input type="text" name="name">

    密码框
    <input type="password" name="pwd">

    多选框
    <input type="checkbox" name="sports">
    单选框
    <input type="radio" name="gender">

    提交按钮
    <input type="submit" value="提交">

    下拉列表
    <select>
        <option>北京</option>
    </select>
    input是我们最常见的表单象,它可以根据不同的type属性呈现不同的状态。
    type属性可选值：
    text：文本框
    password：密码框
    submit：提交按钮
    checkbox：多选框
    reset ：重置按钮
    select用于创建一个下拉列表。
    option表示下拉列表中的列表项。
    optgroup用于为列表项分组
    文本域:(textarea)
        可用属性;colse:文本域的列数
            rows:文本域的行数
    fieldset:用来为表单进行分组
    legend;用来指定每组的名字
    label;用来为表单定义描述文字
            

   
    value是默认值，
        提示信息用：placeholder="用户名/邮箱/手机号"
        autocomplete="off"不保存缓存记录
        multiple=" multiple"多选,直接展开
     optgroup label=""  指定组名
     自我介绍<textarea name="info"></textarea>多行输入,可以改变文本框大小
    <input type="submit" value="注册" />  
    <input type="reset">恢复为默认值
    <input type="button" ,value="按钮">只可以点击,没有反应
    <input type="password"value="">设置密码框
    <button type="submit">提交</button>与input功能相似,button是成对出现的,使用更灵活
    label    1.可以单独设置样式   2.不点击文本框,也能点击   3.一般用于比较小的选择文本
    <fieldset></fieldset>1.分组
        <legend></lenged>2.组名

    type="hidden"隐藏内容,有些内容想输入但又不想被用户看到

框架集

语法：framest(framest与body同时出现在一个页面中)
属性：
    rows，指定框架集中的所有的框架，一行一行的排列
    cols， 指定框架集中的所有的页面，一列一列的排列  
    这两个属性frameset必须选择一个，并且需要在属性中指定每一部分所占的大小 
    frameset中也可以再嵌套frameset
    frameset和iframe一样，它里边的内容都不会被搜索引擎所检索
    所以如果搜索引擎检索到的页面是一个框架页的话，它是不能去判断里边的内容的

    使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面
    而我们每单独加载一个页面，浏览器都需要重新发送一次请求，引入几个页面就需要发送几次请求，用户的体验比较差
    如果非得用建议使用frameset而不使用ifr

ie6png图片的修复

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

解决方法：
    1.可以使用png8来代替png24，即可解决问题，但是使用png8代替png24以后，图片的清晰图会有所下降
    2.使用JavaScript来解决该问题，需要向页   

<!-- 以下代码只会在IE6中执行，其他浏览器中无效 -->
<!--[if IE 6]>
    <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
    <script type="text/javascript">
        DD_belatedPNG.fix("div,img");
    </script>
<![endif]-->

css3过渡动画：

语法:transition:（想要先变谁就先写谁）
     transition：all 500ms ease（一起变化）
     border-radius:(圆角)

例如

        /*在哪产生动画、动画的时间、运动曲线、延迟*/
        /*transition: border-radius 500ms ease,width 500ms ease 500ms,height 500ms ease 1s,background-color 500ms ease 1.5s;*/
        transition: all 500ms ease;
    }
    .box:hover{
        width: 500px;
        height: 300px;
        background-color: red;
        border-radius: 50px;
    }

css3 阴影 ：

语法:box-shadow：h-shadow v-shadow blur spread color inset;
分别设置阴影：水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影

rgba（新的颜色值表示法 阴影）

    1、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
    2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度

运动曲线图：

<style type="text/css">
    div{
        width: 50px;
        height: 50px;
        background-color: gold;
        margin-bottom: 20px;
    }
    div:nth-child(1){
        /*匀速*/
        transition: all 1s linear;
    }
    div:nth-child(2){
        /*开始和结束慢速，中间加速*/
        transition: all 1s ease;
    }
    div:nth-child(3){
        /*开始慢速，结尾突然停止*/
        transition: all 1s ease-in;
    }
    div:nth-child(4){
        /*突然开始，结束时慢速*/
        transition: all 1s ease-out;
    }
    div:nth-child(5){
        /*开始和结束时慢速*/
        transition: all 1s ease-in-out;
    }
    div:nth-child(6){
        /*贝塞尔（贝兹）曲线*/
        /*transition: all 1s cubic-bezier(0.250,0.250,0.750,0.750);匀速*/
        /*超出再缩回的弹性效果*/
        transition: all 1s cubic-bezier(0.470, -0.485, 0.460, 1.435);
    }
    div:hover{
        width: 1000px;
    }
</style>

语法：基本形式:div:nth-child(描述的第几个div)
transition

linear：匀速
ease：开始和结束慢速，中间加速
ease-in：开始慢速，结尾突然停止
ease-out:突然开始，结束时慢速
ease-in-out:开始和结束时慢速
bezier:贝塞尔（贝兹）曲线