一、CSS3的新特性

1.1、CSS3盒子模型

css3中可以通过来指定盒子模型，有2个值：即可指定为、，这样我们计算盒子大小的方式就发生了改变。
可以分为两种情况：

1. box-sizing:content-box 盒子大小为 width + padding + border （以前默认的）
2. box-sizing:border-box 盒子大小为width

如果盒子模型我们改为了box-sizing:border-box，那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度）

    




        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
            box-sizing: content-box;
        }
        p {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
            /* css3 盒子模型  盒子最终的大小就是 width  200 的大小 */
            box-sizing: border-box;
        }
    

        小猪乔治
    
    

        小猪佩奇
    

1.2、CSS3其他特性（了解）

1. 图片变模糊
   filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

   

   image.png

    




        img {
            /* blur是一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位 */
            filter: blur(15px);
        }
        img:hover {
            filter: blur(0);
        }
    

2. 计算盒子宽度 width:calc 函数

   

   image.png

    




        .father {
            width: 300px;
            height: 200px;
            background-color: pink;
        }
        .son {
            /* width: 150px; */
            /* width: calc(150px + 30px); */
            width: calc(100% - 30px);
            height: 30px;
            background-color: skyblue;
        }
    

        

    

1.3、CSS过滤（重点）

transition: 要过滤的属性 花费时间 运动曲线 何时开始;

1. 属性：想要变化的CSS属性，宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过滤，写一个all就可以。
2.花费时间：单位是秒（必须写单位）比如0.5s。
3.运动曲线：默认是ease（可以省略）。
4.何时开始：单位是秒(必须写单位)可以设置延迟触发时间 默认是0s（可以省略）

    




        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
            /* transition: width .5s ease 0s, height .5s ease 1s; */
            /* 如果想要写多个属性，利用逗号进行分割 */
            /* transition: width .5s, height .5s; */
            /* 如果想要多个属性都变化，属性写all就可以了 */
            /* transition: height .5s ease 1s; */
            /* 谁做过渡，给谁加 */
            transition: all 0.5s;
        }
        div:hover {
            width: 400px;
            height: 200px;
            background-color: skyblue;
        }
    

1.4、进度条练习

    




        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
        }
        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            /* 谁做过渡给谁加 */
            transition: all .7s;
        }
        .bar:hover .bar_in {
            width: 100%;
        }
    

        

    

二、总结

狭义的HTML5 CSS3

广义的HTML5