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

效果图：