关于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>

效果图：