关于css3:css3的新特性和css3的动画

css3的新个性

css3新增了很多新个性，如伪类选择器、属性选择器、边框款式、flex弹性布局、动画、色彩突变、@media响应式布局等

flex弹性布局

flex全称Flexbox(弹性盒子布局)，flex是CSS3新增的一种布局模型，能够灵便、响应式的设置页面布局。flex能够为盒状模型提供最大的灵活性。依据父元素设置好的宽度/高度等一系列属性，子元素会依据父元素的宽度/高度来进行填充扭转，使元素在对齐、排列和散布变得更加不便。
容器属性：

display：设置为display: flex;或display: inline-flex;来定义一个弹性容器。flex-direction：指定主轴的方向，能够是row（程度方向）、row-reverse、column（垂直方向）、column-reverse。flex-wrap：管制我的项目在容器中是否换行，能够是nowrap（不换行）、wrap（换行）、wrap-reverse。justify-content：定义我的项目在主轴上的对齐形式，如flex-start、center、flex-end、space-between、space-around。align-items：定义我的项目在穿插轴上的对齐形式，如flex-start、center、flex-end、baseline、stretch。align-content：定义多根轴线的对齐形式，只有一根轴线时不起作用。

我的项目属性：

flex：设置我的项目的伸缩比例，能够管制我的项目在容器内的占比。flex-grow：定义我的项目的放大比例，默认为0，即不放大。flex-shrink：定义我的项目的放大比例，默认为1，即能够放大。flex-basis：定义我的项目在没有伸缩空间时的初始大小。align-self：定义单个我的项目在穿插轴上的对齐形式，笼罩容器的align-items属性。

更多详情：https://www.cnblogs.com/qdhxhz/p/11953758.html
案例：

css* {    padding: 0;    margin: 0;    list-style: none;}html,body {    width: 100%;    height: 100%;}.box {    width: 100%;    height: 100%;    display: flex;    flex-direction: column;    overflow: hidden;    // 头部    .header {        width: 100%;        height: 50px;        background: hotpink;    }    // 身材    .main {        flex: 1;        overflow: auto;        background: salmon;    }    // 脚部    .footer {        width: 100%;        height: 50px;        background: skyblue;    }}html  <!-- 引入css文件 -->    <link rel="stylesheet" href="./index.css">  <!-- flex弹性布局 -->    <div class="box">        <div class="header">头部</div>        <div class="main">身材</div>        <div class="footer">脚部</div>    </div>

效果图：

选择器

附加：[attr|=value] 抉择属性值中以指定值结尾的元素，或以指定值结尾后紧跟着连字符-" 

案例：

css<style>        [name='msg'] {            border: 2px solid red;        }    </style>html<input type="text" name="msg">js<script>    const msg = document.querySelector("[name='msg']")    console.log(msg);</script>

效果图：

案例：

css     /* ul 第三个li变成红色 */        ul li:nth-child(3) {            color: red;        }        /* ul 倒数第二个li */        ul :nth-last-child(2) {            color: rgb(18, 10, 235);        }        /* 第一个ul下的li */        ul :first-child {            color: #fff;        }        /* ul下最初一个li */        ul :last-child {            color: chartreuse;        }    // 表单元素 获取焦点后的变动        input :focus {            border: 5px solid yellow;        }html     <input type="text" name="msg">            <ul>                <li>1</li>                <li>2</li>                <li>3</li>                <li>4</li>                <li>5</li>            </ul>

效果图：

案例：

css        /* 在元素后面插入内容 */        .choose::before {            content: '你好';            margin: 0 10px;        }        /* 在元素前面插入内容 */        .choose::after {            content: "前面插入";            margin: 0 10px;            color: #fff;        }html    <p class="choose">伪元素选择器</p>

效果图：